Tableau

Composant de tableau riche en fonctionnalités pour afficher des données tabulaires.

Importation

import { Table } from 'asterui'
import type { ColumnType, RowSelection, ExpandableConfig, PaginationConfig } from 'asterui'

Exemples

Tableau de base

Tableau simple avec des données.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  return (
      <Table columns={columns} dataSource={userData} pagination={false} />
    )
}

export default App

Rendu personnalisé

Utiliser des fonctions de rendu pour les tags, boutons et contenu personnalisé.

</>

Name	Email	Role	Status	Actions
John Doe	john@example.com	Admin	active	EditDelete
Jane Smith	jane@example.com	User	active	EditDelete
Bob Johnson	bob@example.com	User	inactive	EditDelete
Alice Williams	alice@example.com	Editor	active	EditDelete

import { Table, Tag, Button, Space } from 'asterui'

function App() {
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active' },
  ];
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', width: 150 },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role', align: 'center' },
    {
      key: 'status',
      title: 'Status',
      dataIndex: 'status',
      align: 'center',
      render: (value) => (
        <Tag color={value === 'active' ? 'success' : 'ghost'} size="sm">
          {String(value)}
        </Tag>
      ),
    },
    {
      key: 'actions',
      title: 'Actions',
      align: 'right',
      render: () => (
        <Space size="xs">
          <Button size="xs" variant="ghost">Edit</Button>
          <Button size="xs" variant="ghost">Delete</Button>
        </Space>
      ),
    },
  ];
  
  return (
      <Table columns={columns} dataSource={userData} pagination={false} />
    )
}

export default App

Lignes rayées

Zébrure pour une meilleure lisibilité.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData.slice(0, 5)} striped pagination={false} />
    )
}

export default App

Tableau avec bordures

Ajouter des bordures pour un aspect plus défini.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData.slice(0, 5)} bordered pagination={false} />
    )
}

export default App

Taille compacte

Taille extra petite pour des données denses.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table
        columns={basicColumns}
        dataSource={userData.slice(0, 5)}
        size="xs"
        striped
        bordered
        pagination={false}
      />
    )
}

export default App

Taille extra large

Taille extra large pour l'emphase.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData.slice(0, 3)} size="xl" pagination={false} />
    )
}

export default App

État vide

Message d'état vide personnalisable.

</>

Name	Email	Role
No users found

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={[]}
        pagination={false}
        locale={{ emptyText: 'No users found' }}
      />
    )
}

export default App

État de chargement

Afficher un spinner de chargement pendant la récupération des données.

</>

Show Loading

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

import { Table, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [isLoading, setIsLoading] = useState(false);
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <Button size="sm" onClick={() => setIsLoading(!isLoading)}>
          {isLoading ? 'Hide' : 'Show'} Loading
        </Button>
        <Table columns={columns} dataSource={userData} loading={isLoading} pagination={false} />
      </div>
    )
}

export default App

Pagination de base

Paginer de grands ensembles de données.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

«123»

import { Table } from 'asterui'

function App() {
  return (
      <Table columns={basicColumns} dataSource={userData} pagination={{ pageSize: 5 }} />
    )
}

export default App

Pagination avancée

Changeur de taille de page, saut rapide et affichage du total.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User

1-5 of 12 items5 / page10 / page20 / page

«123»

Go to

import { Table } from 'asterui'

function App() {
  return (
      <Table
        columns={basicColumns}
        dataSource={userData}
        pagination={{
          pageSize: 5,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
          pageSizeOptions: [5, 10, 20],
        }}
      />
    )
}

export default App

En-tête épinglé

Garder l'en-tête visible pendant le défilement.

</>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Johnson	bob@example.com	User
Alice Williams	alice@example.com	Editor
Charlie Brown	charlie@example.com	User
David Lee	david@example.com	User
Emma Wilson	emma@example.com	Editor
Frank Miller	frank@example.com	User
Grace Taylor	grace@example.com	Admin
Henry Davis	henry@example.com	User
Iris Martin	iris@example.com	Editor
Jack White	jack@example.com	User

import { Table } from 'asterui'

function App() {
  return (
      <div className="max-h-64 overflow-auto border border-base-content/10 rounded-lg">
        <Table columns={basicColumns} dataSource={userData} pinRows striped pagination={false} />
      </div>
    )
}

export default App

Tri des colonnes

Cliquer sur les en-têtes de colonnes pour trier les données.

</>

Name	Age	Email
Jane Smith	28	jane@example.com
Charlie Brown	29	charlie@example.com
John Doe	32	john@example.com
Alice Williams	35	alice@example.com
David Lee	41	david@example.com
Bob Johnson	45	bob@example.com

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', sorter: true },
    { key: 'age', title: 'Age', dataIndex: 'age', sorter: true, defaultSortOrder: 'ascend' },
    { key: 'email', title: 'Email', dataIndex: 'email', sorter: true },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData.slice(0, 6)}
        pagination={false}
      />
    )
}

