TableWalker

TableWalker 渲染一个交互式数据表格，支持列分析、筛选和排序功能。它提供数据的表格视图，并可选择为每列显示统计摘要。

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

属性

数据属性

属性	类型	必填	说明
`data`	`Record<string, any>[]`	是*	客户端模式的数据记录数组。
`fields`	`IMutField[]`	是	字段定义，描述每一列。
`computation`	`IComputationFunction`	是*	服务端计算函数。作为 `data` 的替代方案。

*提供 data（客户端）或 computation（服务端）其中之一。

表格配置

属性	类型	默认值	说明
`pageSize`	`number`	`20`	每页显示的行数。
`hideProfiling`	`boolean`	`false`	隐藏列分析（分布条形图）。
`hidePaginationAtOnepage`	`boolean`	`false`	当所有数据可在一页内显示时隐藏分页控件。
`displayOffset`	`number`	`0`	行号显示的偏移量。
`disableFilter`	`boolean`	`false`	禁用列筛选。
`disableSorting`	`boolean`	`false`	禁用列排序。
`hideSemanticType`	`boolean`	`false`	隐藏列上的语义类型指示器。

外观属性

属性	类型	默认值	说明
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	暗色模式设置。
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	视觉元素的主题。
`uiTheme`	`IUIThemeConfig`	`undefined`	自定义 UI 颜色。

Ref 属性

属性	类型	说明
`tableFilterRef`	`React.Ref<{ getFilters: () => IVisFilter[] }>`	用于访问当前筛选状态的 Ref。
`storeRef`	`React.RefObject<VizSpecStore>`	内部可视化存储的 Ref。
`onMetaChange`	`(fid: string, meta: Partial<IMutField>) => void`	字段元数据变更时的回调。

国际化属性

属性	类型	说明
`i18nLang`	`string`	语言代码。
`i18nResources`	`Record<string, Record<string, string>>`	自定义翻译。

样式

属性	类型	说明
`className`	`string`	根元素的 CSS 类名。
`style`	`React.CSSProperties`	内联样式。默认为 `{ width: '100%', height: '100%' }`。

示例

基础表格

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

只读表格

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

访问筛选器

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}
      />
    </>
  );
}