feat(data-table): @bytelyst/data-table@0.1.0 on TanStack Table v8 + Virtual
DataTable wrapper: sort, global filter, pagination, row selection + bulk action bar, column resize/pin/reorder, compact/comfortable density, and a virtualised mode for 10k+ rows (seeded initialRect for SSR/headless). Note: roadmap 9.C says 'TanStack Table v9' but no stable v9 exists yet; built on the current stable v8.21.3 + react-virtual 3.13. Verified: vitest 10/10; tsc --noEmit clean; tsc build emits dist; published @bytelyst/data-table@0.1.0 to local Gitea registry.
This commit is contained in:
saravanakumardb1
parent
6cd60e86e8
commit
a55ea16370
41
packages/data-table/package.json
Normal file
41
packages/data-table/package.json
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"name": "@bytelyst/data-table",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"description": "Headless-powered data table on TanStack Table + TanStack Virtual — sort, filter, paginate, select, resize, pin, reorder, virtualise. Token-themed.",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./dist/index.js",
|
||||||
|
"types": "./dist/index.d.ts"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"main": "./dist/index.js",
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"build": "tsc",
|
||||||
|
"test": "vitest run --pool forks",
|
||||||
|
"typecheck": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18.0.0",
|
||||||
|
"react-dom": ">=18.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tanstack/react-table": "^8.21.3",
|
||||||
|
"@tanstack/react-virtual": "^3.13.0",
|
||||||
|
"clsx": "^2.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/react": "^16.3.2",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"happy-dom": "^18.0.1",
|
||||||
|
"react": "^19.2.4",
|
||||||
|
"react-dom": "^19.2.4",
|
||||||
|
"typescript": "^5.7.3",
|
||||||
|
"vitest": "^4.0.18"
|
||||||
|
}
|
||||||
|
}
|
||||||
366
packages/data-table/src/DataTable.tsx
Normal file
366
packages/data-table/src/DataTable.tsx
Normal file
@ -0,0 +1,366 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { clsx } from 'clsx';
|
||||||
|
import {
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
useReactTable,
|
||||||
|
type Column,
|
||||||
|
type ColumnDef,
|
||||||
|
type ColumnOrderState,
|
||||||
|
type ColumnPinningState,
|
||||||
|
type Row,
|
||||||
|
type SortingState,
|
||||||
|
} from '@tanstack/react-table';
|
||||||
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
|
|
||||||
|
import type { DataTableProps } from './types.js';
|
||||||
|
|
||||||
|
const SELECT_COL_ID = '__select__';
|
||||||
|
|
||||||
|
const densityRowCls: Record<NonNullable<DataTableProps<unknown>['density']>, string> = {
|
||||||
|
compact: 'px-3 py-1 text-xs',
|
||||||
|
comfortable: 'px-4 py-2.5 text-sm',
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Sticky-left offsets for pinned columns. */
|
||||||
|
function pinnedStyle<T>(column: Column<T, unknown>): React.CSSProperties {
|
||||||
|
const isPinned = column.getIsPinned();
|
||||||
|
if (isPinned !== 'left') return {};
|
||||||
|
return {
|
||||||
|
position: 'sticky',
|
||||||
|
left: column.getStart('left'),
|
||||||
|
zIndex: 1,
|
||||||
|
background: 'var(--bl-surface-card, #fff)',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* `<DataTable>` — a token-themed table powered by TanStack Table v8 (the
|
||||||
|
* current stable; the roadmap's "v9" predates a stable v9 release) and
|
||||||
|
* TanStack Virtual. Opt into features via props; everything is keyboard- and
|
||||||
|
* screen-reader-friendly.
|
||||||
|
*/
|
||||||
|
export function DataTable<T>({
|
||||||
|
columns,
|
||||||
|
data,
|
||||||
|
enableSorting = true,
|
||||||
|
enableFilter = true,
|
||||||
|
filterPlaceholder = 'Filter…',
|
||||||
|
enablePagination = true,
|
||||||
|
pageSize = 10,
|
||||||
|
enableRowSelection = false,
|
||||||
|
renderBulkActions,
|
||||||
|
enableColumnResizing = false,
|
||||||
|
enableColumnReorder = false,
|
||||||
|
enableColumnPinning = false,
|
||||||
|
density = 'comfortable',
|
||||||
|
getRowId,
|
||||||
|
emptyState,
|
||||||
|
ariaLabel = 'Data table',
|
||||||
|
className,
|
||||||
|
virtualized = false,
|
||||||
|
rowHeight = 40,
|
||||||
|
maxBodyHeight = 480,
|
||||||
|
}: DataTableProps<T>) {
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||||
|
const [globalFilter, setGlobalFilter] = React.useState('');
|
||||||
|
const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>([]);
|
||||||
|
const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({});
|
||||||
|
const dragColRef = React.useRef<string | null>(null);
|
||||||
|
|
||||||
|
const resolvedColumns = React.useMemo<ColumnDef<T, unknown>[]>(() => {
|
||||||
|
if (!enableRowSelection) return columns;
|
||||||
|
const selectionColumn: ColumnDef<T, unknown> = {
|
||||||
|
id: SELECT_COL_ID,
|
||||||
|
size: 44,
|
||||||
|
enableSorting: false,
|
||||||
|
enableResizing: false,
|
||||||
|
header: ({ table }) => (
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
aria-label="Select all rows"
|
||||||
|
checked={table.getIsAllRowsSelected()}
|
||||||
|
ref={el => {
|
||||||
|
if (el) el.indeterminate = table.getIsSomeRowsSelected();
|
||||||
|
}}
|
||||||
|
onChange={table.getToggleAllRowsSelectedHandler()}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
aria-label={`Select row ${row.index + 1}`}
|
||||||
|
checked={row.getIsSelected()}
|
||||||
|
disabled={!row.getCanSelect()}
|
||||||
|
onChange={row.getToggleSelectedHandler()}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
return [selectionColumn, ...columns];
|
||||||
|
}, [columns, enableRowSelection]);
|
||||||
|
|
||||||
|
const table = useReactTable<T>({
|
||||||
|
data,
|
||||||
|
columns: resolvedColumns,
|
||||||
|
state: { sorting, globalFilter, columnOrder, columnPinning },
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onGlobalFilterChange: setGlobalFilter,
|
||||||
|
onColumnOrderChange: setColumnOrder,
|
||||||
|
onColumnPinningChange: setColumnPinning,
|
||||||
|
getRowId,
|
||||||
|
enableSorting,
|
||||||
|
enableRowSelection,
|
||||||
|
enableColumnResizing,
|
||||||
|
columnResizeMode: 'onChange',
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
|
||||||
|
getFilteredRowModel: enableFilter ? getFilteredRowModel() : undefined,
|
||||||
|
getPaginationRowModel: enablePagination && !virtualized ? getPaginationRowModel() : undefined,
|
||||||
|
initialState: { pagination: { pageSize } },
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = table.getRowModel().rows;
|
||||||
|
const selectedRows = table.getSelectedRowModel().rows.map((r: Row<T>) => r.original);
|
||||||
|
const rowCellCls = densityRowCls[density];
|
||||||
|
|
||||||
|
// ── Virtualiser (only when virtualized) ──
|
||||||
|
const scrollRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const virtualizer = useVirtualizer({
|
||||||
|
count: rows.length,
|
||||||
|
getScrollElement: () => scrollRef.current,
|
||||||
|
estimateSize: () => rowHeight,
|
||||||
|
overscan: 8,
|
||||||
|
enabled: virtualized,
|
||||||
|
// Seed the viewport so rows render before the scroll element is measured
|
||||||
|
// (SSR + headless environments report a zero-size rect otherwise).
|
||||||
|
initialRect: { width: 0, height: maxBodyHeight },
|
||||||
|
});
|
||||||
|
|
||||||
|
const onHeaderDragStart = (colId: string) => {
|
||||||
|
dragColRef.current = colId;
|
||||||
|
};
|
||||||
|
const onHeaderDrop = (targetId: string) => {
|
||||||
|
const source = dragColRef.current;
|
||||||
|
dragColRef.current = null;
|
||||||
|
if (!source || source === targetId) return;
|
||||||
|
const order = table.getAllLeafColumns().map(c => c.id);
|
||||||
|
const current = columnOrder.length ? columnOrder : order;
|
||||||
|
const from = current.indexOf(source);
|
||||||
|
const to = current.indexOf(targetId);
|
||||||
|
if (from === -1 || to === -1) return;
|
||||||
|
const next = [...current];
|
||||||
|
next.splice(to, 0, next.splice(from, 1)[0]!);
|
||||||
|
setColumnOrder(next);
|
||||||
|
};
|
||||||
|
|
||||||
|
function renderHeaderCell(
|
||||||
|
header: ReturnType<typeof table.getHeaderGroups>[number]['headers'][number]
|
||||||
|
) {
|
||||||
|
const column = header.column;
|
||||||
|
const canSort = enableSorting && column.getCanSort();
|
||||||
|
const sortDir = column.getIsSorted();
|
||||||
|
const isSelectCol = column.id === SELECT_COL_ID;
|
||||||
|
const reorderable = enableColumnReorder && !isSelectCol;
|
||||||
|
return (
|
||||||
|
<th
|
||||||
|
key={header.id}
|
||||||
|
scope="col"
|
||||||
|
aria-sort={sortDir === 'asc' ? 'ascending' : sortDir === 'desc' ? 'descending' : 'none'}
|
||||||
|
draggable={reorderable}
|
||||||
|
onDragStart={reorderable ? () => onHeaderDragStart(column.id) : undefined}
|
||||||
|
onDragOver={reorderable ? e => e.preventDefault() : undefined}
|
||||||
|
onDrop={reorderable ? () => onHeaderDrop(column.id) : undefined}
|
||||||
|
style={{
|
||||||
|
width: enableColumnResizing ? header.getSize() : undefined,
|
||||||
|
position: 'relative',
|
||||||
|
...pinnedStyle(column),
|
||||||
|
}}
|
||||||
|
className={clsx(
|
||||||
|
rowCellCls,
|
||||||
|
'border-b border-[var(--bl-border,rgba(0,0,0,0.12))] text-left font-semibold text-[var(--bl-text-secondary,#444)]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
{header.isPlaceholder ? null : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={!canSort}
|
||||||
|
onClick={canSort ? column.getToggleSortingHandler() : undefined}
|
||||||
|
className={clsx('inline-flex items-center gap-1', canSort && 'cursor-pointer')}
|
||||||
|
>
|
||||||
|
{flexRender(column.columnDef.header, header.getContext())}
|
||||||
|
{sortDir === 'asc' && <span aria-hidden="true">▲</span>}
|
||||||
|
{sortDir === 'desc' && <span aria-hidden="true">▼</span>}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{enableColumnPinning && !isSelectCol && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label={
|
||||||
|
column.getIsPinned() === 'left' ? `Unpin ${column.id}` : `Pin ${column.id} left`
|
||||||
|
}
|
||||||
|
aria-pressed={column.getIsPinned() === 'left'}
|
||||||
|
onClick={() => column.pin(column.getIsPinned() === 'left' ? false : 'left')}
|
||||||
|
className="text-[var(--bl-text-tertiary,#999)]"
|
||||||
|
>
|
||||||
|
{column.getIsPinned() === 'left' ? '📌' : '📍'}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
{enableColumnResizing && column.getCanResize() && (
|
||||||
|
<span
|
||||||
|
role="separator"
|
||||||
|
aria-orientation="vertical"
|
||||||
|
aria-label={`Resize ${column.id}`}
|
||||||
|
onMouseDown={header.getResizeHandler()}
|
||||||
|
onTouchStart={header.getResizeHandler()}
|
||||||
|
className="absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none bg-[var(--bl-border,rgba(0,0,0,0.12))] opacity-0 hover:opacity-100"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const colCount = table.getAllLeafColumns().length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={clsx('flex flex-col gap-2', className)} data-testid="bl-data-table">
|
||||||
|
{enableFilter && (
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
role="searchbox"
|
||||||
|
aria-label={filterPlaceholder}
|
||||||
|
value={globalFilter}
|
||||||
|
onChange={e => setGlobalFilter(e.target.value)}
|
||||||
|
placeholder={filterPlaceholder}
|
||||||
|
className="h-9 w-full max-w-xs rounded-lg border border-[var(--bl-border,rgba(0,0,0,0.12))] bg-[var(--bl-surface-card,#fff)] px-3 text-sm outline-none focus-visible:border-[var(--bl-accent,#6366f1)]"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{enableRowSelection && selectedRows.length > 0 && (
|
||||||
|
<div
|
||||||
|
data-testid="bl-bulk-actions"
|
||||||
|
className="flex items-center gap-3 rounded-lg bg-[var(--bl-accent-muted,rgba(99,102,241,0.12))] px-3 py-2 text-sm"
|
||||||
|
>
|
||||||
|
<span>{selectedRows.length} selected</span>
|
||||||
|
{renderBulkActions?.(selectedRows, () => table.resetRowSelection())}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={scrollRef}
|
||||||
|
style={virtualized ? { maxHeight: maxBodyHeight, overflow: 'auto' } : undefined}
|
||||||
|
className="rounded-xl border border-[var(--bl-border-subtle,rgba(0,0,0,0.06))]"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
role="table"
|
||||||
|
className="w-full border-collapse"
|
||||||
|
style={{ width: enableColumnResizing ? table.getTotalSize() : '100%' }}
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map(hg => (
|
||||||
|
<tr key={hg.id}>{hg.headers.map(h => renderHeaderCell(h))}</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
<tbody
|
||||||
|
style={
|
||||||
|
virtualized
|
||||||
|
? { display: 'block', height: virtualizer.getTotalSize(), position: 'relative' }
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{rows.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colSpan={colCount}
|
||||||
|
className={clsx(rowCellCls, 'text-center text-[var(--bl-text-tertiary,#999)]')}
|
||||||
|
>
|
||||||
|
{emptyState ?? 'No rows.'}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : virtualized ? (
|
||||||
|
virtualizer.getVirtualItems().map(vi => {
|
||||||
|
const row = rows[vi.index]!;
|
||||||
|
return (
|
||||||
|
<tr
|
||||||
|
key={row.id}
|
||||||
|
data-index={vi.index}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: rowHeight,
|
||||||
|
transform: `translateY(${vi.start}px)`,
|
||||||
|
display: 'flex',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id} className={clsx(rowCellCls, 'flex-1')}>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
rows.map(row => (
|
||||||
|
<tr
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() ? 'selected' : undefined}
|
||||||
|
className={clsx(
|
||||||
|
'border-b border-[var(--bl-border-subtle,rgba(0,0,0,0.06))] last:border-0',
|
||||||
|
row.getIsSelected() && 'bg-[var(--bl-accent-muted,rgba(99,102,241,0.10))]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td
|
||||||
|
key={cell.id}
|
||||||
|
style={{
|
||||||
|
width: enableColumnResizing ? cell.column.getSize() : undefined,
|
||||||
|
...pinnedStyle(cell.column),
|
||||||
|
}}
|
||||||
|
className={rowCellCls}
|
||||||
|
>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{enablePagination && !virtualized && rows.length > 0 && (
|
||||||
|
<div className="flex items-center justify-between text-sm text-[var(--bl-text-secondary,#444)]">
|
||||||
|
<span>
|
||||||
|
Page {table.getState().pagination.pageIndex + 1} of {Math.max(1, table.getPageCount())}
|
||||||
|
</span>
|
||||||
|
<span className="flex gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => table.previousPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
className="rounded-md border border-[var(--bl-border,rgba(0,0,0,0.12))] px-2 py-1 disabled:opacity-40"
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => table.nextPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
className="rounded-md border border-[var(--bl-border,rgba(0,0,0,0.12))] px-2 py-1 disabled:opacity-40"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
222
packages/data-table/src/__tests__/data-table.test.tsx
Normal file
222
packages/data-table/src/__tests__/data-table.test.tsx
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||||
|
import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { DataTable } from '../DataTable.js';
|
||||||
|
import type { ColumnDef } from '@tanstack/react-table';
|
||||||
|
|
||||||
|
interface Person {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
age: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DATA: Person[] = [
|
||||||
|
{ id: '1', name: 'Ada', age: 36 },
|
||||||
|
{ id: '2', name: 'Bob', age: 28 },
|
||||||
|
{ id: '3', name: 'Cleo', age: 41 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const COLUMNS: ColumnDef<Person, unknown>[] = [
|
||||||
|
{ id: 'name', accessorKey: 'name', header: 'Name' },
|
||||||
|
{ id: 'age', accessorKey: 'age', header: 'Age' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const getRowId = (row: Person) => row.id;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — rendering', () => {
|
||||||
|
it('renders one row per datum plus a header row', () => {
|
||||||
|
render(<DataTable columns={COLUMNS} data={DATA} getRowId={getRowId} enableFilter={false} />);
|
||||||
|
expect(screen.getByRole('table')).toBeTruthy();
|
||||||
|
expect(screen.getByText('Ada')).toBeTruthy();
|
||||||
|
expect(screen.getByText('Cleo')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the empty state when there are no rows', () => {
|
||||||
|
render(<DataTable columns={COLUMNS} data={[]} getRowId={getRowId} emptyState="Nothing here" />);
|
||||||
|
expect(screen.getByText('Nothing here')).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('applies compact density padding classes', () => {
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={DATA}
|
||||||
|
getRowId={getRowId}
|
||||||
|
density="compact"
|
||||||
|
enableFilter={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
const cell = screen.getByText('Ada');
|
||||||
|
expect(cell.closest('td')?.className).toContain('text-xs');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — sorting', () => {
|
||||||
|
it('sorts rows when a header is clicked and sets aria-sort', () => {
|
||||||
|
render(<DataTable columns={COLUMNS} data={DATA} getRowId={getRowId} enableFilter={false} />);
|
||||||
|
const ageHeaderBtn = screen.getByRole('button', { name: 'Age' });
|
||||||
|
fireEvent.click(ageHeaderBtn);
|
||||||
|
const headerCell = ageHeaderBtn.closest('th')!;
|
||||||
|
// TanStack sorts numeric columns descending-first by default.
|
||||||
|
expect(headerCell.getAttribute('aria-sort')).toBe('descending');
|
||||||
|
|
||||||
|
const bodyRows = screen.getAllByRole('row').slice(1); // drop header
|
||||||
|
const firstDataCells = within(bodyRows[0]!).getAllByRole('cell');
|
||||||
|
expect(firstDataCells[0]!.textContent).toBe('Cleo'); // oldest first (age 41)
|
||||||
|
|
||||||
|
// A second click flips to ascending.
|
||||||
|
fireEvent.click(ageHeaderBtn);
|
||||||
|
expect(headerCell.getAttribute('aria-sort')).toBe('ascending');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — global filter', () => {
|
||||||
|
it('narrows rows by the global filter input', () => {
|
||||||
|
render(<DataTable columns={COLUMNS} data={DATA} getRowId={getRowId} />);
|
||||||
|
fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'cle' } });
|
||||||
|
expect(screen.getByText('Cleo')).toBeTruthy();
|
||||||
|
expect(screen.queryByText('Ada')).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — pagination', () => {
|
||||||
|
const many: Person[] = Array.from({ length: 25 }, (_, i) => ({
|
||||||
|
id: String(i),
|
||||||
|
name: `P${i}`,
|
||||||
|
age: 20 + i,
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('paginates and advances pages', () => {
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={many}
|
||||||
|
getRowId={getRowId}
|
||||||
|
pageSize={10}
|
||||||
|
enableFilter={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(screen.getByText('P0')).toBeTruthy();
|
||||||
|
expect(screen.queryByText('P10')).toBeNull();
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
||||||
|
expect(screen.getByText('P10')).toBeTruthy();
|
||||||
|
expect(screen.queryByText('P0')).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — row selection + bulk actions', () => {
|
||||||
|
it('selects rows and renders a bulk-action bar', () => {
|
||||||
|
const onBulk = vi.fn();
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={DATA}
|
||||||
|
getRowId={getRowId}
|
||||||
|
enableRowSelection
|
||||||
|
enableFilter={false}
|
||||||
|
renderBulkActions={(selected, clear) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
onBulk(selected.length);
|
||||||
|
clear();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
expect(screen.queryByTestId('bl-bulk-actions')).toBeNull();
|
||||||
|
fireEvent.click(screen.getByLabelText('Select row 1'));
|
||||||
|
const bar = screen.getByTestId('bl-bulk-actions');
|
||||||
|
expect(within(bar).getByText('1 selected')).toBeTruthy();
|
||||||
|
fireEvent.click(within(bar).getByText('Delete'));
|
||||||
|
expect(onBulk).toHaveBeenCalledWith(1);
|
||||||
|
expect(screen.queryByTestId('bl-bulk-actions')).toBeNull(); // cleared
|
||||||
|
});
|
||||||
|
|
||||||
|
it('select-all toggles every row', () => {
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={DATA}
|
||||||
|
getRowId={getRowId}
|
||||||
|
enableRowSelection
|
||||||
|
enableFilter={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
fireEvent.click(screen.getByLabelText('Select all rows'));
|
||||||
|
expect(within(screen.getByTestId('bl-bulk-actions')).getByText('3 selected')).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — column pinning', () => {
|
||||||
|
it('pins a column to the left via the header toggle', () => {
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={DATA}
|
||||||
|
getRowId={getRowId}
|
||||||
|
enableColumnPinning
|
||||||
|
enableFilter={false}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
const pinBtn = screen.getByRole('button', { name: 'Pin name left' });
|
||||||
|
fireEvent.click(pinBtn);
|
||||||
|
expect(screen.getByRole('button', { name: 'Unpin name' })).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DataTable — virtualised', () => {
|
||||||
|
it('renders far fewer than 10k DOM rows', () => {
|
||||||
|
// happy-dom performs no layout, so give the scroll container a measured
|
||||||
|
// size + a ResizeObserver so TanStack Virtual can compute visible rows.
|
||||||
|
class RO {
|
||||||
|
observe() {}
|
||||||
|
unobserve() {}
|
||||||
|
disconnect() {}
|
||||||
|
}
|
||||||
|
vi.stubGlobal('ResizeObserver', RO);
|
||||||
|
vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({
|
||||||
|
width: 600,
|
||||||
|
height: 400,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 600,
|
||||||
|
bottom: 400,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
toJSON() {},
|
||||||
|
} as DOMRect);
|
||||||
|
|
||||||
|
const big: Person[] = Array.from({ length: 10000 }, (_, i) => ({
|
||||||
|
id: String(i),
|
||||||
|
name: `Row ${i}`,
|
||||||
|
age: i,
|
||||||
|
}));
|
||||||
|
render(
|
||||||
|
<DataTable
|
||||||
|
columns={COLUMNS}
|
||||||
|
data={big}
|
||||||
|
getRowId={getRowId}
|
||||||
|
virtualized
|
||||||
|
enableFilter={false}
|
||||||
|
maxBodyHeight={400}
|
||||||
|
rowHeight={40}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
// Virtualisation engaged: the body reserves a full-height spacer
|
||||||
|
// (10000 × 40px) instead of laying out every row.
|
||||||
|
const tbody = document.querySelector('tbody') as HTMLElement;
|
||||||
|
expect(tbody.style.height).toBe(`${10000 * 40}px`);
|
||||||
|
// And the DOM holds far fewer than 10k rows.
|
||||||
|
const bodyRows = document.querySelectorAll('tbody tr[data-index]');
|
||||||
|
expect(bodyRows.length).toBeLessThan(200);
|
||||||
|
});
|
||||||
|
});
|
||||||
14
packages/data-table/src/index.ts
Normal file
14
packages/data-table/src/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* @bytelyst/data-table — headless-powered table on TanStack Table v8 +
|
||||||
|
* TanStack Virtual.
|
||||||
|
*
|
||||||
|
* Exports (0.1.0 — Wave 9.C):
|
||||||
|
* <DataTable> sort · filter · paginate · select · resize · pin · reorder ·
|
||||||
|
* density · virtualise (10k rows)
|
||||||
|
*
|
||||||
|
* Re-exports the TanStack column helpers consumers need so they don't have to
|
||||||
|
* add a direct dependency for the common case.
|
||||||
|
*/
|
||||||
|
export { DataTable } from './DataTable.js';
|
||||||
|
export type { DataTableProps, DataTableDensity } from './types.js';
|
||||||
|
export { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
|
||||||
53
packages/data-table/src/types.ts
Normal file
53
packages/data-table/src/types.ts
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import type { ColumnDef } from '@tanstack/react-table';
|
||||||
|
import type * as React from 'react';
|
||||||
|
|
||||||
|
/** Row density — drives vertical padding + font size. */
|
||||||
|
export type DataTableDensity = 'compact' | 'comfortable';
|
||||||
|
|
||||||
|
export interface DataTableProps<T> {
|
||||||
|
/** TanStack column definitions. Use an `id` on each for reorder/pin to work. */
|
||||||
|
columns: ColumnDef<T, unknown>[];
|
||||||
|
/** Row data. */
|
||||||
|
data: T[];
|
||||||
|
|
||||||
|
// ── Behaviour toggles ──
|
||||||
|
/** Click a header to sort (default true). */
|
||||||
|
enableSorting?: boolean;
|
||||||
|
/** Show a global filter input above the table (default true). */
|
||||||
|
enableFilter?: boolean;
|
||||||
|
/** Placeholder for the global filter input. */
|
||||||
|
filterPlaceholder?: string;
|
||||||
|
/** Paginate the rows (default true). Ignored when `virtualized`. */
|
||||||
|
enablePagination?: boolean;
|
||||||
|
/** Rows per page (default 10). */
|
||||||
|
pageSize?: number;
|
||||||
|
/** Add a selection checkbox column + expose selection (default false). */
|
||||||
|
enableRowSelection?: boolean;
|
||||||
|
/** Render a bulk-action bar when ≥1 row is selected. */
|
||||||
|
renderBulkActions?: (selectedRows: T[], clearSelection: () => void) => React.ReactNode;
|
||||||
|
/** Allow drag-resizing of column widths (default false). */
|
||||||
|
enableColumnResizing?: boolean;
|
||||||
|
/** Allow drag-reordering of columns by their header (default false). */
|
||||||
|
enableColumnReorder?: boolean;
|
||||||
|
/** Show a pin toggle in each header to pin a column to the left (default false). */
|
||||||
|
enableColumnPinning?: boolean;
|
||||||
|
|
||||||
|
// ── Presentation ──
|
||||||
|
/** Row density (default 'comfortable'). */
|
||||||
|
density?: DataTableDensity;
|
||||||
|
/** Stable row id resolver — required for predictable selection. */
|
||||||
|
getRowId?: (row: T, index: number) => string;
|
||||||
|
/** Rendered when `data` is empty. */
|
||||||
|
emptyState?: React.ReactNode;
|
||||||
|
/** Accessible label for the table element. */
|
||||||
|
ariaLabel?: string;
|
||||||
|
className?: string;
|
||||||
|
|
||||||
|
// ── Virtualisation (9.C.5/9.C.8) ──
|
||||||
|
/** Virtualise rows for large datasets. Disables built-in pagination. */
|
||||||
|
virtualized?: boolean;
|
||||||
|
/** Fixed row height in px when virtualising (default 40). */
|
||||||
|
rowHeight?: number;
|
||||||
|
/** Scroll container height in px when virtualising (default 480). */
|
||||||
|
maxBodyHeight?: number;
|
||||||
|
}
|
||||||
11
packages/data-table/tsconfig.json
Normal file
11
packages/data-table/tsconfig.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"extends": "../../tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "dist",
|
||||||
|
"rootDir": "src",
|
||||||
|
"lib": ["ES2022", "DOM"],
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
|
||||||
|
}
|
||||||
2
packages/data-table/vitest.config.ts
Normal file
2
packages/data-table/vitest.config.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import { defineConfig } from 'vitest/config';
|
||||||
|
export default defineConfig({ test: { environment: 'happy-dom', pool: 'forks' } });
|
||||||
11762
pnpm-lock.yaml
generated
11762
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user