@cypherlab/react-table NPM

`@cypherlab/react-table`

Advanced Table

Install

npm i @cypherlab/react-table

Usage

See Live demo
See Code example

import Table from '@cypherlab/react-table'

// create some transform utility
const transformToFlag = (v, item) => (<img src={`/img/flags/${v}.png`} />)

const props = {
  data: [
      { name: 'bruce wayne', lang: 'en' }
    , { name: 'victor hugo', lang: 'fr' }
  ]

  cols: [
      { key: 'name', class: 'text-center w-25' }
    , { key: 'country', path: 'lang', transform: transformToFlag }
  ]
}

// render
<Table {...props} />

Table options

option	info
data	table data. `[{ foo: "bar" }, { foo: "bar" }]`. required
cols	table columns.`[{}, {}, ...]`. required
title	table title
filter	query filter
searchKeys	comma separated. ex: `foo,name.first`. default: `key`
onFilter
onClick
hideHead	hide table `thead`. default: `false`
hideNoQuery	show empty table if no filter. default: `false`
height	table height. default: `400px`
color	table head color. default: `#3592d6`