Export & Clipboard

Export Parquet

Export grid data to Apache Parquet using LyteNyte Grid's export API.

This guide uses the Hyparquet Writer library to create Parquet files in the browser. Install this package to enable exporting data to Parquet files.

npm install hyparquet-writer

pnpm add hyparquet-writer

yarn add hyparquet-writer

bun add hyparquet-writer

Parquet Download

The demo below exports grid data to a Parquet file. Parquet is a binary format, so use a Parquet viewer to inspect the output.


30 collapsed lines
1
import "@1771technologies/lytenyte-pro/components.css";
2
import "@1771technologies/lytenyte-pro/light-dark.css";
3
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
4
import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
5
import { BalanceCell, DurationCell, NumberCell } from "./components.jsx";
6
import { useRef } from "react";
7
import { parquetWriteBuffer, type ColumnSource } from "hyparquet-writer";
8

9
type BankData = (typeof bankDataSmall)[number];
10
export interface GridSpec {
11
  readonly data: BankData;
12
}
13

14
const columns: Grid.Column<GridSpec>[] = [
15
  { name: "Job", id: "job", width: 120 },
16
  { name: "Age", id: "age", type: "number", width: 80, cellRenderer: NumberCell },
17
  { name: "Balance", id: "balance", type: "number", cellRenderer: BalanceCell },
18
  { name: "Education", id: "education" },
19
  { name: "Marital", id: "marital" },
20
  { name: "Default", id: "default" },
21
  { name: "Housing", id: "housing" },
22
  { name: "Loan", id: "loan" },
23
  { name: "Contact", id: "contact" },
24
  { name: "Day", id: "day", type: "number", cellRenderer: NumberCell },
25
  { name: "Month", id: "month" },
26
  { name: "Duration", id: "duration", type: "number", cellRenderer: DurationCell },
27
];
28

29
const base = { width: 100 };
30

31
export default function ExportDemo() {
32
  const ds = useClientDataSource({ data: bankDataSmall });
33
  const apiRef = useRef<Grid.API<GridSpec> | null>(null);
34

35
  return (
36
    <>
37
      <div className="border-ln-border border-b p-2">
38
        <button
39
          data-ln-button="website"
40
          data-ln-size="md"
41
          onClick={async () => {
42
            const api = apiRef.current;
43
            if (!api) return;
44

45
            const rect = await api.exportData();
46

47
            const columns = Object.fromEntries(
48
              rect.columns.map((x) => [
49
                x.id,
50
                {
51
                  name: x.id,
52
                  data: [] as any[],
53
                } satisfies ColumnSource,
54
              ]),
55
            );
56

57
            for (let i = 0; i < rect.data.length; i++) {
58
              const data = rect.data[i];
59

60
              for (let j = 0; j < rect.columns.length; j++) {
61
                const column = rect.columns[j];
62

63
                columns[column.id].data.push(data[j]);
64
              }
65
            }
66

67
            const parquetBuffer = parquetWriteBuffer({
68
              columnData: Object.values(columns),
69
            });
70

71
            downloadBlob(new Blob([parquetBuffer], { type: "application/octet-stream" }), "data.parquet");
72
          }}
73
        >
74
          Download Parquet File
75
        </button>
76
      </div>
77
      <div className="ln-grid" style={{ display: "flex", flexDirection: "column" }}>
78
        <div style={{ height: 500 }}>
79
          <Grid columns={columns} columnBase={base} rowSource={ds} ref={apiRef} />
80
        </div>
81
      </div>
82
    </>
83
  );
84
}
85

86
function downloadBlob(blob: Blob, name: string) {
87
  // Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)
88
  const blobUrl = URL.createObjectURL(blob);
89

90
  // Create a link element
91
  const link = document.createElement("a");
92

93
  // Set link's href to point to the Blob URL
94
  link.href = blobUrl;
95
  link.download = name;
96

97
  // Append link to the body
98
  document.body.appendChild(link);
99

100
  // Dispatch click event on the link
101
  // This is necessary as link.click() does not work on the latest firefox
102
  link.dispatchEvent(
103
    new MouseEvent("click", {
104
      bubbles: true,
105
      cancelable: true,
106
      view: window,
107
    }),
108
  );
109

110
  // Remove link from body
111
  document.body.removeChild(link);
112
}

1
import type { Grid } from "@1771technologies/lytenyte-pro";
2
import type { GridSpec } from "./demo";
3

4
const formatter = new Intl.NumberFormat("en-US", {
5
  maximumFractionDigits: 2,
6
  minimumFractionDigits: 0,
7
});
8
export function BalanceCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
9
  const field = api.columnField(column, row);
10

11
  if (typeof field === "number") {
12
    if (field < 0) return `-$${formatter.format(Math.abs(field))}`;
13

14
    return "$" + formatter.format(field);
15
  }
16

17
  return `${field ?? "-"}`;
18
}
19
export function DurationCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
20
  const field = api.columnField(column, row);
21

22
  return typeof field === "number" ? `${formatter.format(field)} days` : `${field ?? "-"}`;
23
}
24

25
export function NumberCell({ api, row, column }: Grid.T.CellRendererParams<GridSpec>) {
26
  const field = api.columnField(column, row);
27

28
  return typeof field === "number" ? formatter.format(field) : `${field ?? "-"}`;
29
}

To match Parquet’s columnar format, the code below constructs an object of arrays, with one array per column. It passes the object to parquetWriteBuffer, which returns an ArrayBuffer. Finally, it wraps the buffer in a Blob and downloads the file.

1
<button
2
  data-ln-button="tertiary"
3
  data-ln-size="md"
4
  onClick={async () => {
5
    const api = apiRef.current;
6
    if (!api) return;
7

8
    const rect = await api.exportData();
9

10
    const columns = Object.fromEntries(
11
      rect.columns.map((x) => [
12
        x.id,
13
        {
14
          name: x.id,
15
          data: [] as any[],
16
        } satisfies ColumnSource,
17
      ]),
18
    );
19

20
    for (let i = 0; i < rect.data.length; i++) {
21
      const data = rect.data[i];
22

23
      for (let j = 0; j < rect.columns.length; j++) {
24
        const column = rect.columns[j];
25
        columns[column.id].data.push(data[j]);
26
      }
27
    }
28

29
    const parquetBuffer = parquetWriteBuffer({
30
      columnData: Object.values(columns),
31
    });
32

33
    downloadBlob(new Blob([parquetBuffer], { type: "application/octet-stream" }), "data.parquet");
34
  }}
35
>
36
  Download Parquet File
37
</button>

Next Steps

CSV Data Export: Export grid data as a CSV file.
Export Arrow: Export grid data as an Arrow file.
Export Excel: Implement Excel export using libraries like ExcelJS.

Export Parquet

Parquet Download

Parquet Export & Download

Next Steps

On this page