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

В библиотеке MUI (Material-UI) сортировка и фильтрация реализуются преимущественно через компоненты DataGrid, Table, а также через комбинацию состояний React и функций обработки массивов. Эти инструменты позволяют управлять отображением данных в таблицах и списках, обеспечивая гибкость и интерактивность интерфейсов.

Компонент DataGrid: встроенные возможности

Компонент DataGrid предоставляет встроенную поддержку сортировки и фильтрации без необходимости писать сложную логику вручную.

Сортировка

Сортировка включается через свойство sortable в столбцах:

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Имя', width: 150, sortable: true },
  { field: 'age', headerName: 'Возраст', type: 'number', width: 110, sortable: true },
];

const rows = [
  { id: 1, name: 'Алексей', age: 35 },
  { id: 2, name: 'Мария', age: 28 },
  { id: 3, name: 'Иван', age: 42 },
];

export default function SortingExample() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}
  • sortable: true активирует сортировку по конкретному столбцу.
  • Можно управлять порядком сортировки через свойство sortModel:
<DataGrid
  rows={rows}
  columns={columns}
  sortModel={[{ field: 'age', sort: 'asc' }]}
/>

Фильтрация

Фильтрация в DataGrid поддерживается через встроенные фильтры столбцов или через API filterModel:

<DataGrid
  rows={rows}
  columns={columns}
  filterModel={{
    items: [{ columnField: 'age', operatorValue: '>=', value: '30' }],
  }}
/>
  • columnField — поле столбца для фильтрации.
  • operatorValue — оператор сравнения (=, !=, >, <, >=, <=, contains, startsWith и др.).
  • value — значение фильтра.

Можно комбинировать несколько фильтров, создавая массив объектов в items.

Пользовательская сортировка и фильтрация

Если требуется специфическая логика, DataGrid позволяет передавать функции для сортировки и фильтрации через sortComparator и кастомные фильтры.

Пример кастомного компаратора

const columns = [
  {
    field: 'name',
    headerName: 'Имя',
    width: 150,
    sortable: true,
    sortComparator: (v1, v2) => v1.localeCompare(v2, 'ru', { sensitivity: 'base' }),
  },
];
  • sortComparator позволяет реализовать сортировку с учетом локали, чувствительности к регистру и других особенностей.

Пример пользовательской фильтрации

function customFilter(rows, filterValue) {
  return rows.filter((row) => row.name.toLowerCase().includes(filterValue.toLowerCase()));
}
  • Использование состояния React для фильтрации:
const [filterText, setFilterText] = React.useState('');

const filteredRows = customFilter(rows, filterText);

<DataGrid rows={filteredRows} columns={columns} />

Таблицы MUI (Table) и сортировка

В компоненте Table сортировка и фильтрация не встроены, но реализуются через обработку данных перед рендером.

Сортировка

const [sortConfig, setSortConfig] = React.useState({ key: 'age', direction: 'asc' });

const sortedRows = [...rows].sort((a, b) => {
  if (a[sortConfig.key] < b[sortConfig.key]) return sortConfig.direction === 'asc' ? -1 : 1;
  if (a[sortConfig.key] > b[sortConfig.key]) return sortConfig.direction === 'asc' ? 1 : -1;
  return 0;
});
  • При клике на заголовок столбца можно менять sortConfig.direction для переключения между asc и desc.

Фильтрация

const [filterText, setFilterText] = React.useState('');

const filteredRows = rows.filter((row) => row.name.toLowerCase().includes(filterText.toLowerCase()));
  • filteredRows используется при рендере <TableBody>.

Интерактивные элементы для управления

Для управления сортировкой и фильтрацией удобно использовать компоненты MUI:

  • TextField — ввод текста для фильтрации.
  • Select / MenuItem — выбор типа фильтрации или столбца.
  • IconButton с иконками ArrowUpward / ArrowDownward для переключения направления сортировки.

Пример комбинированного управления:

<TextField
  label="Фильтр по имени"
  variant="outlined"
  size="small"
  value={filterText}
  onCha nge={(e) => setFilterText(e.target.value)}
/>
<IconButton onCl ick={toggleSortDirection}>
  {sortConfig.direction === 'asc' ? <ArrowUpward /> : <ArrowDownward />}
</IconButton>

Продвинутые возможности DataGrid Pro

  • Сложные фильтры с логикой «AND» / «OR».
  • Сортировка нескольких столбцов (multiSort).
  • Фильтры по диапазону для числовых и датовых значений.
  • Пользовательские панели фильтров с компонентами MUI (Slider, Checkbox, DatePicker).

Рекомендации по производительности

  • Для больших массивов данных использовать серверную сортировку и фильтрацию через server-side sorting и server-side filtering.
  • Использовать useMemo для мемоизации вычисленных списков.
  • Ограничивать рендеринг через pagination или virtualization (DataGrid поддерживает autoHeight и rowBuffer).

Итоговая структура реализации

  1. Определить исходные данные и колонки.
  2. Настроить встроенные свойства sortable и filterable в DataGrid.
  3. Добавить пользовательские функции sortComparator и кастомные фильтры при необходимости.
  4. Для Table использовать промежуточные состояния React для сортировки и фильтрации.
  5. Добавить интерфейс управления через MUI компоненты (TextField, Select, IconButton).
  6. При больших объёмах данных применять серверную обработку и виртуализацию.
Оглавление