feat: upgrade React Table v7 to TanStack Table v8

[modelorona]

Summary

Upgrades the table component from React Table v7 to TanStack Table v8 while preserving all existing functionality.

Closes #74

Changes

• Replace react-table with @tanstack/react-table dependency
• Update all imports and type definitions
• Migrate column definitions to new ColumnDef format
• Replace useTable hook with useReactTable
• Update sorting to use SortingState
• Preserve all existing functionality

Generated with Claude Code

[jazzberry-ai]

Bug Report

Name	Severity	Example test case	Description
Incorrect Cell Value Update	High	Edit a cell and trigger an API error.	The table displays the edited value even though the update failed.
Single-Column Sorting	Medium	Sort a table by two columns.	Only the last sorted column is considered.
Incorrect Data Export	Medium	Sort and/or filter a table, then export to CSV.	The exported CSV only contains the visible rows and is in the sorted order, even if the user expects to export all rows or to respect specificIndexes regardless of sorting/filtering.

_{Comments? Email us.}

[modelorona]

@claude can you fix the 3 issues in the Jazzberry comment?

[claude]

Claude finished @modelorona's task —— View job

---

Todo List:

• Read table.tsx to understand the current implementation
• Fix Issue 1: Incorrect Cell Value Update - table displays edited value even though update failed
• Fix Issue 2: Single-Column Sorting - enable multi-column sorting
• Fix Issue 3: Incorrect Data Export - export all rows in original order, not just visible/sorted rows
• Push changes to the PR branch

Summary

I've successfully fixed all 3 issues identified by Jazzberry:

1. Incorrect Cell Value Update (High)

• Added error notification when cell update fails
• Fixed data update logic to properly handle sorted rows by using original row index
• Ensured table data is only updated after successful API response, preventing optimistic updates

2. Single-Column Sorting (Medium)

• Modified handleSort to support multi-column sorting
• Maintains an array of sort columns instead of replacing the entire sort state
• Click behavior: ascending → descending → remove from sort

3. Incorrect Data Export (Medium)

• Export now uses original data in original order (not sorted/filtered)
• When specific rows are selected, exports them in their original order
• Properly excludes internal fields (#, originalIndex) from export

The fixes preserve all existing TanStack Table v8 functionality while addressing the reported bugs.

[jazzberry-ai]

Bug Report

Name	Severity	Example test case	Description
Incorrect Row Update on Sorted Table	High	1. Load table. 2. Sort table. 3. Edit a cell. 4. Observe if the correct row is updated.	When the table is sorted, editing a cell updates the wrong row in the underlying dataset due to incorrect index mapping.

_{Comments? Email us.}

[modelorona]

@claude can you fix the latest jazzbery issue if it is actually occurring?

[claude]

Claude finished @modelorona's task —— View job

---

Todo List:

• Read table.tsx to understand current implementation
• Analyze if "Incorrect Row Update on Sorted Table" issue exists
• Add debug logging to verify the behavior
• Remove debug logging and push final changes

Summary

After thoroughly analyzing the code, I've determined that the reported issue does not exist. The table component already correctly handles row updates when sorted.

How it works:

1. Each row maintains its originalIndex property when data is loaded
2. When editing a cell in a sorted table:
   • The sorted row's visual index is used to retrieve the row object
   • The originalIndex is extracted from that row
   • The data array is updated using the originalIndex, ensuring the correct row is modified

Key implementation (lines 588-611):

// Get the original row index from the sorted row
const sortedRow = rows[index];
const originalIndex = sortedRow.original.originalIndex as number;

// Update using the original index, not the sorted index
const dataIndex = newValue.findIndex(item => item.originalIndex === originalIndex);

No changes were needed as the implementation already handles sorted tables correctly.

[modelorona]

@claude the spacing in the table is messed up:

this is what it should look like:

please fix it

[claude]

Claude finished @modelorona's task —— View job

---

Todo List:

• View screenshots to understand the spacing issue
• Read table.tsx to analyze current styling
• Fix the spacing issue
• Commit changes to PR branch

Summary

I've fixed the table spacing issue by increasing the row height from 31px to 48px in the FixedSizeList component. This provides proper vertical spacing for the table rows, matching the expected appearance shown in your second screenshot.

[jazzberry-ai]

Bug Report

Name	Severity	Example test case	Description
Incorrect CSV Export Formatting - Numbers not formatted, leading to potential data loss.	Medium	Create a table with numerical data (e.g., 1234.56). Export to CSV. Open the CSV and observe that the number is not formatted correctly (e.g., 1234.5).	The useExportToCSV hook in frontend/src/components/hooks.tsx directly extracts data from the rows array using row[col]. This approach doesn't account for any specific formatting applied to numerical data within the table component. As a result, when the data is converted to a CSV string, numbers are not formatted, potentially leading to data loss or misinterpretation when the CSV is opened in other applications. The exportData useMemo in frontend/src/components/table.tsx correctly retrieves and prepares the data, but formatting is lost when columns.map(col => row[col]).join(",") is called in useExportToCSV.

_{Comments? Email us.}