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`	すべてのデータが1ページに収まる場合にページネーションコントロールを非表示。
`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`	フィールドメタデータ変更時のコールバック。

i18nプロパティ

プロパティ	型	説明
`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}
      />
    </>
  );
}

PureRenderer 型とインターフェース