datable-react v1.0.4

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

Exemple custom

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

License

MIT © loeMa