TableWalker

TableWalker renders an interactive data table with column profiling, filtering, and sorting. It provides a tabular view of your data with optional statistical summaries for each column.

import { TableWalker } from '@kanaries/graphic-walker';

Props

Data Props

Prop	Type	Required	Description
`data`	`Record<string, any>[]`	Yes*	Array of data records for client-side mode.
`fields`	`IMutField[]`	Yes	Field definitions describing each column.
`computation`	`IComputationFunction`	Yes*	Server-side computation function. Alternative to `data`.

*Provide either data (client-side) or computation (server-side).

Table Configuration

Prop	Type	Default	Description
`pageSize`	`number`	`20`	Number of rows per page.
`hideProfiling`	`boolean`	`false`	Hide column profiling (distribution bars).
`hidePaginationAtOnepage`	`boolean`	`false`	Hide pagination controls when all data fits on one page.
`displayOffset`	`number`	`0`	Offset for row numbering display.
`disableFilter`	`boolean`	`false`	Disable column filtering.
`disableSorting`	`boolean`	`false`	Disable column sorting.
`hideSemanticType`	`boolean`	`false`	Hide semantic type indicators on columns.

Appearance Props

Prop	Type	Default	Description
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	Dark mode setting.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	Theme for visual elements.
`uiTheme`	`IUIThemeConfig`	`undefined`	Custom UI colors.

Ref Props

Prop	Type	Description
`tableFilterRef`	`React.Ref<{ getFilters: () => IVisFilter[] }>`	Ref to access current filter state.
`storeRef`	`React.RefObject<VizSpecStore>`	Ref to internal visualization store.
`onMetaChange`	`(fid: string, meta: Partial<IMutField>) => void`	Callback when field metadata changes.

i18n Props

Prop	Type	Description
`i18nLang`	`string`	Language code.
`i18nResources`	`Record<string, Record<string, string>>`	Custom translations.

Styling

Prop	Type	Description
`className`	`string`	CSS class for root element.
`style`	`React.CSSProperties`	Inline styles. Defaults to `{ width: '100%', height: '100%' }`.

Examples

Basic Table

import { TableWalker } from '@kanaries/graphic-walker';
 
function DataTable({ data, fields }) {
  return (
    <div style={{ height: '600px' }}>
      <TableWalker data={data} fields={fields} />
    </div>
  );
}

Read-Only Table

<TableWalker
  data={data}
  fields={fields}
  disableFilter
  disableSorting
  hideProfiling
  pageSize={50}
/>

Accessing Filters

import { useRef } from 'react';
 
function FilteredTable({ data, fields }) {
  const filterRef = useRef(null);
 
  const handleGetFilters = () => {
    if (filterRef.current) {
      const filters = filterRef.current.getFilters();
      console.log('Active filters:', filters);
    }
  };
 
  return (
    <>
      <button onClick={handleGetFilters}>Get Filters</button>
      <TableWalker
        data={data}
        fields={fields}
        tableFilterRef={filterRef}
      />
    </>
  );
}

PureRenderer Types & Interfaces