CSV Data Export

Export grid data to CSV format with customizable headers, delimiters, and transformations in LyteNyte Grid.

LyteNyte Grid can export grid data directly to CSV, letting you capture a selection or the entire dataset in a standard format.

Export to CSV

Use the exportCsv API method to export selected data or the entire rendered dataset. To download a CSV file directly, use the convenience method exportCsvFile, which runs exportCsv and returns a downloadable file blob.

Export CSV

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];
const columns: Column<BankData>[] = [
  { 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 default function CSVExport() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });

  const view = grid.view.useValue();

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div className="flex gap-8 px-2 py-2">
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={async () => {
            downloadBlob(await grid.api.exportCsvFile(), "data.csv");
          }}
        >
          CSV
        </button>
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={async () => {
            downloadBlob(await grid.api.exportCsvFile({ includeHeader: true }), "data.csv");
          }}
        >
          CSV (with headers)
        </button>
        <button
          className="rounded border border-gray-600 bg-gray-900 px-2 text-white dark:text-black"
          onClick={async () => {
            downloadBlob(await grid.api.exportCsvFile({ delimiter: ";" }), "data.csv");
          }}
        >
          CSV (colon delimited)
        </button>
      </div>
      <div className="lng-grid" style={{ height: 500 }}>
        <Grid.Root grid={grid}>
          <Grid.Viewport>
            <Grid.Header>
              {view.header.layout.map((row, i) => {
                return (
                  <Grid.HeaderRow key={i} headerRowIndex={i}>
                    {row.map((c) => {
                      if (c.kind === "group") return null;

                      return (
                        <Grid.HeaderCell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 capitalize"
                        />
                      );
                    })}
                  </Grid.HeaderRow>
                );
              })}
            </Grid.Header>
            <Grid.RowsContainer>
              <Grid.RowsCenter>
                {view.rows.center.map((row) => {
                  if (row.kind === "full-width") return null;

                  return (
                    <Grid.Row row={row} key={row.id}>
                      {row.cells.map((c) => {
                        return (
                          <Grid.Cell
                            key={c.id}
                            cell={c}
                            className="flex h-full w-full items-center px-2 text-sm"
                          />
                        );
                      })}
                    </Grid.Row>
                  );
                })}
              </Grid.RowsCenter>
            </Grid.RowsContainer>
          </Grid.Viewport>
        </Grid.Root>
      </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);
}

exportCsv returns a Promise<string> containing the CSV content. When exporting a selection, you can specify any rectangular area, not just the current selection.

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

CSV Delimiter

Set the delimiter option to control the character separating CSV fields. The default is a comma (,).

Include Headers and Group Headers

By default, exportCsv exports only cell data.

Set includeHeaders: true to include column headers.
Set includeGroupHeaders: true to include group headers.

Group headers often span multiple columns. By default, only the first spanned column contains the header value, leaving the rest blank. To repeat the header across all spanned columns, set uniformGroupHeaders: true. This produces a perfectly rectangular CSV output.

CSV Data ExportCopy Page

Export to CSV

Export CSV

CSV Delimiter

Include Headers and Group Headers

On this page