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.
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.
"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 },
});
The exportCsv
method accepts a delimiter parameter to separate CSV data. The default delimiter
is a comma (,
).
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.
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.