react-wasm-table
  • English

      • Column Features

      Demonstrates per-column ordering, visibility, sizing (+ drag resize), pinning, and filtering state APIs. Drag a header border to resize columns. See the Column Pinning demo for frozen column rendering.

      Column Order(drag-free reorder via buttons)
      id
      name
      department
      salary
      performanceScore
      Visibility(ID column has enableHiding: false)
      Sizing Override(change column widths via state)
      Pinning
      id
      name
      department
      salary
      performanceScore
      Per-column Filtering

      Grid API

      {
  "columnOrder": [
    "id",
    "name",
    "department",
    "salary",
    "performanceScore"
  ],
  "columnVisibility": {},
  "columnSizing": {},
  "columnPinning": {
    "left": [],
    "right": []
  },
  "columnFilters": []
}

      Code

      const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(["id", "name", ...]);
const [columnVisibility, setColumnVisibility] = useState<ColumnVisibilityState>({});
const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({ left: [], right: [] });

<Grid
  columnOrder={columnOrder}
  onColumnOrderChange={setColumnOrder}
  columnVisibility={columnVisibility}
  onColumnVisibilityChange={setColumnVisibility}
  columnSizing={columnSizing}
  onColumnSizingChange={setColumnSizing}  // also called on drag resize
  columnPinning={columnPinning}
  onColumnPinningChange={setColumnPinning}
/>

      Table API Code

      const table = useReactTable({
  data,
  columns: reorderColumnsBy(columnDefs, columnOrder),
  getCoreRowModel: getCoreRowModel(),
  state: { columnOrder, columnVisibility, columnSizing, columnPinning, columnFilters },
  onColumnOrderChange: setColumnOrder,
  onColumnVisibilityChange: setColumnVisibility,
  onColumnSizingChange: setColumnSizing,
  onColumnPinningChange: setColumnPinning,
  onColumnFiltersChange: setColumnFilters,
});

<Table
  table={table}
  width={600}
  height={500}
  columnOrder={columnOrder}
  onColumnOrderChange={setColumnOrder}
>
  <Thead>
    {table.getHeaderGroups().map((hg) => (
      <Tr key={hg.id}>
        {hg.headers.map((h) => (
          <Th key={h.id} colSpan={h.colSpan}>
            {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
          </Th>
        ))}
      </Tr>
    ))}
  </Thead>
  <Tbody>
    {table.getRowModel().rows.map((row) => (
      <Tr key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
        ))}
      </Tr>
    ))}
  </Tbody>
</Table>;