Export button in tables

N2D4 · N2D4 · commit fd74852e6d22 · 2024-08-10T09:45:48.000-07:00
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -40,6 +40,7 @@
     "canvas-confetti": "^1.9.2",
     "clsx": "^2.0.0",
     "dotenv-cli": "^7.3.0",
+    "export-to-csv": "^1.3.0",
     "geist": "^1",
     "jose": "^5.2.2",
     "lucide-react": "^0.378.0",
diff --git a/apps/dashboard/src/components/data-table/elements/toolbar.tsx b/apps/dashboard/src/components/data-table/elements/toolbar.tsx
@@ -2,8 +2,10 @@
 
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { Button } from "@stackframe/stack-ui";
-import { Table } from "@tanstack/react-table";
+import { Cell, Table } from "@tanstack/react-table";
 import { DataTableViewOptions } from "./view-options";
+import { DownloadIcon } from "lucide-react";
+import { mkConfig, generateCsv, download } from 'export-to-csv';
 
 interface DataTableToolbarProps<TData> {
   table: Table<TData>,
@@ -19,7 +21,7 @@ export function DataTableToolbar<TData>({
 
   return (
     <div className="flex items-center justify-between">
-      <div className="flex flex-1 items-center gap-2 flex-wrap">
+      <div className="flex items-center gap-2 flex-wrap">
         {toolbarRender?.(table)}
         {(isFiltered || isSorted) && (
           <Button
@@ -35,7 +37,54 @@ export function DataTableToolbar<TData>({
           </Button>
         )}
       </div>
-      <DataTableViewOptions table={table} />
+      <div className="flex-1" />
+      <div className="flex items-center gap-2 flex-wrap">
+        <DataTableViewOptions table={table} />
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+          onClick={() => {
+            const csvConfig = mkConfig({
+              fieldSeparator: ',',
+              filename: 'data',
+              decimalSeparator: '.',
+              useKeysAsHeaders: true,
+            });
+
+            const renderCellValue = (cell: Cell<TData, unknown>) => {
+              const rendered = cell.renderValue();
+              if (rendered === null) {
+                return undefined;
+              }
+              if (['string', 'number', 'boolean', 'undefined'].includes(typeof rendered)) {
+                return rendered;
+              }
+              if (rendered instanceof Date) {
+                return rendered.toISOString();
+              }
+              if (typeof rendered === 'object') {
+                return JSON.stringify(rendered);
+              }
+            };
+
+
+            const rowModel = table.getRowModel();
+            const rows = rowModel.rows.map(row => Object.fromEntries(row.getAllCells().map(c => [c.column.id, renderCellValue(c)]).filter(([_, v]) => v !== undefined)));
+            console.log(table.getAllColumns());
+            if (rows.length === 0) {
+              alert("No data to export");
+              return;
+            }
+            console.log(rows);
+            const csv = generateCsv(csvConfig)(rows as any);
+            download(csvConfig)(csv);
+          }}
+        >
+          <DownloadIcon className="mr-2 h-4 w-4" />
+          Export CSV
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
