rf-table v1.0.1

rf-table

React functional table component

Install

npm install --save rf-table

Usage

1. Import the package

import { Table } from 'rf-table'
import 'rf-table/dist/index.css'

2. Define selection column (optional):

const selectRow = {
  mode: 'checkbox',
  clickToSelect: true,
  onSelect: (row, isSelect) => {
    //this callback function will be triggered when a single row selection toggles
    console.log(row, isSelect)
  },
  onSelectAll: (isSelect, rows) => {
    //this callback function will be triggered when all rows selection toggles
    console.log(rows, isSelect)
  }
}

3. Define other columns

//note: sort and formatter are optional.
const columns = [
  {
    dataField: 'id',
    header: 'ID',
    sort: true,
    formatter: (row) => {
      return row.id
    }
  },
  {
    dataField: 'message',
    header: 'Message',
    sort: true,
    formatter: (row) => <>{`${row.id} ${row.message}`}</>
  }
]

4. Create component

<Table
  className='customClassName'
  columns={columns}
  data={list}
  selectRow={selectRow}
/>

License

MIT © TavDev