@swrve/sortable-table

Sortable Table

The sortable table component V2 is designed to allow for the easy display of data within a sortable table, with the maximum amount of flexibility in terms of styling and the choice of component you use to render the cell data. This is achieved with the use of render props with sensible defaults.

Minimum usage

If you just need to display data with standard string sorting you just need to pass the data and a cols array, with determines the cols to display and the order they are displayed.

<SortableTable
  cols={['name', 'age', 'createAt']}
  rows={[
    { id: '1', name: 'a', age: '30', createAt: '2017-11-01T03:01:00.000-08:00' },
    { id: '2', name: 'd', age: '32', createAt: '2017-10-01T03:01:00.000-08:00' },
    { id: '3', name: 'g', age: '54', createAt: '2017-09-01T03:01:00.000-08:00' },
    { id: '4', name: 'j', age: '23', createAt: '2017-05-01T03:01:00.000-08:00' }
  ]}
/>

Advanced Usage

If you require controls, custom rendering and styling of the cells you can use the render props to achieve this.

Render Props

render prop	description
renderHeader(value, { sortBy, order })	This customises all the Header cells
renderCell(defaultSchemaRender(), { id, key } )	This customises all the value cells.
render(value, { id, key, sortBy, order }))	The schema object also supports a render prop for per col customising.

Schema

The schema allows you to attach metadata to the individual cells in the table, the schema render Props is very useful for adding input components to a cells.

Schema props	description
label	The header label for a column
sortType	How to sort, string, number, date, boolean
render	A per cell render function

<SortableTable
  renderCell={value => <div className="text-red font-mono">{value}</div>}
  cols={['name', 'age', 'createdAt', 'selected']}
  rows={[
    { id: '1', name: 'a', age: '30', createAt: '2017-11-01T03:01:00.000-08:00' },
    { id: '2', name: 'd', age: '32', createAt: '2017-10-01T03:01:00.000-08:00' },
    { id: '3', name: 'g', age: '54', createAt: '2017-09-01T03:01:00.000-08:00' },
    { id: '4', name: 'j', age: '23', createAt: '2017-05-01T03:01:00.000-08:00' }
  ]}
  schema={{
    id: { label: 'id' },
    name: { label: 'Name' },
    age: {
      label: 'Age',
      sortType: 'number',
      render: value => {
        if (value < '32') {
          return (
            <div>
              <Button theme="secondary">Save {`${value} years`}</Button>
            </div>
          )
        }
        return (
          <div>
            <Button theme="primary">Save {`${value} years`}</Button>
          </div>
        )
      }
    },
    createdAt: {
      label: 'Created',
      sortType: 'date',
      render: (value, id, key) => <DateRenderer value={value} />
    },
    selected: {
      label: 'Selected',
      sortType: 'boolean',
      render: (value, id, key) => (
        <input
          type="checkbox"
          checked={value}
          onChange={e => console.log(value, id, key)}
          name="name"
        />
      )
    }
  }}
/>

Redux Integration

If the props 'order' or 'sortBy' are passed in as props these props take precedent over the local state versions. This means that the sortable table can be used as a controlled or a uncontrolled component.

undocumented - Coming soon