@n3/react-table

Компоненты для создания таблиц для приложений на базе @n3/kit.

import {
  Table,
  Th,
  Td,
} from '@n3/react-table';

...

<Table>
  <thead>
    <tr>
      <Th rowSpan={2}>#</Th>
      <Th colSpan={2}>Name of person</Th>
      <Th rowSpan={2}>Username</Th>
    </tr>

    <tr>
      <Th>First Name</Th>
      <Th>Last Name</Th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <Td>1</Td>
      <Td>Mark</Td>
      <Td>Otto</Td>
      <Td>@mdo</Td>
    </tr>

    <tr>
      <Td>2</Td>
      <Td>Jacob</Td>
      <Td>Thornton</Td>
      <Td>@fat</Td>
    </tr>

    <tr>
      <Td>3</Td>
      <Td colSpan="2">Larry the Bird</Td>
      <Td>@twitter</Td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <Td>#</Td>
      <Td>First Name</Td>
      <Td>Last Name</Td>
      <Td>Username</Td>
    </tr>
  </tfoot>
</Table>

Props

Table

| Название | Обязательность | Тип | Значение по умолчанию | Описание | |----------|----------------|-----|-----------------------|----------| | lightenRow | | number | null | Номер строки, для которой применена подсветка |

Th/Td

| Название | Обязательность | Тип | Значение по умолчанию | Описание | |----------|----------------|-----|-----------------------|----------| | className | | string | '' | | | isMinWidth | | bool | false | Добавить width: 1px для рендера узких колонок (иконкий действий и т.п.) | | isNowrap | | bool | false | Добавить white-space: nowrap | | hasWordBreak | | bool | false | Добавить свойства для разбиения строк в случае переполнения | | textAlign | | enum- 'left'- 'right'- 'center' | 'left' | | | width | | union- string- number | null | |