reactable-search

Searchable table with simple JSON row definitions

[]()

live demo

Description

This React component is a simple live-searchable table with some basic enhancements:

• Regex search
• Optionally editable cells with callback
• Optional separate values for display vs. sort
• Export to CSV and JSON
• Expandable rows

Quickstart

Install via npm

$ npm i reactable-search

Run demo

$ npm run-script demo

Usage

Basic example

import SearchTable from 'reactable-search';
import ReactDOM from 'react-dom';

const rows = [
  {a: 1, b: 2},
  {a: 2, b: 3},
  ...
];

ReactDOM.render(
  <SearchTable
    searchPrompt="Type to search"
    rows={rows}/>,
  document.getElementByID("root");

Rich cells

You may optionally specify separate values for display, search and sort for each cell. You may also provide an onChange callback function, which will cause the cell content to become editable.

Rich cell example

Note that you may use "rich" and "plain" cells in any combination

var rows = [
  {
    fruit: {
      display: <label className="label label-danger">bananas</label>,
      sortVal: 'b',
      searchTerm: 'bananas',
      onChange: (e) => { console.log('You can watch my changes:', e) }
    },
    price: 5,
    quantity: 2
  }
];

Expandable rows

Each row can be either a simple JSON object with column:cell key-value pairs, or contain separate keys for cells and children for rows that are dynamically expandable. The children key should point to a list of child rows that will be shown when the expander button is clicked. Note that child rows do not have to share the same columns as parent rows, allowing arbitary DOM to be appended to each row - see demo.

Expandable row example

const expandableRows = [
  {
    cells: {a: 1, b: 2},
    expanded: false,
    children: [
      {c: 'x'},
      ...
    ]
  }, 
  ...
];