LinkDesk/.kiro/specs/vfx-project-management/shot-data-table-implementation.md

Shot Data Table Implementation with TanStack Table

Overview

Successfully refactored the shot table view to use shadcn-vue Data Table pattern with TanStack Table (@tanstack/vue-table). This provides a more robust, performant, and feature-rich table implementation following industry best practices.

What Changed

New Dependencies

• @tanstack/vue-table: Headless table library for Vue 3 with powerful sorting, filtering, and column management

New Files Created

1. frontend/src/components/shot/columns.ts

   • Column definitions using TanStack Table's ColumnDef type
   • Dynamic column generation for task types
   • Integrated action menus and badges
   • Type-safe column configuration

2. frontend/src/components/shot/ShotsDataTable.vue

   • Data table component using TanStack Table
   • Handles sorting state
   • Manages column visibility
   • Emits row click events
   • Fully typed with TypeScript

Updated Files

1. frontend/src/components/shot/ShotBrowser.vue

   • Replaced custom table with TanStack Table implementation
   • Updated state management to use SortingState and VisibilityState
   • Simplified sorting logic (handled by TanStack Table)
   • Added shotColumns computed property
   • Integrated with new data table component

2. frontend/src/components/shot/ShotColumnVisibilityControl.vue

   • Updated to work with TanStack Table's VisibilityState
   • Added isColumnVisible helper function
   • Maintains same UI/UX as asset page

Key Features

TanStack Table Benefits

1. Type Safety: Full TypeScript support with proper typing
2. Performance: Optimized rendering and state management
3. Flexibility: Headless UI allows custom styling
4. Sorting: Built-in sorting with multi-column support
5. Column Management: Easy show/hide columns
6. Row Selection: Built-in row selection state
7. Extensibility: Easy to add pagination, filtering, etc.

Column Definitions

The columns.ts file defines all columns:

• Select: Checkbox column for row selection
• Shot Name: With camera icon
• Episode: Badge showing episode name
• Frame Range: Shows start-end with frame count
• Status: Color-coded status badge
• Task Status Columns: Dynamically generated from allTaskTypes
• Description: Truncated text
• Actions: Dropdown menu with edit/delete/view tasks

State Management

Uses TanStack Table state types:

• SortingState: Array of sort configurations
• VisibilityState: Object mapping column IDs to visibility boolean
• Session storage persistence for column visibility

Integration Pattern

// Column definitions with metadata
const shotColumns = computed(() => {
  const meta: ShotColumnMeta = {
    episodes: episodes.value,
    onEdit: editShot,
    onDelete: deleteShot,
    onViewTasks: selectShot,
  }
  return createShotColumns(allTaskTypes.value, meta)
})

// Data table usage
<ShotsDataTable
  :columns="shotColumns"
  :data="filteredShots"
  :sorting="sorting"
  :column-visibility="columnVisibility"
  :all-task-types="allTaskTypes"
  @update:sorting="sorting = $event"
  @update:column-visibility="handleColumnVisibilityChange"
  @row-click="handleRowClick"
/>

Advantages Over Previous Implementation

Before (Custom Table)

• Manual sorting implementation
• Custom column visibility logic
• More code to maintain
• Less type safety
• Manual state management

After (TanStack Table)

• Built-in sorting with proper state management
• Standard column visibility pattern
• Less custom code
• Full TypeScript support
• Industry-standard patterns
• Better performance
• Easier to extend (pagination, filtering, etc.)

Consistency with Asset Page

The shot table now follows the same patterns as the asset table:

• Same column visibility control UI
• Same sorting behavior
• Same row selection patterns
• Consistent badge styling
• Matching action menus

Future Enhancements

With TanStack Table, these features are now easy to add:

1. Pagination: Built-in pagination support
2. Global Filtering: Search across all columns
3. Column Resizing: Drag to resize columns
4. Column Reordering: Drag and drop columns
5. Row Expansion: Expandable rows for details
6. Virtual Scrolling: For thousands of rows
7. Export: Easy data export functionality

Testing

The implementation maintains all existing functionality:

• ✅ Column sorting works
• ✅ Column visibility control works
• ✅ Row selection works
• ✅ Task status badges display correctly
• ✅ Action menus work
• ✅ Episode names display correctly
• ✅ Session storage persistence works
• ✅ Integration with ShotBrowser works

Migration Notes

No breaking changes for users:

• Same UI/UX
• Same features
• Better performance
• More maintainable code

The refactoring is complete and production-ready!