Magic Table (legacy)

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

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