Сортировка данных в таблицах

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

Подключение DataGrid Для использования DataGrid необходимо установить пакет @mui/x-data-grid:

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

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

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

export default function BasicDataGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
}

Включение сортировки По умолчанию столбцы DataGrid поддерживают сортировку при клике на заголовок. Для включения или управления сортировкой используется свойство sortable в описании столбца:

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

Можно задать сортировку по умолчанию с помощью sortModel:

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  sortModel={[
    {
      field: 'age',
      sort: 'asc', // или 'desc'
    },
  ]}
/>

Многоуровневая сортировка MUI DataGrid поддерживает сортировку по нескольким столбцам одновременно. Для этого в sortModel добавляются несколько объектов:

sortModel={[
  { field: 'name', sort: 'asc' },
  { field: 'age', sort: 'desc' },
]}

Пользователь также может удерживать клавишу Shift и кликать по заголовкам столбцов, чтобы изменить порядок сортировки по нескольким колонкам динамически.

Сортировка кастомной функции Если данные не могут быть отсортированы стандартным образом (например, сложные объекты или строки с числами), можно использовать свойство sortComparator:

const columns = [
  {
    field: 'name',
    headerName: 'Имя',
    width: 200,
    sortComparator: (v1, v2, param1, param2) => v1.localeCompare(v2),
  },
  {
    field: 'age',
    headerName: 'Возраст',
    type: 'number',
    width: 130,
    sortComparator: (v1, v2) => v1 - v2,
  },
];

События сортировки Для отслеживания изменений сортировки используется событие onSortModelChange:

const handleSortChange = (sortModel) => {
  console.log('Текущая сортировка:', sortModel);
};

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  onSortModelCha nge={handleSortChange}
/>

Это позволяет синхронизировать состояние сортировки с сервером или локальным состоянием приложения.

Серверная сортировка При работе с большим количеством данных часто используется серверная сортировка. Для этого нужно отключить внутреннюю сортировку (disableColumnSort) и вручную изменять данные при изменении sortModel:

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={10}
  sortingMode="server"
  onSortModelCha nge={(model) => fetchSortedData(model)}
/>

Функция fetchSortedData выполняет запрос к API с параметрами сортировки и обновляет rows.

Настройка внешнего вида заголовков Для улучшения UX заголовки сортируемых столбцов можно стилизовать через componentsProps или sx:

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  sx={{
    '& .MuiDataGrid-columnHeaderTitleContainer': {
      justifyContent: 'center',
    },
    '& .MuiDataGrid-columnHeader': {
      backgroundColor: '#f0f0f0',
    },
  }}
/>

Итоговые рекомендации

  • Для большинства проектов достаточно стандартного поведения сортировки DataGrid.
  • Кастомные функции сортировки полезны для специфических форматов данных.
  • Серверная сортировка необходима при работе с большими массивами данных.
  • Использование sortModel позволяет задавать начальную сортировку и синхронизировать состояние таблицы с внешними источниками данных.

С таким набором инструментов сортировка в таблицах MUI становится гибкой и масштабируемой, позволяя эффективно управлять данными как на клиентской, так и на серверной стороне.

Оглавление