TableWalker

TableWalker는 열 프로파일링, 필터링 및 정렬 기능이 있는 인터랙티브 데이터 테이블을 렌더링합니다. 각 열에 대한 선택적 통계 요약과 함께 데이터의 테이블 뷰를 제공합니다.

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

Props

데이터 Props

Prop	타입	필수	설명
`data`	`Record<string, any>[]`	Yes*	클라이언트 측 모드의 데이터 레코드 배열.
`fields`	`IMutField[]`	Yes	각 열을 설명하는 필드 정의.
`computation`	`IComputationFunction`	Yes*	서버 측 연산 함수. `data`의 대안.

*data(클라이언트 측) 또는 computation(서버 측) 중 하나를 제공하세요.

테이블 구성

Prop	타입	기본값	설명
`pageSize`	`number`	`20`	페이지당 행 수.
`hideProfiling`	`boolean`	`false`	열 프로파일링(분포 바) 숨기기.
`hidePaginationAtOnepage`	`boolean`	`false`	모든 데이터가 한 페이지에 맞을 때 페이지네이션 컨트롤 숨기기.
`displayOffset`	`number`	`0`	행 번호 표시 오프셋.
`disableFilter`	`boolean`	`false`	열 필터링 비활성화.
`disableSorting`	`boolean`	`false`	열 정렬 비활성화.
`hideSemanticType`	`boolean`	`false`	열의 시맨틱 타입 표시기 숨기기.

외관 Props

Prop	타입	기본값	설명
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	다크 모드 설정.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	시각적 요소의 테마.
`uiTheme`	`IUIThemeConfig`	`undefined`	커스텀 UI 색상.

Ref Props

Prop	타입	설명
`tableFilterRef`	`React.Ref<{ getFilters: () => IVisFilter[] }>`	현재 필터 상태에 접근하기 위한 Ref.
`storeRef`	`React.RefObject<VizSpecStore>`	내부 시각화 스토어에 대한 Ref.
`onMetaChange`	`(fid: string, meta: Partial<IMutField>) => void`	필드 메타데이터 변경 시 콜백.

i18n Props

Prop	타입	설명
`i18nLang`	`string`	언어 코드.
`i18nResources`	`Record<string, Record<string, string>>`	커스텀 번역.

스타일링

Prop	타입	설명
`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}
      />
    </>
  );
}