Экспорт данных

Библиотека MUI (Material-UI) предоставляет широкий спектр компонентов и инструментов для работы с таблицами и списками данных. Один из ключевых аспектов работы с данными — их экспорт в различные форматы для дальнейшей обработки или отчетности. Рассмотрим основные подходы и практические реализации.

Основные форматы экспорта

  1. CSV (Comma-Separated Values) Формат CSV является самым популярным для обмена табличными данными. MUI не предоставляет встроенного механизма экспорта, поэтому обычно применяются сторонние библиотеки или ручная генерация CSV.

    Пример ручного экспорта таблицы DataGrid в CSV:

    import { GridRowsProp, GridColDef } from '@mui/x-data-grid';

const exportToCsv = (rows, columns) => {
  const header = columns.map(col => col.headerName).join(',');
  const data = rows.map(row =>
    columns.map(col => row[col.field]).join(',')
  ).join('\n');
  const csvContent = [header, data].join('\n');

  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.setAttribute('download', 'export.csv');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

    В этом примере ключевые моменты:

    • Формирование заголовка через headerName колонок
    • Составление строк данных по полям field
    • Создание Blob и динамическая генерация ссылки для скачивания

  2. Excel (XLSX) Для экспорта в Excel часто используется библиотека SheetJS (xlsx). Она позволяет создавать рабочие книги, добавлять листы и настраивать форматирование ячеек.

    Пример экспорта DataGrid в Excel:

    import * as XLSX from 'xlsx';

const exportToExcel = (rows, columns) => {
  const worksheet = XLSX.utils.json_to_sheet(
    rows.map(row => {
      const formattedRow = {};
      columns.forEach(col => {
        formattedRow[col.headerName] = row[col.field];
      });
      return formattedRow;
    })
  );
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Data');
  XLSX.writeFile(workbook, 'export.xlsx');
};

    Особенности реализации:

    • Преобразование объектов данных в формат JSON для SheetJS
    • Настройка заголовков через headerName
    • Возможность добавления нескольких листов и форматирования данных

Интеграция с MUI DataGrid

MUI DataGrid и DataGridPro предоставляют API для работы с выборкой данных, что облегчает экспорт. Основные методы:

  • apiRef.current.getRowModels() — возвращает все строки таблицы в виде карты
  • apiRef.current.getVisibleColumns() — возвращает колонки, видимые в текущем представлении

Пример экспорта видимых данных DataGrid:

import { useGridApiRef } from '@mui/x-data-grid';

const apiRef = useGridApiRef();

const handleExport = () => {
  const rows = Array.from(apiRef.current.getRowModels().values());
  const columns = apiRef.current.getVisibleColumns();
  exportToCsv(rows, columns);
};

Особенности:

  • Учитываются только видимые колонки, что удобно для динамических фильтров
  • Можно комбинировать с сортировкой и пагинацией DataGrid
  • Обеспечивает корректную обработку вложенных объектов и пользовательских рендереров через valueGetter

Формат JSON и интеграция с API

Для приложений с серверной логикой часто требуется экспорт данных в формате JSON для последующей отправки на сервер или хранения:

const exportToJson = (rows) => {
  const jsonContent = JSON.stringify(rows, null, 2);
  const blob = new Blob([jsonContent], { type: 'application/json' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.setAttribute('download', 'export.json');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

Ключевые моменты:

  • Красивое форматирование JSON через JSON.stringify с отступами
  • Прямое скачивание файла без серверной обработки
  • Удобно для сохранения состояния таблицы и передачи на другие сервисы

Настройка пользовательских форматов и шаблонов

MUI позволяет интегрировать кастомные рендереры и комбинировать экспорт с форматированием:

  • Форматирование чисел и дат: использовать valueFormatter или собственные функции при формировании CSV/Excel
  • Скрытие/показ колонок: использовать columnVisibilityModel
  • Фильтрация строк перед экспортом: apiRef.current.getFilteredRowModels()

Пример с учетом форматирования дат и валют:

const formattedRows = rows.map(row => ({
  Name: row.name,
  Date: new Date(row.date).toLocaleDateString(),
  Salary: `$${row.salary.toFixed(2)}`
}));
exportToCsv(formattedRows, columns);

Рекомендации по оптимизации

  1. Большие объемы данных — использовать стриминг или серверный экспорт, чтобы не блокировать UI.
  2. Поддержка нескольких форматов — создать универсальный обработчик, который принимает тип экспорта (csv, xlsx, json) и данные.
  3. Интеграция с пользовательским интерфейсом — кнопки экспорта должны быть легко доступны и учитывать текущие фильтры/сортировки DataGrid.
  4. Кроссбраузерность — проверять работу Blob и ссылок на старых версиях браузеров, при необходимости использовать полифиллы.

Экспорт данных в MUI — это комбинация правильного использования API DataGrid, генерации файлов на клиенте и интеграции сторонних библиотек для форматов, таких как CSV и Excel. Правильная организация экспорта позволяет создавать гибкие, масштабируемые и удобные для пользователей интерфейсы с таблицами и отчетами.

Оглавление