react-table-lib
v0.1.0
Published
React responsive table library
Downloads
5
Readme
React Table
Installation
yarn add react-table-lib
Usage
import Table from 'react-table-lib'
Basic Table
const data = [ { name: "Earline Stokes", age: 30 }, { name: "Amina Bergstrom", age: 25 }, { name: "Kattie Hoppe", age: 20 } ] return ( <Table data={data}> )
Column mapped
const data = [ { name: "Earline Stokes", age: 30 }, { name: "Amina Bergstrom", age: 25 }, { name: "Kattie Hoppe", age: 20 } ] const columns = { name: { label: "Full Name", sortable: true }, age: { label: "Age", format: (data) => data + 'yrs' } } return ( <Table data={data} columns={columns}> )
Selectable
const data = [ { name: "Earline Stokes", age: 30 }, { name: "Amina Bergstrom", age: 25 }, { name: "Kattie Hoppe", age: 20 } ] const columns = { name: { label: "Full Name", sortable: true }, age: { label: "Age", format: (data) => data + 'yrs' } } const handleSelect = (data) => { // do something // data [{ name: "Earline Stokes", age: 30 }] } return ( <Table data={data} columns={columns} selectable="multiple" onSelect={handleSelect}> )
Table Properties
| Props/Methods | Default | Type | Required | Details |
|---|---|---|---|--|
| data | - | array | true | Table Records in array format with each entry holding key : value
pair |
| columns | {} | object | false |Each property for data's entry's header property Ref: Columns|
| selectable | - | 'single' 'multiple' | false | Selectable option to select table record based on type single or multiple |
| onSelect | - | function | false | Callback to get selected records details. callback data
: record (or) array of records |
Columns Properties
| Property | type | Details |
|---|---|---|
| label
| string | Table Header column name |
| sortable
| boolean | Column sortable property |
| format
| function | Formatting table record for the same column |
Demo
Note: Please run
yarn storybook
to see demo. You can run this in your local too to check the same