Table

A themed wrapper around React Table https://github.com/tannerlinsley/react-table

When to use this component

When you need a table which is driven by structured data

Installation

yarn add @berlitz/table

Props

See docs for react-table for data and column structures

| Prop | Type | Required | Default | Description | | ----------- | ------- | -------- | ------- | ------------------------------------- | | paginated | boolean | | | should this table be paginated | | rowsPerPage | number | | 16 | number of rows per page, if paginated |

Usage

import Table from '@berlitz/table'
const MyApp = () => (
  <Table
    columns={[
      {
        Header: 'First Name',
        accessor: 'firstName',
      },
      {
        Header: 'Last Name',
        accessor: 'lastName',
      },
      {
        Header: 'Email',
        accessor: 'email',
      },
      {
        Header: 'Order ID',
        accessor: 'orderId',
      },
    ]}
    data={[...Array(10).keys()].map(() => ({
      firstName: faker.name.firstName(),
      lastName: faker.name.lastName(),
      email: faker.internet.email(),
      orderId: faker.random.uuid(),
    }))}
  />
)