TableWalker

TableWalker rendert eine interaktive Datentabelle mit Spalten-Profiling, Filterung und Sortierung. Es bietet eine tabellarische Ansicht Ihrer Daten mit optionalen statistischen Zusammenfassungen fuer jede Spalte.

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

Props

Daten-Props

Prop	Typ	Erforderlich	Beschreibung
`data`	`Record<string, any>[]`	Ja*	Array von Datensaetzen fuer den clientseitigen Modus.
`fields`	`IMutField[]`	Ja	Felddefinitionen, die jede Spalte beschreiben.
`computation`	`IComputationFunction`	Ja*	Serverseitige Berechnungsfunktion. Alternative zu `data`.

*Geben Sie entweder data (clientseitig) oder computation (serverseitig) an.

Tabellenkonfiguration

Prop	Typ	Standard	Beschreibung
`pageSize`	`number`	`20`	Anzahl der Zeilen pro Seite.
`hideProfiling`	`boolean`	`false`	Spalten-Profiling (Verteilungsbalken) ausblenden.
`hidePaginationAtOnepage`	`boolean`	`false`	Seitennummerierung ausblenden, wenn alle Daten auf eine Seite passen.
`displayOffset`	`number`	`0`	Offset fuer die Zeilennummerierungsanzeige.
`disableFilter`	`boolean`	`false`	Spaltenfilterung deaktivieren.
`disableSorting`	`boolean`	`false`	Spaltensortierung deaktivieren.
`hideSemanticType`	`boolean`	`false`	Semantische Typindikatoren bei Spalten ausblenden.

Erscheinungsbild-Props

Prop	Typ	Standard	Beschreibung
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	Dark-Mode-Einstellung.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	Theme fuer visuelle Elemente.
`uiTheme`	`IUIThemeConfig`	`undefined`	Benutzerdefinierte UI-Farben.

Ref-Props

Prop	Typ	Beschreibung
`tableFilterRef`	`React.Ref<{ getFilters: () => IVisFilter[] }>`	Ref zum Zugriff auf den aktuellen Filterzustand.
`storeRef`	`React.RefObject<VizSpecStore>`	Ref zum internen Visualisierungsspeicher.
`onMetaChange`	`(fid: string, meta: Partial<IMutField>) => void`	Callback bei Aenderungen der Feldmetadaten.

i18n-Props

Prop	Typ	Beschreibung
`i18nLang`	`string`	Sprachcode.
`i18nResources`	`Record<string, Record<string, string>>`	Benutzerdefinierte Uebersetzungen.

Styling

Prop	Typ	Beschreibung
`className`	`string`	CSS-Klasse fuer das Wurzelelement.
`style`	`React.CSSProperties`	Inline-Styles. Standard ist `{ width: '100%', height: '100%' }`.

Beispiele

Einfache Tabelle

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

Schreibgeschuetzte Tabelle

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

Auf Filter zugreifen

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 Typen & Schnittstellen