Table

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

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

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

Интернет-опция

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Интернет XS

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

Интернет XL

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

Интернет-опция

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Интернет XS

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

Интернет XL

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

<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>

<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

Интернет-опция	Да	Нет
Интернет XS	+	-
Интернет XL	-	+

<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 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>

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

Интернет-опция

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Объем трафика

Стоимость

Интернет XS

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

10 ГБ днём + 10 ГБ ночью

420 ₽

<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 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>

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

Преимущества тарифа	Интернет	Безлимит на мессенджеры	Безлимит на банковские приложения	Безлимит на почтовые сервисы	Безлимит на сервисы навигации	Безлимит на госсервисы
Управляй! Эксперт	20 ГБ	+	+	+	+	+

<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>

<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

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

<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>

<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>