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.

Optional key	description	default
display	content to be rendered for display	N/A
sortVal	value to be used for sorting rows. For example, you may want to provide a formatted date string for display, but sort on the actual Date object	display (innermost content if display is a DOM element)
searchTerm	string value for searching	string value of display (innermost content if display is a DOM element)
onChange	function to receive onBlur events for editable cells	null

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'},
      ...
    ]
  }, 
  ...
];

Optional key	description	default
key	row id provided in onRender callback (if provided) for currently displayed rows	N/A
cells	see cell definition above	N/A
children	List of child rows	[]
expanded	Whether to expand all child rows by default	false
checked	checkbox selection status	null
selected	row selection status	false
onClick	click callback fn	null
onCheck	checkbox callback fn	null
footer	always at the bottom, regardless of search or sort	false