Notes on Building a Dynamic Table Component in Vue

Overview

• Dynamic table that allows filtering tasks based on various attributes (status, due date, assigned user, etc.).

Initial Setup

• Created a boilerplate Vue application with a blank screen.
• Objective: Build a data table to display tasks with filtering capabilities.

Creating Main Table Component

Steps to Create DataTable.vue

1. New Component Creation: Create datatable.view in components folder.
2. Using Vue 3 Composition API:
   • Start with script setup for each component.
   • Define props to pass data into the table.
3. Defining Props:
   • Expect an items prop as an array.
   • Require this prop for the component to function properly.
4. Displaying Table Data:
   • Loop through items using v-for to create table rows.
   • Use item.id as key for each row.
5. Testing Data Flow:
   • Manually create a few task objects to test data rendering in the table.

Fetching Data from API

Using Lifecycle Hooks

• Use onMounted hook to call fetch API when component mounts.
• Fetch tasks data and store it in a reactive reference, items.
• const response = await fetch(endpoint) to fetch data, followed by await response.json() to convert response to JSON.

Enhancing Table Display

1. Update Table Markup:
   • Added headers for task attributes (ID, assigned user, status, title, due date, actions).
   • Display additional information in the rows.

Implementing Filters

Adding Filter Components

1. Filter Components: Created separate components for filtering: SearchForm.vue, FilterRadios.vue, FilterDropdown.vue.
   • This promotes code modularity and maintainability.

Search Form Component

1. Capture User Input:
   • Use v-model or @input to capture search input.
   • Emit an event to parent component on input change.
2. Filter Logic:
   • Use a computed property to filter items based on search input.

Filter Radios Component

1. Radio Buttons for Date Filtering:
   • Create radio buttons for filtering by due date: All, Today, Past Due.
   • Capture selection and emit event.
2. Filtering Logic Update:
   • Adjust filtering logic using switch case based on selected option.

Filter Dropdown Component

1. Dynamic Filter for Status:
   • Create a list of unique statuses dynamically from items.
   • Use checkboxes for filtering based on selected statuses.
2. React to Checkbox Changes:
   • Capture checkbox state and emit filter changes to update displayed tasks.

Final Thoughts

• The final implementation allows filtering tasks via multiple criteria simultaneously (search, due date, and status).
• Encouraged viewers to share video topic suggestions and feedback.
• Thanked viewers for watching.