158 lines
4.8 KiB
Markdown
158 lines
4.8 KiB
Markdown
# 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
|
|
|
|
```typescript
|
|
// 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!
|