export default App

Tri contrôlé

Contrôler l'état de tri de manière externe.

</>

AscendingDescendingNone

Name	Email	Role
Alice Williams	alice@example.com	Editor
Bob Johnson	bob@example.com	User
Charlie Brown	charlie@example.com	User
Jane Smith	jane@example.com	User
John Doe	john@example.com	Admin

import { Table, Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [sortOrder, setSortOrder] = useState<'ascend' | 'descend' | null>('ascend');
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', sorter: true, sortOrder },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <Space size="sm">
          <Button size="sm" variant={sortOrder === 'ascend' ? 'primary' : 'outline'} onClick={() => setSortOrder('ascend')}>
            Ascending
          </Button>
          <Button size="sm" variant={sortOrder === 'descend' ? 'primary' : 'outline'} onClick={() => setSortOrder('descend')}>
            Descending
          </Button>
          <Button size="sm" variant={sortOrder === null ? 'primary' : 'outline'} onClick={() => setSortOrder(null)}>
            None
          </Button>
        </Space>
        <Table
          columns={columns}
          dataSource={userData}
          pagination={false}
          onSortChange={(sorter) => setSortOrder(sorter.order ?? null)}
        />
      </div>
    )
}

export default App

Filtrage des colonnes

Ajouter des menus déroulants de filtrage aux colonnes.

</>

Name	Role	Status
John Doe	Admin	active
Jane Smith	User	active
Bob Johnson	User	inactive
Alice Williams	Editor	active
Charlie Brown	User	active
David Lee	User	active

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    {
      key: 'role',
      title: 'Role',
      dataIndex: 'role',
      filters: [
        { text: 'Admin', value: 'Admin' },
        { text: 'User', value: 'User' },
        { text: 'Editor', value: 'Editor' },
      ],
      onFilter: (value, record) => record.role === value,
    },
    {
      key: 'status',
      title: 'Status',
      dataIndex: 'status',
      filters: [
        { text: 'Active', value: 'active' },
        { text: 'Inactive', value: 'inactive' },
      ],
      onFilter: (value, record) => record.status === value,
    },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData.slice(0, 6)}
        pagination={false}
      />
    )
}

export default App

Sélection par cases à cocher

Activer la sélection de lignes avec des cases à cocher.

</>

Selected: None

	Name	Email	Role
	John Doe	john@example.com	Admin
	Jane Smith	jane@example.com	User
	Bob Johnson	bob@example.com	User
	Alice Williams	alice@example.com	Editor
	Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'
import { useState } from 'react'

function App() {
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <div className="text-sm">Selected: {selectedKeys.join(', ') || 'None'}</div>
        <Table
          columns={columns}
          dataSource={userData}
          rowSelection={{
            selectedRowKeys: selectedKeys,
            onChange: (keys) => setSelectedKeys(keys),
          }}
          pagination={false}
        />
      </div>
    )
}

export default App

Sélection par radio

Sélection de ligne unique avec des boutons radio.

</>

Selected: None

	Name	Email	Role
	John Doe	john@example.com	Admin
	Jane Smith	jane@example.com	User
	Bob Johnson	bob@example.com	User
	Alice Williams	alice@example.com	Editor
	Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'
import { useState } from 'react'

function App() {
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User' },
  ];
  
  return (
      <div className="space-y-4">
        <div className="text-sm">Selected: {selectedKeys.join(', ') || 'None'}</div>
        <Table
          columns={columns}
          dataSource={userData}
          rowSelection={{
            type: 'radio',
            selectedRowKeys: selectedKeys,
            onChange: (keys) => setSelectedKeys(keys),
          }}
          pagination={false}
        />
      </div>
    )
}

export default App

Lignes extensibles

Développer les lignes pour afficher un contenu supplémentaire.

</>

Expand	Name	Email	Role
	John Doe	john@example.com	Admin
	Jane Smith	jane@example.com	User
	Bob Johnson	bob@example.com	User
	Alice Williams	alice@example.com	Editor
	Charlie Brown	charlie@example.com	User

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name' },
    { key: 'email', title: 'Email', dataIndex: 'email' },
    { key: 'role', title: 'Role', dataIndex: 'role' },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', age: 32, description: 'Senior administrator' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', age: 28, description: 'Regular user' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive', age: 45, description: 'Account suspended' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active', age: 35, description: 'Content editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'active', age: 29, description: 'New user' },
  ];
  
  const expandable = {
    expandedRowRender: (record) => (
      <div className="p-2">
        <p className="text-sm"><strong>Description:</strong> {record.description}</p>
        <p className="text-sm"><strong>Age:</strong> {record.age}</p>
      </div>
    ),
    rowExpandable: (record) => record.status === 'active',
  };
  
  return (
      <Table
        columns={columns}
        dataSource={userData}
        expandable={expandable}
        pagination={false}
      />
    )
}

