Magic Table

MagicTable is a helper component for easily and quickly making tables with built-in selectors and expansion, and (in the future) windowing/virtualization.

Under the surface it uses the <Table*> classes documented in the table pages.

MagicTable is still work in progress. Planned to do at some point is:

Support for sorting
Built-in virtualisation/windowing

How to use

Make sure you have the package installed @funnel-io/table
Include the import wherever you are using it in your code as import { MagicTable } from '@funnel-io/table';

Simple table

To create a table, you need two things:

an array of data
headers

Headers

headers defines the columns that MagicTable will render. It is an array of objects:

By default the header key is used to extract data from the row data, so with the headers above and the following data:

MagicTable will render

PRO TIP: MagicTable uses the lodash ‘get’ method to get the cell value, so use can use paths to get properties from deeper in your data structure, for instance you can use error.message as a header key.

Custom cell renderers

Renderers are used to customize cell rendering, if you wish to do more than simple render a text value in a cell.

The renderers prop is an object that maps a renderer to a header key. In this example we’ve defined a renderer for the ‘type’ cell.

The renderer must be a functional component. It should return a table cell; using the <TableCell> component is a good idea but not mandatory.

The renderer will receive props containing:

rowData - the data for the row that is being rendered at the time;
header - the header. This can be useful if you want to know for example how the data is to be aligned.

Example

Expansion

MagicTable has build in accordion / drawer / expandable row functions.

To enable expansion, set the property expandable to true and add an expandedRowRenderer functional component.

ExpandedRowRenderer

A function component render prop that receives the following props:

rowData - the row data
rowKey - unique identifer of the row

Selection

MagicTable has build in selectors. To enable selection:

Set property selectable true
Add a onRowSelectorClick callback