TableWalker

TableWalker affiche un tableau de données interactif avec profilage de colonnes, filtrage et tri. Il fournit une vue tabulaire de vos données avec des résumés statistiques optionnels pour chaque colonne.

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

Props

Props de données

Prop	Type	Requis	Description
`data`	`Record<string, any>[]`	Oui*	Tableau d'enregistrements de données pour le mode côté client.
`fields`	`IMutField[]`	Oui	Définitions de champs décrivant chaque colonne.
`computation`	`IComputationFunction`	Oui*	Fonction de calcul côté serveur. Alternative à `data`.

*Fournissez soit data (côté client) soit computation (côté serveur).

Configuration du tableau

Prop	Type	Par défaut	Description
`pageSize`	`number`	`20`	Nombre de lignes par page.
`hideProfiling`	`boolean`	`false`	Masque le profilage de colonnes (barres de distribution).
`hidePaginationAtOnepage`	`boolean`	`false`	Masque les contrôles de pagination lorsque toutes les données tiennent sur une page.
`displayOffset`	`number`	`0`	Décalage pour la numérotation des lignes affichées.
`disableFilter`	`boolean`	`false`	Désactive le filtrage de colonnes.
`disableSorting`	`boolean`	`false`	Désactive le tri de colonnes.
`hideSemanticType`	`boolean`	`false`	Masque les indicateurs de type sémantique sur les colonnes.

Props d'apparence

Prop	Type	Par défaut	Description
`appearance`	`'media' \| 'light' \| 'dark'`	`'media'`	Réglage du mode sombre.
`vizThemeConfig`	`IThemeKey \| GWGlobalConfig`	`undefined`	Thème pour les éléments visuels.
`uiTheme`	`IUIThemeConfig`	`undefined`	Couleurs d'interface personnalisées.

Props Ref

Prop	Type	Description
`tableFilterRef`	`React.Ref<{ getFilters: () => IVisFilter[] }>`	Ref pour accéder à l'état des filtres actuels.
`storeRef`	`React.RefObject<VizSpecStore>`	Ref vers le store de visualisation interne.
`onMetaChange`	`(fid: string, meta: Partial<IMutField>) => void`	Callback lorsque les métadonnées d'un champ changent.

Props i18n

Prop	Type	Description
`i18nLang`	`string`	Code de langue.
`i18nResources`	`Record<string, Record<string, string>>`	Traductions personnalisées.

Styles

Prop	Type	Description
`className`	`string`	Classe CSS pour l'élément racine.
`style`	`React.CSSProperties`	Styles en ligne. Par défaut `{ width: '100%', height: '100%' }`.

Exemples

Tableau de base

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

Tableau en lecture seule

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

Accès aux filtres

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