Колонки и их типы

В библиотеке MUI (Material-UI) для построения таблиц и гридов активно используется компонент DataGrid и его расширение XGrid. Основу отображения данных в этих компонентах составляют колонки, каждая из которых описывает поле, способ его отображения, редактирования и взаимодействия с пользователем.

Колонки задаются через массив объектов columns, где каждый объект описывает отдельную колонку:

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: 'Имя', width: 200 },
  { field: 'age', headerName: 'Возраст', type: 'number', width: 100 },
];

Ключевые свойства колонки:

  • field – уникальный идентификатор колонки, соответствует ключу в данных (rows).
  • headerName – текст заголовка колонки.
  • width – ширина колонки в пикселях.
  • type – тип данных, влияющий на форматирование и сортировку.
  • editable – делает ячейки колонки редактируемыми.
  • sortable – включает или отключает возможность сортировки по колонке.
  • filterable – управляет возможностью фильтрации данных по колонке.

Типы колонок

MUI поддерживает несколько встроенных типов колонок, каждый из которых определяет, как данные будут отображаться и обрабатываться:

string

Используется для текстовых значений.

  • Сортировка выполняется по алфавиту.
  • Поддерживает базовое редактирование.
  • По умолчанию тип колонок без указания type считается string.
{ field: 'name', headerName: 'Имя', type: 'string', width: 200 }

number

Предназначен для числовых данных.

  • Встроенная сортировка по числовому значению.
  • Позволяет применять форматирование через valueFormatter.
{
  field: 'age',
  headerName: 'Возраст',
  type: 'number',
  width: 100,
  valueFormatter: (params) => `${params.value} лет`,
}

date и dateTime

Используются для работы с датами.

  • Форматирование даты выполняется через встроенные или кастомные функции.
  • Поддерживаются компоненты выбора даты при редактировании (DatePicker).
{
  field: 'createdAt',
  headerName: 'Дата создания',
  type: 'date',
  width: 180,
  valueFormatter: (params) => new Date(params.value).toLocaleDateString(),
}

boolean

Для логических значений (true/false).

  • В таблице отображается как чекбокс или текст.
  • Можно включить редактирование через чекбокс.
{ field: 'isActive', headerName: 'Активен', type: 'boolean', width: 120 }

singleSelect

Колонка с выбором одного значения из списка.

  • Используется для ограниченного набора вариантов.
  • Автоматически формирует фильтр по списку значений.
{
  field: 'role',
  headerName: 'Роль',
  type: 'singleSelect',
  valueOptions: ['Админ', 'Пользователь', 'Гость'],
  width: 150,
}

Форматирование и кастомизация колонок

valueFormatter и valueGetter

  • valueFormatter позволяет преобразовать значение перед отображением.
  • valueGetter вычисляет значение на основе других полей строки.
{
  field: 'fullName',
  headerName: 'ФИО',
  width: 200,
  valueGetter: (params) => `${params.row.firstName} ${params.row.lastName}`,
}

renderCell

Позволяет полностью контролировать отображение ячейки с использованием React-компонентов:

{
  field: 'status',
  headerName: 'Статус',
  width: 150,
  renderCell: (params) => (
    <span style={{ color: params.value === 'Активен' ? 'green' : 'red' }}>
      {params.value}
    </span>
  ),
}

Сортировка и фильтрация по типам колонок

Тип колонки определяет поведение встроенной сортировки и фильтрации:

  • string – сортировка по алфавиту, фильтр содержит/не содержит.
  • number – числовая сортировка, фильтр >, <, =.
  • date / dateTime – сортировка по времени, фильтр до/после даты.
  • boolean – фильтр по true/false.
  • singleSelect – фильтр по доступным значениям.

Настройка ширины и гибкости колонок

  • width – фиксированная ширина.
  • flex – динамическая ширина, пропорциональная другим колонкам с flex.
{ field: 'description', headerName: 'Описание', flex: 1 }
  • minWidth и maxWidth задают ограничения при использовании flex.
  • hide скрывает колонку без удаления из массива columns.

Колонки с редактируемыми и вычисляемыми данными

  • Редактируемые колонки используют свойство editable: true.
  • Вычисляемые колонки применяют valueGetter, что позволяет создавать колонки с агрегированными или комбинированными данными.
  • При редактировании важно синхронизировать данные с rows через обработчики событий onCellEditCommit или processRowUpdate.
<DataGrid
  rows={rows}
  columns={columns}
  processRowUpdate={(newRow) => ({ ...newRow, updatedAt: new Date() })}
/>

Эта структура и набор свойств колонок в MUI позволяют строить гибкие, интерактивные и типизированные таблицы, легко интегрируемые в сложные веб-приложения с богатой функциональностью фильтрации, сортировки и редактирования.

Оглавление