@antonin-oc/react-data-table NPM

@antonin-oc/react-data-table

React data table component

This data table has been created for my OpenClassrooms studies. It is a pretty simple data table, with not many configurations, but easy to use. I had to use React, and I added Typescript to my tools.

Key Features

Built-in :
- Sorting
- Paginator
- Search
- Showed data length selection
Themeable/Customizable
Accessibility

How to work with It

You can import this package using npm :

npm i @antonin-oc/react-data-table

Then, import the DataTable component :

import { DataTable } from "@antonin-oc/react-data-table";

You can call it like this :

<DataTable
  attributes={attributes}
  data={data}
  headings={headings}
/>

data is an array of json objects.\ Example :

const data : Record<string, any>[] = [
  {
    firstName : "John",
    lastName : "Doe",
    age : 24
  },{
    firstName : "John",
    lastName : "Smith",
    age : 32
  }
]

headings is an array of json objects, with the keys title and data, title corresponding to the displayed text in the thead, and data to the corresponding key in the data object.\ Example :

const headings : { title: string; data: string; }[] = [
  {
    title : "First name",
    data : "firstName"
  },{
    title : "Last name",
    data : "lastName"
  },{
    title : "Age",
    data : "age"
  }
]

attributes is an json object, with the keys id, className and style.\ Example :

const attributes: TableHTMLAttributes<any> = {
  id: "data-table",
  className: "data-table",
  style: {
    backgroundColor: "white",
  },
};

Themes

At the moment, one theme exists beside default one. You can use it giving the class "data-table-classic" in the className value in the attributes object.

It looks like this :