图表

围绕 React Table 的主题包装器 https://github.com/tannerlinsley/ react-table 页面存档备份,存于互联网档案馆

何时使用此组件

当您需要由结构化数据驱动的表格时

安装

yarn add @berlitz/table

道具

数据和列结构的反应表见文件

使用量

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(),
    }))}
  />
)