@wts-data-table/react

Official React 18/19 wrapper for wts-data-table. React and React DOM are peer dependencies and are never bundled.

Installation

npm install wts-data-table @wts-data-table/react react react-dom

import { useMemo, useRef, useState } from 'react';
import {
  WtsDataTableReact,
  type WtsReactDataTableRenderers,
} from '@wts-data-table/react';
import type { DataTableState } from 'wts-data-table';
import { standardPreset } from 'wts-data-table/presets';
import 'wts-data-table/styles.css';

const options = useMemo(() => ({
  columnFilters: 'always',
  columns: [{ accessor: 'name', header: 'Name' }],
  features: standardPreset<Person>(),
  getRowId: (row: Person) => row.id,
}), []);
const renderers = useMemo<WtsReactDataTableRenderers<Person>>(() => ({
  columns: {
    name: {
      header: () => <strong>Person</strong>,
      cell: ({ value }) => <PersonLink name={String(value)} />,
      filter: ({ value, setValue }) => (
        <NameFilter value={value} onChange={setValue} />
      ),
      menu: () => <FavoritePeopleAction />,
    },
  },
  empty: () => <CreatePersonButton />,
  loading: () => <PeopleSkeleton />,
  footer: () => <PeopleTotals />,
}), []);
const [state, setState] = useState<DataTableState>();

<WtsDataTableReact
  data={people}
  options={options}
  ref={tableRef}
  renderers={renderers}
  state={state}
  onStateChange={setState}
/>;

Data changes call setData() without remounting. Changing the options object remounts the controller, so memoize stable options. The forwarded ref is the complete DataTable<T> controller and is cleared on unmount. Renderer roots are detached automatically whenever the table redraws.

Feature arrays and presets are passed directly to the full renderer. Import focused modules from wts-data-table/features/* to keep application imports explicit; no React registration layer is required.

Modular base renderer

WtsDataTableBaseReact has the same reactive data/options/ref lifecycle but instantiates wts-data-table/base, so only imported feature runtimes ship:

import { WtsDataTableBaseReact } from '@wts-data-table/react';
import { selectionFeature } from 'wts-data-table/features/selection';
import 'wts-data-table/base.css';

<WtsDataTableBaseReact
  data={people}
  options={{
    columns: [{ accessor: 'name', header: 'Name' }],
    features: [selectionFeature({ mode: 'multiple' })],
    getRowId: (row) => row.id,
  }}
  ref={baseTableRef}
/>;

The ref type is DataTableBase<T>. Native React surface renderers remain a capability of WtsDataTableReact; base features render framework-neutral DOM.