Table

Компонент Table в Chakra UI используется для отображения табличных данных с гибкой кастомизацией внешнего вида, адаптивностью и поддержкой различных тем оформления. Основой работы с таблицами является комбинация нескольких компонентов: Table, Thead, Tbody, Tr, Th, Td и TableCaption.

import { Table, Thead, Tbody, Tr, Th, Td, TableCaption } from '@chakra-ui/react';

<Table variant="simple">
  <TableCaption>Пример простой таблицы</TableCaption>
  <Thead>
    <Tr>
      <Th>Имя</Th>
      <Th>Возраст</Th>
      <Th>Город</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>Алексей</Td>
      <Td>28</Td>
      <Td>Москва</Td>
    </Tr>
    <Tr>
      <Td>Мария</Td>
      <Td>25</Td>
      <Td>Санкт-Петербург</Td>
    </Tr>
  </Tbody>
</Table>

Варианты оформления таблиц

Chakra UI предоставляет несколько вариантов отображения таблиц через проп variant:

  • simple – минималистичная таблица без границ между строками.
  • striped – чередующиеся полосы для улучшенной читаемости.
  • unstyled – полностью без стилей, полезно для кастомной стилизации.
  • outline – таблица с внешней рамкой.
<Table variant="striped" colorScheme="teal">
  ...
</Table>

Проп colorScheme позволяет задать цветовую тему для полос (striped) или других элементов таблицы.

Управление размером и пространством

С помощью пропа size можно управлять высотой строк и размером текста:

  • sm – компактная таблица.
  • md – стандартная таблица.
  • lg – увеличенные строки и текст.
<Table size="sm">
  ...
</Table>

Для управления шириной столбцов и адаптивностью используют стандартные CSS-свойства или системные пропсы Chakra (w, minW, maxW).

Добавление интерактивности

Chakra UI позволяет легко добавлять интерактивные элементы внутри таблицы:

  • Кнопки, чекбоксы, переключатели в ячейках.
  • Наведение на строку с подсветкой (_hover).
  • Сортировка столбцов через внешние обработчики событий.
<Tr _hover={{ bg: "gray.100" }}>
  <Td>
    <Checkbox />
  </Td>
  <Td>Иван</Td>
  <Td>32</Td>
</Tr>

Стили для состояний (_hover, _selected) можно задавать как на строках (Tr), так и на отдельных ячейках (Td).

Sticky заголовки и прокрутка

Для больших таблиц удобно закреплять заголовок:

<Box overflowX="auto">
  <Table variant="simple">
    <Thead position="sticky" top={0} bg="gray.50" zIndex={1}>
      <Tr>
        <Th>Имя</Th>
        <Th>Возраст</Th>
        <Th>Город</Th>
      </Tr>
    </Thead>
    <Tbody>
      ...
    </Tbody>
  </Table>
</Box>

Использование обертки Box с overflowX="auto" позволяет горизонтально прокручивать таблицу на мобильных устройствах.

Сортировка и фильтрация данных

Chakra UI не предоставляет встроенной сортировки, но легко интегрируется с библиотеками управления состоянием, например, React Table или простыми обработчиками массивов:

const [data, setData] = useState(rows);

const sortByAge = () => {
  setData([...data].sort((a, b) => a.age - b.age));
};

<Button onCl ick={sortByAge}>Сортировать по возрасту</Button>

Таким образом, Chakra UI обеспечивает визуальную часть таблицы, а функциональность сортировки и фильтрации реализуется через стандартный React-подход.

Кастомизация и темы

Таблицы полностью интегрируются с темами Chakra UI, включая светлые и темные режимы:

<Table variant="striped" colorScheme="purple">
  ...
</Table>

Можно менять цвет фона строк, текст, границы и отступы через системные пропсы (bg, color, borderColor, p, px, py), а также создавать глобальные настройки через объект темы в extendTheme.

Закрепление и объединение ячеек

Для объединения ячеек используют стандартные свойства HTML:

  • colSpan – объединение по горизонтали.
  • rowSpan – объединение по вертикали.
<Tr>
  <Td rowSpan={2}>Объединено по вертикали</Td>
  <Td>Данные 1</Td>
</Tr>
<Tr>
  <Td>Данные 2</Td>
</Tr>

Это позволяет создавать сложные таблицы с группировкой данных.

Поддержка доступности (a11y)

Chakra UI автоматически добавляет базовые атрибуты для доступности:

  • scope="col" для заголовков столбцов.
  • scope="row" для заголовков строк.
  • Возможность использования aria-label и других ARIA-атрибутов для улучшения работы с экранными читалками.
<Th scope="col">Имя</Th>

Итоговое использование

Компонент Table в Chakra UI сочетает в себе:

  • Простую интеграцию и работу с React.
  • Легкую кастомизацию через пропсы и темы.
  • Поддержку адаптивности и доступности.
  • Возможность расширения функционала сортировкой, фильтрацией и интерактивными элементами.

Это делает его идеальным инструментом для создания современных таблиц в веб-приложениях на JavaScript.

Оглавление