The DataTable component (src/components/data-table.tsx) uses a virtualized rendering mode when virtualized=true and rows exceed 100 entries. In virtualized mode, columns are assigned equal percentage widths but when the density prop is changed, the padding changes but the fixed-percentage column widths do not account for altered content sizes. This causes header and body column misalignment.
Root cause: Line 318-324 in src/components/data-table.tsx - Equal percentage width ignores content width per density.
Why this is architecturally hard
- Virtualized table uses absolute positioning with sticky header - width mismatch is immediately visible
- TanStack Table's column sizing API is not integrated with the custom density system
table-layout: fixed enforces equal widths but doesn't account for padding differences
Acceptance criteria
Getting started
Files: src/components/data-table.tsx
Commands: npm run dev, npm run test
The
DataTablecomponent (src/components/data-table.tsx) uses a virtualized rendering mode whenvirtualized=trueand rows exceed 100 entries. In virtualized mode, columns are assigned equal percentage widths but when thedensityprop is changed, the padding changes but the fixed-percentage column widths do not account for altered content sizes. This causes header and body column misalignment.Root cause: Line 318-324 in src/components/data-table.tsx - Equal percentage width ignores content width per density.
Why this is architecturally hard
table-layout: fixedenforces equal widths but doesn't account for padding differencesAcceptance criteria
Getting started
Files:
src/components/data-table.tsxCommands:
npm run dev,npm run test