Data table

Web uniquement — React, depuis @krizaka/ui/data-table. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Orochia, Orazaka, krizaka.com.

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { DataTable, DataTableFilters, DataTableColumnsMenu, DataTableExport, useDataTable } from "@krizaka/ui/data-table";

Exemples

Props

Accessibilité

• A table with a caption (hidden unless showCaption) and scope="col" headers; the roles are written out, so the cards keep the table's semantics.
• The sorted column carries aria-sort; a sortable header is a button that says its state with aria-pressed.
• An expand button (a row's details, a group, a tree) says its state with aria-expanded and names the row; a group's button says its value and its count.
• A resize handle is a focusable separator named after its column, with its width as aria-valuenow.
• The filters' bar is a named group; the count of results is announced politely when it changes; each filter in force is a chip with a remove button.
• While loading the table is aria-busy and its caption says so; an error is announced (role="alert").
• Windowed rows carry aria-rowindex and the table aria-rowcount: a screen reader knows where it is in the whole list; the scrolling body is a focusable region.

Clavier

Bonnes pratiques

• Keep rows and columns stable (module scope, state, a query's data, useMemo): a new array at each render recomputes every model.
• Give every column a header (it labels the value in a card and names its filter) and the row's name a card: "title" column.
• Put DataTableFilters in toolbar; mark the columns it filters with filter: "text" | "facet" | "range", and give a server table's facets their options.
• Server mode: keep the DataTableQuery from onStateChange in state (or the address), put it in the query key, and pass rowCount — placeholderData: keepPreviousData keeps the page while the next one loads.
• Say what failed in error with a way to retry; say what to do next in empty (an EmptyState with an action).
• Align amounts and counts to the end (align: "end") in tabular numbers; pin the name column of a wide table.
• Need something the props do not cover? useDataTable() gives the TanStack instance — never import @tanstack/* in a product.

Composants liés

• Filter barThe bar above a list: the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.
• PaginationMoves through a long list page by page: numbers with ellipses that fold into “Page 3 of 12” on a phone, or previous / next on a cursor.
• VirtualLong lists and galleries rendered by what is in view, on TanStack Virtual: a list in its own region or the page's, a grid that fits the width, measured items, the end announced for infinite loading.
• CheckboxA box to check: checked, unchecked or indeterminate, with its words as one clickable label.
• Empty stateWhat a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.

Générée depuis le code de @krizaka/ui 3.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub