Перейти к контенту

Table (tаблица)

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

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

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

Структура

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

Таблица данных содержит 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.

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

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

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

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

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

Nutrition
Dessert (100g serving)Caloriessorted ascendingFat (g)Carbs (g)Protein (g)

Строк на странице:

5

1-5 из 13

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

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.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 yoghurt1596
Ice cream sandwich2379
Eclair26216
Cupcake3053.7
Marshmallow3180

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

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

NameISO CodePopulationSize (km²)Density

Строк на странице:

10

1-10 из 15

Column grouping

You can group column headers by rendering multiple table rows inside a table head:

<TableHead>
  <TableRow />
  <TableRow />
</TableHead>
CountryDetails
NameISO CodePopulationSize (km²)Density

Строк на странице:

10

1-10 из 15

Collapsible table

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

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

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

DetailsPrice
DescQty.UnitSum
Paperclips (Box)1001.15115.00
Paper (Case)1045.99459.90
Waste Basket217.9935.98
Subtotal610.88
Tax7 %42.76
Total653.64

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

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

Dessert
Calories (g)
Fat (g)
Carbs (g)
Protein (g)

Доступность

(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)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246