Export & Clipboard

Export Arrow

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

Apache Arrow provides the apache-arrow package for parsing and creating Arrow tables. Install this package to enable exporting data to Arrow files.

npm install apache-arrow

pnpm add apache-arrow

yarn add apache-arrow

bun add apache-arrow

Arrow Download

The demo below exports grid data to an Arrow file. Arrow is a binary format, so use an Arrow 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 { tableFromArrays, tableToIPC } from "apache-arrow";
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(rect.columns.map((x) => [x.id, [] as any[]]));
48

49
            for (let i = 0; i < rect.data.length; i++) {
50
              const data = rect.data[i];
51

52
              for (let j = 0; j < rect.columns.length; j++) {
53
                const column = rect.columns[j];
54

55
                columns[column.id].push(data[j]);
56
              }
57
            }
58

59
            // TypeScript complains but this type is correct.
60
            const table = new Uint8Array(tableToIPC(tableFromArrays(columns), "file"));
61

62
            downloadBlob(new Blob([table], { type: "application/vnd.apache.arrow.file" }), "data.arrow");
63
          }}
64
        >
65
          Download Arrow File
66
        </button>
67
      </div>
68
      <div className="ln-grid" style={{ display: "flex", flexDirection: "column" }}>
69
        <div style={{ height: 500 }}>
70
          <Grid columns={columns} columnBase={base} rowSource={ds} ref={apiRef} />
71
        </div>
72
      </div>
73
    </>
74
  );
75
}
76

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

81
  // Create a link element
82
  const link = document.createElement("a");
83

84
  // Set link's href to point to the Blob URL
85
  link.href = blobUrl;
86
  link.download = name;
87

88
  // Append link to the body
89
  document.body.appendChild(link);
90

91
  // Dispatch click event on the link
92
  // This is necessary as link.click() does not work on the latest firefox
93
  link.dispatchEvent(
94
    new MouseEvent("click", {
95
      bubbles: true,
96
      cancelable: true,
97
      view: window,
98
    }),
99
  );
100

101
  // Remove link from body
102
  document.body.removeChild(link);
103
}

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 Arrow’s columnar format, the code constructs an object of arrays, with one array per column. It passes the object to tableFromArrays from apache-arrow to create a table. Finally, it converts the table to a byte buffer, 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(rect.columns.map((x) => [x.id, [] as any[]]));
11

12
    for (let i = 0; i < rect.data.length; i++) {
13
      const data = rect.data[i];
14

15
      for (let j = 0; j < rect.columns.length; j++) {
16
        const column = rect.columns[j];
17
        columns[column.id].push(data[j]);
18
      }
19
    }
20

21
    // TypeScript reports an error here, but the type is correct.
22
    const table = new Uint8Array(tableToIPC(tableFromArrays(columns), "file"));
23

24
    downloadBlob(new Blob([table], { type: "application/vnd.apache.arrow.file" }), "data.arrow");
25
  }}
26
>
27
  Download Arrow File
28
</button>

Next Steps

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

Export Arrow

Arrow Download

Arrow Export & Download

Next Steps

On this page