Client-side Excel export#

npm install xlsx file-saver
npm install -D @types/file-saver

// src/utils/ExcelExport.ts
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

export interface ExportColumn {
  key:   string;     // attribute name on the row object
  label: string;     // column header in the workbook
}

export function exportToExcel(
  rows:     Record<string, any>[],
  columns:  ExportColumn[],
  fileName: string = 'export',
  options?: { sheetName?: string; includeTotal?: string[] }
) {
  // Map rows to labelled columns
  const data = rows.map(row =>
    Object.fromEntries(columns.map(c => [c.label, row[c.key] ?? '']))
  );

  // Optional total row
  if (options?.includeTotal) {
    const totals: Record<string, any> = {};
    columns.forEach(c => {
      if (options.includeTotal!.includes(c.key)) {
        totals[c.label] = rows.reduce(
          (sum, r) => sum + (Number(r[c.key]) || 0), 0
        );
      } else {
        totals[c.label] = c === columns[0] ? 'TOTAL' : '';
      }
    });
    data.push(totals);
  }

  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, options?.sheetName ?? 'Sheet1');
  const buf = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  saveAs(new Blob([buf], { type: 'application/octet-stream' }), `${fileName}.xlsx`);
}

import { exportToExcel, type ExportColumn } from '../../utils/ExcelExport';

const exportColumns: ExportColumn[] = [
  { key: 'loginName',      label: 'Email' },
  { key: 'firstName',      label: 'First Name' },
  { key: 'lastName',       label: 'Last Name' },
  { key: 'departmentCode', label: 'Department' },
  { key: 'status',         label: 'Status' },
];

// Inside your custom DataGridControls:
const handleExport = () => {
  const rows = o.queryRef?.current?.getCurrentData() ?? [];
  exportToExcel(rows, exportColumns, 'employees', {
    sheetName: 'Employees',
  });
};

<Button onClick={handleExport}>Export Excel</Button>