1.0.5 • Published 11 months ago
@courleciel/datatable v1.0.5
@courleciel/datatable
@courleciel/datatable est un composant React conçu pour afficher des tableaux avec des fonctionnalités avancées telles que la pagination, le tri et la recherche.
📦 Installation
Installez le composant via npm :
npm install @courleciel/datatable🚀 Utilisation
Après l'installation, importez et utilisez le composant dans votre projet :
import DataTable from 'wealthhealth-components-datatable-courleciel';
// Exemple d'utilisation
const data = [
{ name: 'John Doe', age: 28, position: 'Developer' },
{ name: 'Jane Smith', age: 34, position: 'Manager' },
// ... autres données
];
const columns = [
{ title: 'Nom', field: 'name' },
{ title: 'Âge', field: 'age' },
{ title: 'Poste', field: 'position' },
// ... autres colonnes
];
function App() {
return (
<DataTable
data={data}
columns={columns}
title="Liste des employés"
/>
);
}
export default App;Dans cet exemple, data représente les données à afficher, et columns définit les colonnes du tableau.
⚙️ Propriétés
Le composant DataTable accepte les propriétés suivantes :
| Propriété | Type | Description |
|---|---|---|
data | array | Obligatoire. Tableau d'objets contenant les données à afficher. |
columns | array | Obligatoire. Tableau d'objets définissant les colonnes du tableau. |
title | string | Titre affiché au-dessus du tableau. |
options | object | Options supplémentaires pour personnaliser le comportement du tableau. |
🎨 Personnalisation
Vous pouvez personnaliser l'apparence et le comportement du tableau en utilisant la propriété options :
const options = {
paging: true, // Activer la pagination
pageSize: 10, // Nombre de lignes par page
sorting: true, // Activer le tri
search: true, // Activer la recherche
};🌟 Fonctionnalités
- Pagination : Naviguez entre les pages facilement.
- Recherche intégrée : Recherchez rapidement dans vos données.
- Tri des colonnes : Triez les données en cliquant sur les en-têtes des colonnes.
- Personnalisation facile : Ajustez les options et l'apparence en fonction de vos besoins.
🔗 Liens
N'hésitez pas à contribuer, soumettre des problèmes ou proposer des améliorations !