Table

Candidate

Table organise des donnees comparables dans une structure stable. Elle convient aux segments, destinations, domaines, utilisateurs et journaux d’activite. La pagination reste un composant autonome place apres la Table.

Preview

Segments disponibles
			Statut
Premium shoppers	Audience	128 420	Actif
Intent auto	CRM	84 210	Synchronisation
Travel enthusiasts	Audience	61 894	Actif

Variants

Dense

Reduit la hauteur des lignes pour les vues operationnelles contenant beaucoup de donnees.

Segments en vue dense
			Statut
Premium shoppers	Audience	128 420	Actif
Intent auto	CRM	84 210	Synchronisation
Travel enthusiasts	Audience	61 894	Actif

Selectable

Ajoute une colonne de selection. La selection globale et l’etat visuel des lignes sont geres sans inclure d’actions groupees dans la Table.

Selection de segments
			Statut
Premium shoppers	Audience	128 420	Actif
Intent auto	CRM	84 210	Synchronisation
Travel enthusiasts	Audience	61 894	Actif

Variant	Usage
`default`	Donnees standards et lecture confortable
`dense`	Interfaces operationnelles et volumes importants
`selectable`	Selection de lignes avant une action groupee externe
`loading`	Structure temporaire pendant le chargement
`empty`	Message explicite lorsque la collection est vide

States

default utilise une surface blanche et des separateurs neutres.
hover aide a suivre une ligne large sans transformer toute la Table en lien.
selected applique une surface semantique et maintient la checkbox native.
focus-visible est applique au conteneur scrollable et aux controles de tri.
loading affiche des lignes skeleton sans annoncer de fausses donnees.
empty conserve les colonnes et explique l’absence de resultat.

Astro

---
import Table from '../components/ui/Table.astro';

const columns = [
  { key: 'name', label: 'Segment', sortable: true },
  { key: 'profiles', label: 'Profils', align: 'end' },
];

const rows = [
  { id: 'seg-01', name: 'Premium shoppers', profiles: '128 420' },
];
---

<Table
  caption="Segments disponibles"
  columns={columns}
  rows={rows}
  rowKey="id"
  selectable
/>

Le bouton de tri expose la colonne et aria-sort, mais le tri des donnees reste sous la responsabilite de la page ou du store React.

Composition avec Pagination

<Table caption="Segments disponibles" columns={columns} rows={rows} />
<Pagination currentPage={2} totalPages={8} hrefPattern="/segments?page={page}" />

Table et Pagination ne partagent aucun etat interne. Le serveur ou la page controle les lignes affichees et la page courante.

Tokens

--table-border, --table-cell-*, --table-head-*, --table-row-height, --table-row-height-dense, --table-cell-padding-*, --table-radius, --table-focus-ring, --table-selection-*, --table-skeleton-*.

Do / Don’t

Do	Don’t
Aligner les nombres a droite et utiliser des chiffres tabulaires.	Centrer toutes les donnees pour remplir visuellement les cellules.
Donner un caption descriptif, meme masque visuellement.	Utiliser le titre de la page comme seul nom accessible.
Garder les actions de masse hors de la Table.	Integrer pagination, toolbar et filtres dans chaque ligne.
Conserver un ordre de colonnes stable.	Deplacer les colonnes selon la longueur des valeurs.
Utiliser Dense pour un besoin reel de densite.	Reduire la taille du texte pour afficher davantage de lignes.

Accessibility

Table utilise les elements natifs table, thead, tbody, th et caption. Les colonnes triees exposent aria-sort. Les checkboxes de selection ont un nom accessible et restent utilisables au clavier. Le conteneur horizontal est focusable afin qu’un utilisateur clavier puisse faire defiler une table large.

Status

Candidate. La structure, les densites et les etats sont utilisables. Les cellules complexes, colonnes sticky et actions groupees seront validees avec un premier usage produit.