Table

Table affiche des definitions de colonnes typees et des lignes avec palettes, variantes visuelles, selection, bandes personnalisees, contenu fixe et pagination.

Éditeur en direct

function TableExample() {
  const [scheme, setScheme] = React.useState("primary");
  const columns = [
    { key: "order", title: "Order", dataIndex: "order" },
    { key: "customer", title: "Customer", dataIndex: "customer" },
    {
      key: "status",
      title: "Status",
      dataIndex: "status",
      render: (value) => <Badge variant="success">{value}</Badge>,
    },
    { key: "total", title: "Total", dataIndex: "total", cellClassName: "font-semibold text-accent" },
  ];
  const data = [
    { id: "1001", order: "#1001", customer: "Maya Chen", status: "Paid", total: "MUR 12,400" },
    { id: "1002", order: "#1002", customer: "Noah Patel", status: "Packed", total: "MUR 8,250" },
    { id: "1003", order: "#1003", customer: "Ava Morel", status: "Pending", total: "MUR 3,980" },
  ];

  return (
    <div className="grid w-full gap-4">
      <div className="flex flex-wrap gap-2">
        {["primary", "secondary", "accent", "tertiary"].map((color) => (
          <Button key={color} size="sm" variant={color} onClick={() => setScheme(color)}>
            {color}
          </Button>
        ))}
      </div>
      <Table
        columns={columns}
        data={data}
        colorScheme={scheme}
        variant="striped"
        hover
        selectable
        highlightRowBorder
      />
    </div>
  );
}

Résultat

Loading...

import { Table } from "niom-parts";
import type { ColumnProps, RowData } from "niom-parts";

const columns: ColumnProps[] = [
  { key: "name", title: "Name", dataIndex: "name" },
  { key: "status", title: "Status", dataIndex: "status" },
];

const data: RowData[] = [
  { id: 1, name: "Maya Chen", status: "Active" },
];

<Table columns={columns} data={data} hover />;

Couleurs et variantes

colorScheme controle la couleur semantique des en-tetes, du survol, de la selection, des bordures et de la pagination. Les variantes de couleur sont aussi disponibles directement via variant.

API	Valeurs
colorScheme	default, primary, secondary, accent, tertiary
Layout variants	default, striped, bordered, borderless, compact
Color variants	primary, secondary, accent, tertiary

Le colorScheme choisi controle aussi le style au survol : colorScheme="primary" utilise donc la couleur de survol principale plutot que celle de la surface par defaut.

Couleurs de bandes personnalisees

<Table
  variant="striped"
  stripedOddRowColor="color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))"
  stripedEvenRowColor="color-mix(in srgb, var(--color-secondary) 16%, var(--color-surface))"
  columns={columns}
  data={data}
/>

Cas d'utilisation courants

Ce tableau de commandes compact illustre la legende, la pagination, le rendu personnalise des cellules et l'etat sans resultat.

Éditeur en direct

function TableUseCases() {
  const [showEmpty, setShowEmpty] = React.useState(false);
  const columns = [
    { key: "order", title: "Order", dataIndex: "order" },
    { key: "item", title: "Item", dataIndex: "item" },
    {
      key: "status",
      title: "Status",
      dataIndex: "status",
      render: (value) => <Badge variant={value === "Paid" ? "success" : "secondary"}>{value}</Badge>,
    },
  ];
  const data = Array.from({ length: 12 }, (_, index) => ({
    id: index + 1,
    order: `#${1201 + index}`,
    item: `Catalog item ${index + 1}`,
    status: index % 3 === 0 ? "Pending" : "Paid",
  }));

  return (
    <div className="grid w-full gap-4">
      <Button
        className="justify-self-start"
        size="sm"
        variant="outline"
        onClick={() => setShowEmpty((current) => !current)}
      >
        {showEmpty ? "Show orders" : "Show empty state"}
      </Button>
      <Table
        caption={() => <span className="block p-3 text-left font-semibold">Recent orders</span>}
        columns={columns}
        data={showEmpty ? [] : data}
        emptyMessage="No orders match the current filters."
        colorScheme="secondary"
        variant="compact"
        hover
        pagination
        pageSize={10}
      />
    </div>
  );
}

Résultat

Loading...

Proprietes

Propriete	Type	Valeur par defaut
columns	ColumnProps[]	requis
data	RowData[]	requis
colorScheme	"default" | "primary" | "secondary" | "accent" | "tertiary"	"default"
variant	variante de disposition ou de couleur	"default"
size	"xs" | "small" | "medium" | "large"	"medium"
hover	boolean	false
shadowOnHover	"none" | "small" | "medium" | "large"	"none"
stripedOddRowColor	string	valeur par defaut de la palette
stripedEvenRowColor	string	valeur par defaut de la palette
pagination	boolean	false
pageSize	number	10
stickyHeader	boolean	false
stickyColumn	boolean	false
selectable	boolean	false
selectMode	"single" | "multiple"	"single"
selectedRowId	string | number | null	-
highlightRowBorder	boolean	-
onSélectionnerRow	(ids: (string | number)[]) => void	-
onDeselectRow	(ids: (string | number)[]) => void	-
onRowClick	(rowData) => void	-
caption	ReactNode | () => ReactNode	-
headerTemplate	ReactNode | () => ReactNode	-
footerTemplate	ReactNode | () => ReactNode	-
expandableHeader	boolean	true
emptyMessage	string	"Aucune donnée disponible"
width	string	-
height	string	-
className	string	""
headerClassName	string	""
colClassName	string	""
rowClassName	string	""

Definition des colonnes

Propriete	Type	Role
key	string	Cle de colonne stable
title	ReactNode	Contenu de l'en-tete
dataIndex	string	Propriete de ligne a afficher
render	(value, rowIndex) => ReactNode	Rendu personnalise de cellule
onCell	(rowData, rowIndex) => object	Attributs de cellule supplementaires
fixed	"left" | "right"	Bord fixe de la colonne
width	string	Largeur de la colonne
colSpan	number	Etendue de colonnes de l'en-tete
rowSpan	number	Etendue de lignes de l'en-tete
className	string	Classes de l'en-tete et des cellules
cellClassName	string	Classes des cellules du corps