Figma

Таблица

import { Table, TableHead, TableBody, TableTh, TableTd, TableTr, TableSettings, TableTooltip } from '@megafon/ui-lk-vas';
import { Checkbox, InfoBadge } 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>
                      <InfoBadge theme="green">Активно</InfoBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd>
                      <InfoBadge theme="red">Услуга заблокирована</InfoBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <InfoBadge theme="orange">2 дня пробного периода</InfoBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <InfoBadge theme="purple">120 рублей в месяц</InfoBadge>
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <InfoBadge theme="grey">120 рублей в месяц</InfoBadge>
                  </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={<InfoBadge theme="green">Активно</InfoBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="red">Услуга заблокирована</InfoBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="orange">2 дня пробного периода</InfoBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="purple">120 рублей в месяц</InfoBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="grey">120 рублей в месяц</InfoBadge>} {...tooltip} />
                  </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="green">Дополнительный контент в тултипе</InfoBadge>} {...tooltip}>
                          <span>Дополнительный контент</span>
                      </TableTooltip>
                  </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="56px">
                      <Checkbox disableBottomMargin />
                  </TableTh>
                  <TableTh>Title</TableTh>
                  <TableTh>Title</TableTh>
                  <TableTh width="48px" />
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox disableBottomMargin />
                  </TableTd>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd> 30.03.2016</TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox disableBottomMargin />
                  </TableTd>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd> 30.03.2016 </TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox disableBottomMargin />
                  </TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox disableBottomMargin />
                  </TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>30.03.2016</TableTd>
                  <TableTd>
                      <TableSettings items={settingsItems} />
                  </TableTd>
              </TableTr>
              <TableTr>
                  <TableTd pinned>
                      <Checkbox disableBottomMargin />
                  </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 isSortActive currentSortType="down" infoTooltip={{...tooltip, additionalContent: 'Дополнительный контент'}} onSort={(type) => {}}>Title</TableTh>
                  <TableTh showSorting onSort={(type) => {}}>Title</TableTh>
              </TableTr>
          </TableHead>
          <TableBody>
              <TableTr>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd isSortActive> 30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd isSortActive> 30.03.2016 </TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd isSortActive>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd isSortActive>30.03.2016</TableTd>
                  <TableTd>12345</TableTd>
              </TableTr>
              <TableTr>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd isSortActive>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 disableBottomMargin />
                  </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 disableBottomMargin />
                  </TableTd>
                  <TableTd>12345</TableTd>
                  <TableTd>Константинопольский Константин Константинович</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="green">Активно</InfoBadge>} {...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 disableBottomMargin />
                  </TableTd>
                  <TableTd>12346</TableTd>
                  <TableTd>Сидорова Ольга Петровна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="red">Услуга заблокирована</InfoBadge>} {...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 disableBottomMargin />
                  </TableTd>
                  <TableTd>12347</TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="orange">2 дня пробного периода</InfoBadge>} {...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 disableBottomMargin />
                  </TableTd>
                  <TableTd>12347</TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="purple">120 рублей в месяц</InfoBadge>} {...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 disableBottomMargin />
                  </TableTd>
                  <TableTd>12347</TableTd>
                  <TableTd>Восьмиглазова Татьяна Игоревна</TableTd>
                  <TableTd>
                      <TableTooltip trigger={<InfoBadge theme="grey">120 рублей в месяц</InfoBadge>} {...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>

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

Показать код

      <Table height="200px">
          <TableHead>
              <TableTr>
                  <TableTh minWidth="700px">Title</TableTh>
                  <TableTh minWidth="700px">Title</TableTh>
                  <TableTh minWidth="100px">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>
                              <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

Prop nameTypeDefaultDescription
classNamestring | undefinedДополнительный класс корневого элемента
heightstring | undefinedВысота таблицы
dataAttrs{ root?: Record<string, string> | undefined; inner?: Record<string, string> | undefined; } | undefinedДополнительные data атрибуты к внутренним элементам

TableTh

Prop nameTypeDefaultDescription
classNamestring | undefinedДополнительный класс корневого элемента
pinnedboolean | undefinedФиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке)
showSortingboolean | undefinedfalseПоказать элементы сортировки
isSortActiveboolean | undefinedfalseСделать активной отсортированную ячейку
currentSortTypeSortType | undefinedupТекущий тип сортировки
minWidthstring | undefinedМинимальная ширина ячейки
widthstring | undefinedШирина ячейки
infoTooltipITooltip | undefinedИнформационная иконка с тултипом
onSort((type: SortType) => void) | undefinedОбработчик клика по элементам сортировки
dataAttrs{ root?: Record<string, string> | undefined; sortingUp?: Record<string, string> | undefined; sortingDown?: Record<string, string> | undefined; } | undefinedДополнительные data атрибуты к внутренним элементам
interface ITooltip {
    /** Заголовок тултипа */
    title: string;
    /** Текст тултипа */
    text?: string;
    /** Текст кнопки тултипа */
    buttonText?: string;
    /** Отобразить кнопку закрытия тултипа */
    hasCloseButton?: boolean;
    /** Дополнительный контент */
    additionalContent?: React.ReactNode;
    /** Обработчик клика по кнопке тултипа */
    onButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
    /** Обработчик клика по кнопке закрытия тултипа */
    onCloseButtonClick?: (e: React.SyntheticEvent<EventTarget, Event>) => void;
}


type SortType = 'up' | 'down';

TableTd

Prop nameTypeDefaultDescription
classNamestring | undefinedДополнительный класс корневого элемента
colSpannumber | undefinedАтрибут colSpan для тега td
pinnedboolean | undefinedФиксация ячейки во время горизонтальной прокрутки (только для первой и последней ячейки в строке)
isSortActiveboolean | undefinedfalseСделать активной отсортированную ячейку
dataAttrs{ root?: Record<string, string> | undefined; } | undefinedДополнительные data атрибуты к внутренним элементам

TableSettings

Prop nameTypeDefaultDescription
classNamestring | undefinedДополнительный класс корневого элемента
items*ItemType[]Пункты всплывающего списка
classes{ root?: string | undefined; tooltip?: string | undefined; } | undefinedДополнительные классы для внутренних элементов
dataAttrs{ root?: Record<string, string> | undefined; dots?: Record<string, string> | undefined; tooltip?: Record<string, string> | undefined; item?: Record<string, string> | undefined; } | undefinedДополнительные data атрибуты к внутренним элементам
export type ClickParamsType = {
    /** id */
    id: string | number;
    /** Заголовок */
    title: string;
};


export type ItemType = {
    /** id */
    id: string | number;
    /** Заголовок */
    title: string;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Атрибут ссылки rel */
    rel?: string;
    /** Обработчик клика */
    onClick?: (params: ClickParamsType) => void;
    /** Функция рендера компонента-обертки */
    renderWrapper?: (node: React.ReactNode) => React.ReactNode;
};

TableTooltip

Prop nameTypeDefaultDescription
classNamestring | undefinedДополнительный класс корневого элемента
trigger*ReactNodeКомпонент-триггер
title*stringЗаголовок
textstring | undefinedТекст
buttonTextstring | undefinedТекст кнопки
hasCloseButtonboolean | undefinedОтобразить кнопку закрытия
classes{ root?: string | undefined; tooltip?: string | undefined; } | undefinedДополнительные классы для внутренних элементов
onButtonClick((e: SyntheticEvent<EventTarget, Event>) => void) | undefinedОбработчик клика по кнопке
onCloseButtonClick((e: SyntheticEvent<EventTarget, Event>) => void) | undefinedОбработчик клика по кнопке закрытия