datable-react

Datable is a ReactJS library to create a custom and sortable data table. This is the V1 of this project.

Features

• Searching a direct data
• Paginate and Sort data
• Customizable
• Add table headers
• Responsive

Install

npm install --save datable-react

or

npm i datable-react

General

import {DataTable} from 'datable-react';
import {Header} from 'datable-react';
import {Table} from 'datable-react';
import {Footer} from 'datable-react';
import {labels, data} from './your-data-repository'

//css module for the table
import "datable-react/dist/index.css";

//to use all the table - Header, table, footer 
<DataTable labels={labels} data={data} />

//to use the header
<Header labels={labels} data={data} />

//to use only the table
<Table labels={labels} data={data} />

//to use the footer
<Footer labels={labels} data={data} />

include data

// titles of columns:
const labels = [ 
      { text: "column title 1", value: "valueTitle1" },
      { text: "column title 2", value: "valueTitle2" },
      { text: "column title 3", value: "valueTitle3" },
      {...},
]

// data in rows:
const data = [ 
      { valueTitle1: "data 1",
        valueTitle2: "data 2",
        valueTitle3: "data 3",
       }
]

// example
const labels = [
    { text: "First Name", value: "firstName" },
    { text: "Last Name", value: "lastName" },
    { text: "Start Date", value: "startDate" },
    { text: "Department", value: "department" },
  ];
  
  const data = [
    {
      firstName: "Tyson",
      lastName: "Doe",
      startDate: "04/14/2021",
      department: "Marketing",
    },
    {
      firstName: "Anna",
      lastName: "Alia",
      startDate: "03/02/2020",
      department: "Marketing",
    },
]

Custom

| Property | Type | Required | Default | Description | | :--------------- | :------ | :------- | :---------------------- | :---------------------------------------------------- | | labels | array | true | [] | Names of columns | | data | array | true | [] | Data in rows | | language | boolean | false | false | false = french, true = english | | firstBackground | string | false | '#5e5d5c' | Background color of columns and active page | | secondBackground | string | false | '#e9e9ed' | Background color of certains rows and page not active | | color | string | false | 'white' | Column font color | | arrowColor | string | false | '#75797a' | Arrow's color to sort data | | customButton | object | false | [] | to customize the previous and next button | | customColumn | object | false | backgroundColor, color | to customize the column component | | customFooter | object | false | [] | to customize the footer component | | customHeader | object | false | [] | to customize the header component | | customPagination | object | false | [] | to customize the pagination | | customRow | object | false | backgroundColor, filter | to customize the row component | | customSearch | object | false | [] | to customize the search section | | customArrow | object | false | [] | to customize arrows to sort data | | customLength | object | false | [] | to customize the section of "show length entries" |

Exemple custom

<DataTable 
labels={labels} 
data={data} 
language={true}
firstBackground={"#038C3E"}
secondBackground={"#DEF4E0"}
arrowColor={"#022601"}
/>

License

MIT © loeMa