CSV Data Export

29 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

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

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

28
const base = { width: 100 };
29

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

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

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

46
            const rows: string[] = [rect.columns.map((x) => x.name ?? x.id).join(",")];
47
            for (let i = 0; i < rect.data.length; i++) {
48
              const row: string[] = [];
49
              const data = rect.data[i];
50
              for (const x of data) {
51
                if (typeof x === "string") row.push(`"${x}"`);
52
                else row.push(String(x));
53
              }
54
              rows.push(row.join(","));
55
            }
56

57
            downloadBlob(new Blob([rows.join("\n")], { type: "text/csv" }), "data.csv");
58
          }}
59
        >
60
          Download CSV File
61
        </button>
62
      </div>
63
      <div className="ln-grid" style={{ display: "flex", flexDirection: "column" }}>
64
        <div style={{ height: 500 }}>
65
          <Grid columns={columns} columnBase={base} rowSource={ds} ref={apiRef} />
66
        </div>
67
      </div>
68
    </>
69
  );
70
}
71

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

76
  // Create a link element
77
  const link = document.createElement("a");
78

79
  // Set link's href to point to the Blob URL
80
  link.href = blobUrl;
81
  link.download = name;
82

83
  // Append link to the body
84
  document.body.appendChild(link);
85

86
  // Dispatch click event on the link
87
  // This is necessary as link.click() does not work on the latest firefox
88
  link.dispatchEvent(
89
    new MouseEvent("click", {
90
      bubbles: true,
91
      cancelable: true,
92
      view: window,
93
    }),
94
  );
95

96
  // Remove link from body
97
  document.body.removeChild(link);
98
}