Figma

Таблица

import { Table, TableHead, TableBody, TableTh, TableTd, TableTr, TableSettings, TableTooltip } from '@megafon/ui-lk-vas';
import { Checkbox, PriceBadge } from '@megafon/ui-core';

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


      <Table
      >
          <TableHead>
              <TableTr>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd> 30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd> 30.03.2016 </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
          </TableBody>
      </Table>

Бейджи без тултипов


      <Table
      >
          <TableHead>
              <TableTr>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd>
                      <PriceBadge theme="green">Активно</PriceBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd>
                      <PriceBadge theme="red">Услуга заблокирована</PriceBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <PriceBadge theme="orange">2 дня пробного периода</PriceBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <PriceBadge theme="purple">120 рублей в месяц</PriceBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <PriceBadge theme="grey">120 рублей в месяц</PriceBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
          </TableBody>
      </Table>

Бэейджи с тултипами

Демо данные
const tooltip = {
    title: 'Заголовок',
    text: 'Подробная информация',
    buttonText: 'Перейти',
    hasCloseButton: true,
    onButtonClick: () => undefined,
    onCloseButtonClick: () => undefined,
};

      <Table
      >
          <TableHead>
              <TableTr>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="green">Активно</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="red">Услуга заблокирована</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="orange">2 дня пробного периода</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="purple">120 рублей в месяц</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="grey">120 рублей в месяц</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
          </TableBody>
      </Table>

Настройки

Демо данные
const settingsItems = [
    {
        id: 1,
        title: 'Добавить клиентов',
        onClick: () => undefined,
    },
    {
        id: 2,
        title: 'Скачать группу клиентов',
        onClick: () => undefined,
    },
    {
        id: 3,
        title: 'Редактировать',
        onClick: () => undefined,
    },
    {
        id: 4,
        title: 'Удалить',
        onClick: () => undefined,
    },
];

      <Table
      >
          <TableHead>
              <TableTr>
                  <TableTh width="76px">
                      <Checkbox />
                  </TableTh>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
                  <TableTh width="48px" />
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd> 30.03.2016</TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd> 30.03.2016 </TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
          </TableBody>
      </Table>

Нотификация и сортировка

Демо данные
const tooltip = {
    title: 'Заголовок',
    text: 'Подробная информация',
    buttonText: 'Перейти',
    hasCloseButton: true,
    onButtonClick: () => undefined,
    onCloseButtonClick: () => undefined,
};

      <Table
      >
          <TableHead>
              <TableTr>
                  <TableTh showSorting infoTooltip={tooltip} onSort={(type) => {}}>Title</TableTh>
                  <TableTh showSorting infoTooltip={tooltip} onSort={(type) => {}}>Title</TableTh>
                  <TableTh showSorting onSort={(type) => {}}>Title</TableTh>
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd> 30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd> 30.03.2016 </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
          </TableBody>
      </Table>

Управление шириной колонок


      <Table
      >
          <TableHead>
              <TableTr>
                  <TableTh minWidth="300px" width="400px">Title</TableTh>
                  <TableTh minWidth="200px" width="300px">Title</TableTh>
                  <TableTh minWidth="150px">Title</TableTh>
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd> 30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd> 30.03.2016 </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
          </TableBody>
      </Table>

Горизонтальная прокрутка и фиксированные колонки


      <Table
      >
          <TableHead>
              <TableTr>
                  <TableTh pinned width="76px">
                      <Checkbox />
                  </TableTh>
                  <TableTh width="79px">Title</TableTh>
                  <TableTh minWidth="274px" width="274px" onSort={(type) => {}}>Title</TableTh>
                  <TableTh minWidth="200px" width="200px">Title</TableTh>
                  <TableTh width="185px">Title</TableTh>
                  <TableTh minWidth="122px" width="185px">Title</TableTh>
                  <TableTh minWidth="164px" width="185px">Title</TableTh>
                  <TableTh width="185px">Title</TableTh>
                  <TableTh minWidth="174px" width="185px">Title</TableTh>
                  <TableTh minWidth="122px" width="185px">Title</TableTh>
                  <TableTh minWidth="174px" width="185px">Title</TableTh>
                  <TableTh pinned width="48px" />
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>12345</TableTd>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="green">Активно</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>Россия</TableTd>
                  <TableTd>22 16 609897</TableTd>
                  <TableTd>УФМС по г. Москва</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd>22 16 609897</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd pinned>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>12346</TableTd>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="red">Услуга заблокирована</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>Россия</TableTd>
                  <TableTd>45 67 654738</TableTd>
                  <TableTd>УФМС по г. Москва</TableTd>
                  <TableTd>20.09.2017</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd>45 67 654738</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd pinned>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>12347</TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="orange">2 дня пробного периода</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>Россия</TableTd>
                  <TableTd>15 67 647896</TableTd>
                  <TableTd>УФМС по г. Москва</TableTd>
                  <TableTd>21.12.2021</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd>15 67 647896</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd pinned>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>12347</TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="purple">120 рублей в месяц</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>Россия</TableTd>
                  <TableTd>15 67 647896</TableTd>
                  <TableTd>УФМС по г. Москва</TableTd>
                  <TableTd>21.12.2021</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd>15 67 647896</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd pinned>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox />
                  </TableTd>
                  <TableTd>12347</TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<PriceBadge theme="grey">120 рублей в месяц</PriceBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>Россия</TableTd>
                  <TableTd>15 67 647896</TableTd>
                  <TableTd>УФМС по г. Москва</TableTd>
                  <TableTd>21.12.2021</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd>15 67 647896</TableTd>
                  <TableTd>+7 (900)-000-00-00</TableTd>
                  <TableTd pinned>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
          </TableBody>
      </Table>