Table (таблица)

Таблицы отображают наборы данных. Они могут быть полностью модифицированы.

Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. Они могут быть встроены в основной контент, например в карточки.

Таблицы могу включать в себя:

• Соответствующую визуализацию
• Навигацию
• Инструменты для запросов и манипулирования данными

При использовании таких инструментов их следует размещать непосредственно сверху или снизу таблицы.

Структура

Простой пример без излишеств.

Таблица данных содержит 1 строку заголовка, в которой перечислены имена столбцов, за которыми следуют строки для данных.

Сортировка и выбор строк

The Table component has a close mapping to the native <table> elements. This constraint makes building rich data tables challenging.

The DataGrid component is designed for use-cases that are focused around handling a large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features.

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  checkboxSelection
  disableSelectionOnClick
/>

Простая таблица

Флажки должны сопровождать каждую строку, если пользователю необходимо выбрать или манипулировать данными.

Плотная компоновка таблицы

В этом примере демонстрируется использование чекбокса и кликабельных строк для выбора данных в настраиваемой панели инструментов. Здесь используется компонент TableSortLabel чтобы помочь стилизовать заголовки столбцов.

Таблица имеет фиксированную ширину для демонстрации горизонтальной прокрутки. Чтобы предотвратить прокрутку элементов управления нумерацией страниц, компонент TablePagination находится за пределами таблицы. (В примерe «собственные действия элементов нумерации» ниже показывается управление нумерацией таблиц с помощью TableFooter.)

Настраиваемые таблицы

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

Пользовательские параметры разбивки на страницы

Возможна настройка параметров, отображаемых в "Строках на странице", используя rowsPerPageOptions prop. You should either provide an array of:

• numbers, each number will be used for the option's label and value.

  <TablePagination rowsPerPageOptions={[10, 50]} />

• objects, the value and label keys will be used respectively for the value and label of the option (useful for language strings such as 'All').

  <TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />

Пользовательские действия разбивки на страницы

The ActionsComponent prop of the TablePagination component allows the implementation of custom actions.

Фиксированный заголовок

Пример таблицы с прокручиваемыми строками и фиксированными заголовками столбцов. It leverages the stickyHeader prop (⚠️ no IE 11 support).

Collapsible table

An example of a table with expandable rows, revealing more information. It utilizes the Collapse component.

Объединение таблиц

Простой пример с объединением строк и столбцов.

Виртуализированная таблица

В следующем примере мы покажем, как использовать react-virtualized с компонентом Table. Он отображает 200 строк и c легкостью может еще больше. Virtualization helps with performance issues.

Доступность

(WAI tutorial: https://www.w3.org/WAI/tutorials/tables/)

Caption

A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it.

API

• <Table />
• <TableBody />
• <TableCell />
• <TableContainer />
• <TableFooter />
• <TableHead />
• <TablePagination />
• <TableRow />
• <TableSortLabel />