Export

CSV Data Export

LyteNyte Grid enables you to export grid data directly to CSV format. This feature helps you quickly extract data snippets or the entire dataset currently visible in your grid.

Exporting To CSV

The LyteNyte Grid API provides the exportCsv method to export selected data or the entire rendered dataset. A common use case involves downloading the CSV as a file. LyteNyte Grid's API provides a convenience method called exportCsvFile that works like exportCsv but converts the CSV data to a downloadable file blob.

Export CSV

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome" },
  { id: "y" },
];
 
export function CSVExport() {
  const ds = useClientDataSource({
    data: bankDataSmall,
  });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <button
        onClick={async () => {
          downloadBlob(await grid.api.exportCsvFile(), "data.csv");
        }}
      >
        Download CSV
      </button>
      <button
        onClick={async () => {
          downloadBlob(
            await grid.api.exportCsvFile({ includeHeader: true }),
            "data.csv"
          );
        }}
      >
        Download CSV (with headers)
      </button>
      <button
        onClick={async () => {
          downloadBlob(
            await grid.api.exportCsvFile({ delimiter: ";" }),
            "data.csv"
          );
        }}
      >
        Download CSV (colon delimited)
      </button>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}
 
function downloadBlob(blob: Blob, name: string) {
  // Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)
  const blobUrl = URL.createObjectURL(blob);
 
  // Create a link element
  const link = document.createElement("a");
 
  // Set link's href to point to the Blob URL
  link.href = blobUrl;
  link.download = name;
 
  // Append link to the body
  document.body.appendChild(link);
 
  // Dispatch click event on the link
  // This is necessary as link.click() does not work on the latest firefox
  link.dispatchEvent(
    new MouseEvent("click", {
      bubbles: true,
      cancelable: true,
      view: window,
    })
  );
 
  // Remove link from body
  document.body.removeChild(link);
}

The exportCsv method returns a Promise<string> containing the CSV content. When exporting a selection, you can specify any rectangular area, not just the currently selected region. For example:

grid.api.exportCsv({
  dataRect: { rowStart: 2, rowEnd: 4, columnEnd: 2, columnStart: 4 },
});

CSV Delimiter

The exportCsv method accepts a delimiter parameter to separate CSV data. The default delimiter is a comma (,).

Including Headers and Group Headers

By default, the exportCsv method exports only data cells. Set the includeHeaders property to true to include column headers in the output. Similarly, set the includeGroupHeaders property to true to include group headers in the export.

Since group headers typically span multiple columns, the default behavior places the header in the first column and leaves remaining spanned columns blank in the CSV output. Use the uniformGroupHeaders property to repeat group headers across all columns they span. This creates perfectly rectangular data.

Transforming Exported CSV

The exportCsv method accepts a transform parameter that lets you process rows before converting them to CSV format. This helps you pre-process data before the final export.

PreviousSort Manager

Next Excel Export