Virtualization

Rendering 10,000 rows kills the main thread. Virtualization renders only the visible viewport (+ a small buffer) and recycles DOM nodes as the user scrolls.

```tsx
import { FixedSizeList as List } from 'react-window';

function VirtualTable({ rows }: { rows: Row[] }) {
  const Row = ({ index, style }: { index: number; style: React.CSSProperties }) => (
    <div style={style}>
      <DataRow data={rows[index]} />
    </div>
  );
  return (
    <List
      height={600}
      itemCount={rows.length}
      itemSize={48}
      width="100%"
    >
      {Row}
    </List>
  );
}
```

**Rule**: virtualize any list/table with >100 rows. Use `react-window` or `@tanstack/react-virtual`.

Column resizing

Users need to adjust column widths to read truncated data. Implement with a resize handle on each column header that updates a width map in state.

```tsx
function ResizableHeader({ column, onResize }: { column: Column; onResize: (id: string, width: number) => void }) {
  const [resizing, setResizing] = useState(false);
  const startX = useRef(0);
  const startWidth = useRef(0);

  const onMouseDown = (e: React.MouseEvent) => {
    if (e.target !== e.currentTarget) return; // only the handle
    setResizing(true);
    startX.current = e.clientX;
    startWidth.current = column.width;
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
  };

  const onMouseMove = (e: MouseEvent) => {
    const delta = e.clientX - startX.current;
    onResize(column.id, Math.max(80, startWidth.current + delta));
  };

  const onMouseUp = () => {
    setResizing(false);
    window.removeEventListener('mousemove', onMouseMove);
    window.removeEventListener('mouseup', onMouseUp);
  };

  return (
    <th style={{ width: column.width }}>
      <span>{column.header}</span>
      <div className="resize-handle" onMouseDown={onMouseDown} />
    </th>
  );
}
```

Persist column widths in localStorage or URL params.

Inline editing

Click a cell → it becomes an input → blur/Enter saves, Escape cancels. Show a save indicator while the mutation is in flight.

```tsx
function EditableCell({ value, onSave, editing, setEditing }: EditableCellProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [localValue, setLocalValue] = useState(value);

  useEffect(() => {
    if (editing) inputRef.current?.focus();
  }, [editing]);

  const onBlur = () => {
    if (localValue !== value) onSave(localValue);
    setEditing(false);
  };

  if (!editing) return <td onDoubleClick={() => setEditing(true)}>{value}</td>;

  return (
    <td>
      <input
        ref={inputRef}
        value={localValue}
        onChange={e => setLocalValue(e.target.value)}
        onBlur={onBlur}
        onKeyDown={e => {
          if (e.key === 'Enter') onBlur();
          if (e.key === 'Escape') { setLocalValue(value); setEditing(false); }
        }}
      />
    </td>
  );
}
```

Sticky headers & first column

Long tables need sticky headers (scroll Y) and often a sticky first column (scroll X). Use `position: sticky` with `z-index` layering.

```css
.table-header th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface);
}
.table-body td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--color-paper);
}
```

**Rule**: header z-index > first-column z-index > body cells.

Density modes

Power users want dense tables (more rows visible); casual users want comfortable spacing. Offer a density toggle that changes row padding and font size.

| Density | Row height | Cell padding | Font size |
|---------|------------|--------------|-----------|
| Comfortable | 48px | 12px | 14px |
| Compact | 36px | 8px | 13px |

```tsx
function Table({ density = 'comfortable' }: TableProps) {
  const rowHeight = density === 'compact' ? 36 : 48;
  const padding = density === 'compact' ? 'var(--space-2)' : 'var(--space-3)';
  return (
    <table style={{ '--row-height': rowHeight + 'px', '--cell-padding': padding }}>
      ...
    </table>
  );
}
```

Data grid accessibility

A data grid is a composite widget — it needs full keyboard support and ARIA roles.

```tsx
<div role="grid" aria-label="User accounts">
  <div role="rowgroup">
    <div role="row">
      {columns.map(col => (
        <div role="columnheader" aria-sort={col.sort} tabIndex={-1}>
          {col.header}
        </div>
      ))}
    </div>
  </div>
  <div role="rowgroup">
    {rows.map(row => (
      <div role="row" aria-rowindex={row.index}>
        {columns.map(col => (
          <div role="gridcell" tabIndex={-1}>{row[col.id]}</div>
        ))}
      </div>
    ))}
  </div>
</div>
```

**Keyboard**: Arrow keys navigate cells; Enter/F2 edits; Escape cancels; Home/End jumps to first/last; Ctrl+Home/End jumps to first/last row.
**Screen reader**: announces row/column headers, sort state, selection count.