Table

import { Table, TableRow, TableCell } from '@megafon/ui-shared';

Примеры и код
Свойства и методы

Базовое использование

<Table>
      <TableRow head>
          <TableCell>Интернет-опция</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XS</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XL</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
      </TableRow>
          <TableRow head>
          <TableCell>Интернет-опция</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XS</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XL</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
      </TableRow>
  </Table>

Минимальный размер ячеек - small

<Table minCellSize="small">
      <TableRow head>
          <TableCell>Интернет-опция</TableCell>
          <TableCell>Да</TableCell>
          <TableCell>Нет</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XS</TableCell>
          <TableCell>+</TableCell>
          <TableCell>-</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XL</TableCell>
          <TableCell>-</TableCell>
          <TableCell>+</TableCell>
      </TableRow>
  </Table>

Отключена фиксация первой колонки

<Table fixColumn={false}>
      <TableRow head>
          <TableCell>Интернет-опция</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XS</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
          <TableCell>10 ГБ днём + 10 ГБ ночью</TableCell>
          <TableCell>420 ₽</TableCell>
      </TableRow>
  </Table>

Выравнивание по вертикали в ячейках таблицы

<Table>
      <TableRow head vAlign="top">
          <TableCell>Преимущества тарифа</TableCell>
          <TableCell>Интернет</TableCell>
          <TableCell>Безлимит на мессенджеры</TableCell>
          <TableCell>Безлимит на банковские приложения</TableCell>
          <TableCell>Безлимит на почтовые сервисы</TableCell>
          <TableCell>Безлимит на сервисы навигации</TableCell>
          <TableCell>Безлимит на госсервисы</TableCell>
      </TableRow>
      <TableRow vAlign="bottom">
          <TableCell>Управляй! Эксперт</TableCell>
          <TableCell>20 ГБ</TableCell>
          <TableCell>+</TableCell>
          <TableCell>+</TableCell>
          <TableCell>+</TableCell>
          <TableCell>+</TableCell>
          <TableCell>+</TableCell>
      </TableRow>
  </Table>

Отключить ограничение по высоте при разрешении больше 1024px

<Table disableHeightLimit>
      <TableRow head>
          <TableCell>Интернет-опция</TableCell>
          <TableCell>Объем трафика</TableCell>
          <TableCell>Стоимость</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XS</TableCell>
          <TableCell>10 ГБ</TableCell>
          <TableCell>100 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет S</TableCell>
          <TableCell>20 ГБ</TableCell>
          <TableCell>200 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет M</TableCell>
          <TableCell>30 ГБ</TableCell>
          <TableCell>300 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет L</TableCell>
          <TableCell>40 ГБ</TableCell>
          <TableCell>400 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XL</TableCell>
          <TableCell>50 ГБ</TableCell>
          <TableCell>500 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XXL</TableCell>
          <TableCell>60 ГБ</TableCell>
          <TableCell>600 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XXL+</TableCell>
          <TableCell>70 ГБ</TableCell>
          <TableCell>700 ₽</TableCell>
      </TableRow>
      <TableRow>
          <TableCell>Интернет XXL++</TableCell>
          <TableCell>80 ГБ</TableCell>
          <TableCell>800 ₽</TableCell>
      </TableRow>
  </Table>