react-wasm-table
  • English

      • enableSelection

      Control cell selection at the Grid level or per-column level. Useful when columns contain custom inputs/buttons that shouldn't trigger selection.

      Grid API

      Selection state: none

      Grid-level off: Disables all selection (mouse, keyboard, rendering).

      Per-column off: Blocks selection starting from that column. Drags from other columns can still cross through it.

      Code

      <Grid
  data={data}
  columns={columns}
  enableSelection={true}
  selection={selection}
  onSelectionChange={setSelection}
/>;

// Per-column control
helper.accessor("salary", { enableSelection: false });

      Table API Code

      import {
  Table,
  useReactTable,
  flexRender,
  getCoreRowModel,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  type NormalizedRange,
} from "@ohah/react-wasm-table";

const [selection, setSelection] = useState<NormalizedRange | null>(null);

const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });

<Table
  table={table}
  width={800}
  height={480}
  enableSelection={gridEnabled}
  selection={selection}
  onSelectionChange={setSelection}
>
  <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>;