react-table-component-ll-oc v0.0.1

React Data Table Component

react-data-table-ll is a simple and flexible React table component for displaying data.

Key Features

• Declarative configuration
• Built-in and configurable:
  • Sorting
  • Filtering
  • Pagination
• Style Customizable

Installation

  npm install --save react-table-component-ll-oc

Usage

import

 import { DataTable } from 'react-table-component-ll-oc'

simple use

 const data = {
  columns: [
    {
      name:'Name',
      value:'name',
      type:'string',
      sortable:true
    },
    {
      name:'Age',
      value: 'age',
      type:'number',
      sortable:false
    }
  ],
  rows: [
    {
      name: 'Linh Dang',
      age: 36
    },
    { 
      name: 'Liam Dan',
      age: 1
    },
    {
      name: 'Bui Huu Kien',
      age: 35
    }
  ]
}

<DataTable data = {data} titleTbl = {'your title'}/>

Filtering and Pagination

paginationConfig = {
  nbrRows:6 
}

<DataTable data = {data} searchTbl pagination  paginationConfig={paginationConfig}/>

Style Customizable

style.css file

.table_title_ct{
  color: red;
}
.table_filter_ct{
  background: red;
}

component.jsx file

import './style.css';

styleCustom = {
      table_title: 'table_title_ct',
      table_filter: 'table_filter_ct'
}
<DataTable data = {data} titleTbl = {'your title'} searchTbl pagination  paginationConfig styleCustom={styleCustom}/>

style options

License