export default App

Ellipse de texte

Tronquer le texte long avec des points de suspension.

</>

Name	Email	Description
John Doe	john@example.com	Senior administrator with full system access
Jane Smith	jane@example.com	Regular user account
Bob Johnson	bob@example.com	Account currently suspended
Alice Williams	alice@example.com	Content editor with publishing rights

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', width: 100 },
    { key: 'email', title: 'Email', dataIndex: 'email', width: 150, ellipsis: true },
    { key: 'description', title: 'Description', dataIndex: 'description', ellipsis: true },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', description: 'Senior administrator with full system access' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', description: 'Regular user account' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', description: 'Account currently suspended' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', description: 'Content editor with publishing rights' },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData}
        pagination={false}
      />
    )
}

export default App

Configuration du défilement

Définir la largeur et la hauteur maximales avec défilement.

</>

Name	Email	Role	Status	Age	Description
John Doe	john@example.com	Admin	active	32	Senior administrator
Jane Smith	jane@example.com	User	active	28	Regular user
Bob Johnson	bob@example.com	User	inactive	45	Account suspended
Alice Williams	alice@example.com	Editor	active	35	Content editor
Charlie Brown	charlie@example.com	User	active	29	New user

import { Table } from 'asterui'

function App() {
  const columns = [
    { key: 'name', title: 'Name', dataIndex: 'name', width: 150 },
    { key: 'email', title: 'Email', dataIndex: 'email', width: 200 },
    { key: 'role', title: 'Role', dataIndex: 'role', width: 100 },
    { key: 'status', title: 'Status', dataIndex: 'status', width: 100 },
    { key: 'age', title: 'Age', dataIndex: 'age', width: 80 },
    { key: 'description', title: 'Description', dataIndex: 'description', width: 300 },
  ];
  
  const userData = [
    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', age: 32, description: 'Senior administrator' },
    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', age: 28, description: 'Regular user' },
    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive', age: 45, description: 'Account suspended' },
    { id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active', age: 35, description: 'Content editor' },
    { id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'active', age: 29, description: 'New user' },
  ];
  
  return (
      <Table
        columns={columns}
        dataSource={userData}
        scroll={{ x: 800, y: 200 }}
        pagination={false}
      />
    )
}

export default App

Exemple complet

Tableau avec plusieurs fonctionnalités combinées.

</>

Name	Email	Role	Status	Actions
John Doe	john@example.com	Admin	active	EditDelete
Jane Smith	jane@example.com	User	active	EditDelete
Bob Johnson	bob@example.com	User	inactive	EditDelete
Alice Williams	alice@example.com	Editor	active	EditDelete
Charlie Brown	charlie@example.com	User	active	EditDelete

«123»

import { Table, Tag, Button, Space } from 'asterui'

function App() {
  return (
      <Table
        columns={columnsWithRender}
        dataSource={userData}
        size="sm"
        striped
        bordered
        pagination={{ pageSize: 5 }}
      />
    )
}

export default App

API

Table

Propriété	Description	Type	Défaut
columns	Configuration des colonnes du tableau	ColumnType<T>[]	-
dataSource	Données à afficher dans le tableau	T[]	-
rowKey	Clé unique pour chaque ligne	keyof T | ((record: T) => string)	'id'
loading	État de chargement	boolean	false
size	Taille du tableau	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
bordered	Ajouter une bordure autour du tableau	boolean	false
hoverable	Mettre en surbrillance la ligne au survol	boolean	true
striped	Couleurs de lignes alternées (rayures zébrées)	boolean	false
pinRows	Épingler les lignes d’en-tête pendant le défilement	boolean	false
pinCols	Épingler les colonnes pendant le défilement	boolean	false
pagination	Configuration de la pagination ou false pour désactiver	false | PaginationConfig	{ pageSize: 10 }
rowSelection	Configuration de la sélection de lignes	RowSelection<T>	-
expandable	Configuration des lignes extensibles	ExpandableConfig<T>	-
scroll	Configuration du défilement pour des dimensions fixes	ScrollConfig	-
className	Classes CSS supplémentaires	string	-
onRow	Gestionnaires d’événements de ligne	(record: T, index: number) => HTMLAttributes	-
onChange	Callback unifié pour la pagination, le tri et le filtrage	(pagination, filters, sorter, extra) => void	-
onSortChange	Callback lorsque le tri change	(sorter: SorterResult<T>) => void	-
onFilterChange	Callback lorsque le filtre change	(filters: Record<string, ...>) => void	-
locale	Configuration de localisation pour le texte vide, les labels de filtre	{ emptyText?, filterConfirm?, filterReset?, selectAll? }	-
data-testid	ID de test pour le composant	string	'table'
aria-label	Label accessible pour le tableau	string	-

ColumnType

Propriété	Description	Type	Défaut
key	Clé unique pour la colonne	string	-
title	Titre de l’en-tête de colonne	ReactNode	-
dataIndex	Nom du champ dans l’enregistrement de données	keyof T	-
render	Fonction de rendu personnalisée pour le contenu de la cellule	(value, record, index) => ReactNode	-
width	Largeur de colonne	string | number	-
align	Alignement du texte	'left' | 'center' | 'right'	'left'
fixed	Fixer la colonne à gauche ou à droite	'left' | 'right'	-
sorter	Activer le tri ou fonction de tri personnalisée	boolean | ((a: T, b: T) => number)	-
sortOrder	Ordre de tri contrôlé	'ascend' | 'descend' | null	-
defaultSortOrder	Ordre de tri par défaut	'ascend' | 'descend'	-
filters	Configuration du menu déroulant de filtrage	FilterConfig[]	-
filteredValue	Valeurs filtrées contrôlées	(string | number | boolean)[]	-
defaultFilteredValue	Valeurs filtrées par défaut	(string | number | boolean)[]	-
onFilter	Fonction de filtrage	(value, record) => boolean	-
ellipsis	Tronquer le texte avec des points de suspension	boolean	false
hidden	Masquer la colonne	boolean	false

RowSelection

Propriété	Description	Type	Défaut
type	Type de sélection	'checkbox' | 'radio'	'checkbox'
selectedRowKeys	Clés de lignes sélectionnées contrôlées	React.Key[]	-
onChange	Callback lorsque la sélection change	(selectedRowKeys, selectedRows) => void	-
getCheckboxProps	Fonction pour personnaliser les propriétés de la case à cocher	(record) => { disabled?, name? }	-

ExpandableConfig

Propriété	Description	Type	Défaut
expandedRowRender	Fonction de rendu pour le contenu développé	(record, index, expanded) => ReactNode	-
expandedRowKeys	Clés de lignes développées contrôlées	React.Key[]	-
defaultExpandedRowKeys	Clés de lignes développées par défaut	React.Key[]	-
rowExpandable	Fonction pour déterminer si la ligne est extensible	(record) => boolean	-
onExpand	Callback lorsque l’état de développement change	(expanded, record) => void	-
onExpandedRowsChange	Callback lorsque les clés développées changent	(expandedKeys) => void	-
expandRowByClick	Développer la ligne au clic	boolean	false
expandIcon	Icône de développement personnalisée	(props) => ReactNode	-

PaginationConfig

Propriété	Description	Type	Défaut
current	Numéro de page actuel	number	1
pageSize	Nombre d’éléments par page	number	10
total	Nombre total d’éléments (pour pagination côté serveur)	number	-
showSizeChanger	Afficher le menu déroulant de taille de page	boolean	false
showQuickJumper	Afficher l’entrée de saut rapide de page	boolean	false
showTotal	Fonction pour rendre le texte total	(total, range) => ReactNode	-
pageSizeOptions	Options de taille de page	number[]	[10, 20, 50, 100]
position	Position de la pagination	'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'	'bottomRight'
onChange	Callback lorsque la page change	(page, pageSize) => void	-
onShowSizeChange	Callback lorsque la taille de page change	(current, size) => void	-

Accessibilité

• Utilise un <table> sémantique avec role="grid"
• Les en-têtes de colonnes incluent role="columnheader" et aria-sort pour les colonnes triables
• Les cases à cocher de sélection de lignes ont un aria-label approprié
• Les contrôles de tri sont accessibles au clavier (Entrée/Espace pour basculer)
• Les menus déroulants de filtrage supportent la touche Échap pour fermer
• Les boutons de pagination incluent aria-label et aria-current
• Les boutons développer/réduire incluent aria-expanded
• État de case à cocher indéterminé pour sélection partielle

Tests

Le composant expose des attributs data-testid :

• {baseTestId} - Conteneur racine
• {baseTestId}-table - Élément de tableau
• {baseTestId}-header-{columnKey} - En-têtes de colonnes
• {baseTestId}-row-{index} - Lignes du tableau
• {baseTestId}-row-{index}-{columnKey} - Cellules du tableau
• {baseTestId}-row-{index}-select - Case à cocher de sélection de ligne
• {baseTestId}-row-{index}-expanded - Contenu de ligne développée
• {baseTestId}-select-all - Case à cocher tout sélectionner
• {baseTestId}-pagination - Conteneur de pagination
• {baseTestId}-prev, {baseTestId}-next - Boutons de pagination
• {baseTestId}-{columnKey}-filter-button - Bouton de filtre
• {baseTestId}-empty - État vide
• {baseTestId}-loading - État de chargement

Attributs de données :

• data-state="selected" - Sur les lignes sélectionnées