import Table, {Column} from '@invisionag/iris-react-table';

react-table is a component that exposes multiple building blocks for structured, table-like display of data, while also providing freedom to supply data in a more dynamic and react-oriented way. We also get the freedom to animate row movement freely, without worrying about breaking the <table> markup. The central piece is the Table component, as it provides the basic styles. Instead of using tr for rows, you nest Columns into it to outline a structure. The rows themselves are provided as an Array of objects in the rows prop.

Usage

Basic

Please note, a __props.key attribute is required. Otherwise animations and sorting/searching in the virtualized version of the table will break.

rows = [
  {__props: { key: 1 }, name: 'Superman', morality: 'good'},
  {__props: { key: 2 }, name: 'Joker', morality: 'evil'},
  {__props: { key: 3 }, name: 'Wonder Woman', morality: 'good'},
];
<Table rows={rows}>
  <Column name="name" label="Name" />
  <Column name="morality" label="Morality" />
</Table>

Animation and Virtualization

Animations are enabled by default, you can disable them by setting animation to false. If animations are disabled the table will by virtualized. You should do this if your table needs to handle a lot of rows. It's required to set a height for the virtualized table to render rows.

Custom Column width

For custom column width you can pass a string in the width prop of a column. The string will directly be injected as a css value.

rows = [
  {__props: { key: 1 }, name: 'Superman', morality: 'good' },
  {__props: { key: 2 }, name: 'Joker', morality: 'evil' },
  {__props: { key: 3 }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows}>
  <Column width="10px" name="name" />
  <Column width="20%" name="morality" />
</Table>

Disabled rows

Rows can receive the disabled styling. For that, the row object should contain a true value for its __props.disabled key.

rows = [
  {__props: { key: 1, disabled: true }, name: 'Superman', morality: 'good' },
  {__props: { key: 2, disabled: true }, name: 'Joker', morality: 'evil' },
  {__props: { key: 3, disabled: true }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows}>
  <Column width="10px" name="name" />
  <Column width="20%" name="morality" />
</Table>

Sortable

A table can use the built-in functionality to make columns sortable by providing the sortable prop in the table component.

rows = [
  {__props: { key: 1, disabled: true }, name: 'Superman', morality: 'good' },
  {__props: { key: 1, disabled: true }, name: 'Joker', morality: 'evil' },
  {__props: { key: 1, disabled: true }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows} sortable showHeader>
  <Column width="10px" name="name" />
  <Column width="20%" name="morality" />
</Table>

For more elaborated sorting mechanisms, a valid alternative is providing the sorting functionality in a parent component. Columns can be passed an onClick prop, which will be fired when the header "cell" of this column is clicked. This means that custom sort functionality should only be used in conjunction with showHeader. Example here

Fixed height

For fixed height and any other inline styles you want to put on the table body, you can either pass just pass style object to the Table or use the height prop. If both are specified the height prop will overrule the style object.

const tableStyles = {
  height: '160px',
};

const height = '180px';

rows = [
  {__props: { key: 1, disabled: true }, name: 'Superman', morality: 'good' },
  {__props: { key: 1, disabled: true }, name: 'Joker', morality: 'evil' },
  {__props: { key: 1, disabled: true }, name: 'Wonder Woman', morality: 'good' },
];
<Table rows={rows} style={tableStyles} height={height}>
  <Column name="name" />
  <Column name="morality" />
</Table>

Placeholder

A placeholder can be provided. It will be displayed when the rowGetter doesn't return any elements to show. The placeholder can be either a string, or jsx.

rows = [];
<Table rows={rows} placeholder={<p>There is no data here.</p>}>
  <Column name="name" />
  <Column name="morality" />
</Table>

Custom Column Headings

It is possible to specify custom Column content via render prop. The render prop is expected as a child of column, and it passes along all of the column props.

Column Props:

• name (string): name passed to the column
• label (string or React$Node): the label passed to the column,
• onClick (SyntheticMouseEvent<*> => any): Call to invoke sorting functionality
• handleClick (SyntheticMouseEvent<*> => any): Call to invoke sorting functionality. Calls preventDefault before executing.
• sorted ('unsorted' | 'ascending' | 'descending'): Whether the column is currently sorted (and in which direction)
• className (string): ClassNames of the column
• width (string): width passed to the column

Example:

rows = [];
<Table rows={rows} placeholder={<p>There is no data here.</p>}>
  <Column name="name" />
    {props => <button onClick={props.onClick}>{props.name}</button>}
  </Column>
</Table>