Source code in node_modules src directory
Scroll for french README
PropTypes.
Sass/Scss in node modules.
npm i oc_react_datatable
Mocked Headers and Data at the bottom of the page.
DataTable is a versatile React component designed to display, sort, search, and paginate data in an intuitive and customizable way.
It uses React hooks to manage state and effects, offering a smooth user experience even with large amounts of data.
Sorting: Supports ascending and descending sorting based on any column.
Search: Full-text or column-specific search with debounce to enhance performance.
Pagination: Flexible pagination options allowing users to navigate through paginated data. Input for Jump to page ...
Customization: Supports customization of sort and pagination icons, as well as style prefix for CSS customization.
Performance: Uses Suspense and lazy for deferred loading, thus optimizing rendering performance.
Responsiveness: Adapted to mobile devices and various screen sizes with X scroll.
After installation, you can import and use DataTable in your React project:
import React from 'react';
import DataTable from 'oc_react_datatable';
import 'oc_react_datatable/dist/assets/index.css';
const App = () => {
const data = [...];
const headers = [...];
const stylePrefix = 'MyOwnStyle';
return (
<DataTable
stylePrefix={stylePrefix}
data={data}
headers={headers}
itemsPerPage={5}
{...}
/>
);
};
export default App;DataTable accepts several props for maximum customization and flexibility:
stylePrefix : Class prefix for styling.
data : An array of data to display.
headers : An array of objects representing the table headers.
itemsPerPage : Number of items to display per page by default.
itemsSearchSelectValue : column search options (headers).
arrayOfItemsPerPage : An array defining the options for the number of items per page available via select.
onEditRequest, onChange, onPageChanged, onResetData : Callback functions for various events.
enableResetSettings, resetAfterSearch : Booleans to enable the reset settings button (sort, itemsPerPage, etc.) and reset settings after a search.
IconLeft, IconRight, IconAsc, IconDesc : Components to customize icons.
unformatedData: Booleans for formatted or unformatted data.
| Props | Type | Default |
|---|---|---|
| stylePrefix | PropTypes.string | "data-table_default" |
| headers | PropTypes.arrayOf(PropTypes.object) | [ ] |
| data | PropTypes.arrayOf(PropTypes.object) | [ ] |
| itemsPerPage | PropTypes.number | 5 |
| arrayOfItemsPerPage | PropTypes.arrayOf(PropTypes.number) | [1, 5, 10, 50, 100] |
| onEditRequest | PropTypes.func | |
| onChange | PropTypes.func | |
| onPageChanged | PropTypes.func | |
| onResetData | PropTypes.func | |
| enableResetSettings | PropTypes.bool | true |
| resetAfterSearch | PropTypes.bool | false |
| IconLeft | PropTypes.func | |
| IconRight | PropTypes.func | |
| IconAsc | PropTypes.func | |
| IconDesc | PropTypes.func | |
| itemsSearchSelectValue | PropTypes.string | "all" |
| unformatedData | PropTypes.bool | false |
You can customize the appearance of DataTable by using the stylePrefix and defining your own CSS rules.
default stylePrefix: 'data-table_default'
DataTable is distributed under the MIT license. Feel free to use, modify, and redistribute it under the terms of this license.
/////////////////////////////////////////////// FRENCH /////////////////////////////////////////////
DataTable est un composant React polyvalent conçu pour afficher, trier, rechercher et paginer des données de manière intuitive et personnalisable.
Il utilise les hooks React pour gérer l'état et les effets, offrant une expérience utilisateur fluide même avec de grandes quantités de données.
Triage: Prise en charge du tri ascendant et descendant basé sur n'importe quelle colonne.
Recherche: Recherche de texte intégrale ou spécifique à une colonne avec délai d'attente pour améliorer les performances.
Pagination: Options de pagination flexibles permettant aux utilisateurs de naviguer à travers les données paginées. Input for Jump to page ...
Personnalisation: Supporte la personnalisation des icônes de tri et de pagination, ainsi que le préfixe de style pour la personnalisation CSS.
Performances: Utilisation de Suspense et lazy pour un chargement différé, optimisant ainsi les performances du rendu.
Réactivité: Adapté aux dispositifs mobiles et aux différentes tailles d'écran avec scroll X.
Après l'installation, vous pouvez importer et utiliser DataTable dans votre projet React :
import React from 'react';
import DataTable from 'oc_react_datatable';
import 'oc_react_datatable/dist/assets/index.css';
const App = () => {
const data = [...];
const headers = [...];
const stylePrefix = 'MyOwnStyle';
return (
<DataTable
stylePrefix={stylePrefix}
data={data}
headers={headers}
itemsPerPage={5}
{...}
/>
);
};
export default App;DataTable accepte plusieurs props pour une personnalisation et une flexibilité maximales :
stylePrefix : Prefix de class pour le style.
data : Un tableau des données à afficher.
headers : Un tableau d'objets représentant les en-têtes du tableau.
itemsPerPage : Nombre d'éléments à afficher par page par defaut.
itemsSearchSelectValue : options de recherche par colone (headers).
arrayOfItemsPerPage : Un tableau définissant les options de nombre d'éléments par page disponibles via le select.
onEditRequest, onChange, onPageChanged, onResetData : Des fonctions callback pour divers événements.
enableResetSettings, resetAfterSearch : Booléens pour activer le bouton de réinitialisation des settings (sort, itemsPerPage etc...) et la réinitialisation settings après une recherche.
IconLeft, IconRight, IconAsc, IconDesc : Composants pour personnaliser les icônes.
unformatedData: Booléens pour données formatées ou non.
| Props | Type | Default |
|---|---|---|
| stylePrefix | PropTypes.string | "data-table_default" |
| headers | PropTypes.arrayOf(PropTypes.object) | [ ] |
| data | PropTypes.arrayOf(PropTypes.object) | [ ] |
| itemsPerPage | PropTypes.number | 5 |
| arrayOfItemsPerPage | PropTypes.arrayOf(PropTypes.number) | [1, 5, 10, 50, 100] |
| onEditRequest | PropTypes.func | |
| onChange | PropTypes.func | |
| onPageChanged | PropTypes.func | |
| onResetData | PropTypes.func | |
| enableResetSettings | PropTypes.bool | true |
| resetAfterSearch | PropTypes.bool | false |
| IconLeft | PropTypes.func | |
| IconRight | PropTypes.func | |
| IconAsc | PropTypes.func | |
| IconDesc | PropTypes.func | |
| itemsSearchSelectValue | PropTypes.string | "all" |
| unformatedData | PropTypes.bool | false |
Vous pouvez personnaliser l'apparence de DataTable en utilisant le préfixe stylePrefix et en définissant vos propres règles CSS.
stylePrefix par default: 'data-table_default'
DataTable est distribué sous la licence MIT. N'hésitez pas à l'utiliser, le modifier et le redistribuer selon les termes de cette licence.
<DataTable stylePrefix="data-table_default" data={arrayOfEmployeesDataContents} headers={arrayOfEmployeesDataTitle}/>Headers:
const arrayOfEmployeesDataTitle = [
{key: "firstName", value: "FirstName",},
{key: "lastName", value: "LastName",},
{key: "startDate",value: "StartDate", type: "date",},
{key: "department", value: "Department",},
{key: "dateOfBirth", value: "Date Of Birth", type: "date",},
{key: "street", value: "Street", type: 'street'},
{key: "city", value: "City",},
{key: "state", value: "State",},
{key: "zipCode", value: "ZipCode", type: 'number'},
]Data:
const arrayOfEmployeesDataContents = [
{'firstName': 'Diane', 'lastName': 'Pierce', 'startDate': '11/09/2021', 'department': 'IT', 'dateOfBirth': '23/01/1981', 'street': '017 Harris Plain', 'city': 'North Sharon', 'state': 'NC', 'zipCode': '12492'},
{'firstName': 'Craig', 'lastName': 'Roth', 'startDate': '01/06/2021', 'department': 'HR', 'dateOfBirth': '08/07/1954', 'street': '7119 Leslie Spurs', 'city': 'Port Susanchester', 'state': 'FL', 'zipCode': '74557'},
{'firstName': 'Robert', 'lastName': 'Hinton', 'startDate': '17/04/2023', 'department': 'Finance', 'dateOfBirth': '02/03/1960', 'street': '927 John Meadows Suite 900', 'city': 'Suzannemouth', 'state': 'ME', 'zipCode': '14054'},
{'firstName': 'Sabrina', 'lastName': 'Bartlett', 'startDate': '08/08/2023', 'department': 'Sales', 'dateOfBirth': '13/09/1983', 'street': '4417 John Stream Apt. 613', 'city': 'Port Karenside', 'state': 'NJ', 'zipCode': '04007'},
{'firstName': 'Robin', 'lastName': 'Harris', 'startDate': '10/08/2023', 'department': 'Sales', 'dateOfBirth': '10/09/2004', 'street': '6873 Aaron Brooks Suite 398', 'city': 'New Haley', 'state': 'NM', 'zipCode': '98604'},
{'firstName': 'Jacob', 'lastName': 'Ferguson', 'startDate': '04/03/2021', 'department': 'Marketing', 'dateOfBirth': '27/07/1970', 'street': '8839 Savannah Drive', 'city': 'Fordland', 'state': 'NE', 'zipCode': '10910'},
{'firstName': 'Elizabeth', 'lastName': 'Freeman', 'startDate': '07/03/2022', 'department': 'Marketing', 'dateOfBirth': '18/10/2002', 'street': '820 James Falls Apt. 989', 'city': 'Brendamouth', 'state': 'AZ', 'zipCode': '69873'},
{'firstName': 'Edward', 'lastName': 'Alexander', 'startDate': '28/10/2019', 'department': 'HR', 'dateOfBirth': '21/11/1991', 'street': '97823 Sullivan Fall', 'city': 'Martinshire', 'state': 'CT', 'zipCode': '84721'},
{'firstName': 'Danielle', 'lastName': 'Greene', 'startDate': '14/08/2022', 'department': 'Marketing', 'dateOfBirth': '23/06/1964', 'street': '98382 Martin Motorway', 'city': 'Port Mark', 'state': 'MT', 'zipCode': '40863'},
{'firstName': 'Jackson', 'lastName': 'Miller', 'startDate': '28/07/2023', 'department': 'IT', 'dateOfBirth': '06/01/1981', 'street': '36178 Hutchinson Neck', 'city': 'Stephensville', 'state': 'WA', 'zipCode': '42809'},
{'firstName': 'Frank', 'lastName': 'Mcgee', 'startDate': '26/05/2020', 'department': 'Marketing', 'dateOfBirth': '28/01/1969', 'street': '44554 Berry Street Apt. 553', 'city': 'Port George', 'state': 'NH', 'zipCode': '07130'},
{'firstName': 'Monica', 'lastName': 'Harvey', 'startDate': '06/04/2020', 'department': 'Finance', 'dateOfBirth': '16/05/1995', 'street': '5063 Kathy Mountains Apt. 673', 'city': 'Michealtown', 'state': 'NY', 'zipCode': '37448'},
{'firstName': 'Dawn', 'lastName': 'Powell', 'startDate': '29/08/2022', 'department': 'HR', 'dateOfBirth': '20/01/1959', 'street': '065 Pineda Stravenue', 'city': 'Port Stacy', 'state': 'SC', 'zipCode': '13038'},
{'firstName': 'Thomas', 'lastName': 'Larson', 'startDate': '22/05/2022', 'department': 'IT', 'dateOfBirth': '29/01/1986', 'street': '2334 Daniel Walks Suite 348', 'city': 'Lake Christopher', 'state': 'MI', 'zipCode': '79260'},
{'firstName': 'David', 'lastName': 'Morton', 'startDate': '23/05/2021', 'department': 'Marketing', 'dateOfBirth': '26/11/1961', 'street': '75272 Debbie Common Suite 641', 'city': 'Melendezbury', 'state': 'WY', 'zipCode': '91022'},
{'firstName': 'Alyssa', 'lastName': 'Lyons', 'startDate': '01/06/2022', 'department': 'Finance', 'dateOfBirth': '23/06/2002', 'street': '596 Browning Lakes', 'city': 'Ortizbury', 'state': 'VA', 'zipCode': '37625'},
]