Table (tаблица)

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

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

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

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

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

Структура

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

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

Для доступности(accessibility) первый столбец должен быть элементом <th> с атрибутом scope со значением "row". Это позволяет программам чтения с экрана идентифицировать значение ячейки по имени строки и столбца.

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

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

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.9

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

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

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.9

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

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

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

Nutrition

Dessert (100g serving)	Caloriessorted ascending	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Marshmallow	318	0	81	2

Dense padding

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

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

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.9

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

Возможна настройка параметров, отображаемых в "Строках на странице", используя 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' }]} />
```

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

Свойство Action компонента TablePagination позволяет реализовать собственную обработку пользовательский событий.

Frozen yoghurt	159	6
Ice cream sandwich	237	9
Eclair	262	16
Cupcake	305	3.7
Marshmallow	318	0
Строк на странице: 1-5 из 13

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

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

Name	ISO Code	Population	Size (km²)	Density
India	IN	1,324,171,354	3,287,263	402.82
China	CN	1,403,500,365	9,596,961	146.24
Italy	IT	60,483,973	301,340	200.72
United States	US	327,167,434	9,833,520	33.27
Canada	CA	37,602,103	9,984,670	3.77
Australia	AU	25,475,400	7,692,024	3.31
Germany	DE	83,019,200	357,578	232.17
Ireland	IE	4,857,000	70,273	69.12
Mexico	MX	126,577,691	1,972,550	64.17
Japan	JP	126,317,000	377,973	334.20

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

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

Details			Price
Desc	Qty.	Unit	Sum
Paperclips (Box)	100	1.15	115.00
Paper (Case)	10	45.99	459.90
Waste Basket	2	17.99	35.98
	Subtotal		610.88
	Tax	7 %	42.76
	Total		653.64

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

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

Dessert

Calories (g)

Fat (g)

Carbs (g)

Protein (g)

Дополнительные проекты

Для более сложных вариантов использования вы можете воспользоваться:

material-table

npm downloads

material-table представляет собой простой и мощный объект DataTable для React на основе Material-UI Table с некоторыми дополнительными функциями. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.

Editable Example

Actions	Name	Surname	Birth Year	Birth Place
	Mehmet	Baran	1987	Şanlıurfa
	Zerya Betül	Baran	2017	İstanbul

Прочее

dx-react-grid-material-ui: A data grid for Material-UI with paging, sorting, filtering, grouping and editing features (paid license).
mui-datatables: Responsive data tables for Material-UI with filtering, sorting, search and more.
tubular-react: A Material-UI table with local or remote data-source. Featuring filtering, sorting, free-text search, export to CSV locally, and aggregations.

Доступность

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

A basic table example with a caption
Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6