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.

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 |

/////////////////////////////////////////////// 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.

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 |

<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'},
]