1.0.5 • Published 11 months ago

@courleciel/datatable v1.0.5

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

@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éTypeDescription
dataarrayObligatoire. Tableau d'objets contenant les données à afficher.
columnsarrayObligatoire. Tableau d'objets définissant les colonnes du tableau.
titlestringTitre affiché au-dessus du tableau.
optionsobjectOptions 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 !

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

11 months ago