Export

CSV Data Export

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 py-2 px-2">
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={async () => {
            downloadBlob(await grid.api.exportCsvFile(), "data.csv");
          }}
        >
          CSV
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={async () => {
            downloadBlob(
              await grid.api.exportCsvFile({ includeHeader: true }),
              "data.csv"
            );
          }}
        >
          CSV (with headers)
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          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 w-full h-full capitalize px-2 items-center"
                        />
                      );
                    })}
                  </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="text-sm flex items-center px-2 h-full w-full"
                          />
                        );
                      })}
                    </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.

PreviousGrid Box

Next Excel Export