Documentation

CSV Export

Download table data with exportToCSV.

Export to CSV

Get the table API and call exportToCSV. Optional filename defaults to table-export.csv. Exports all rows (every page when paginated), respecting active filters and sort.

React TSX

Copy

const tableRef = useRef(null);

<button onClick={() => tableRef.current?.exportToCSV({ filename: "report.csv" })}>
  Export CSV
</button>

<SimpleTable ref={tableRef} columns={columns} rows={rows} />

Omit header row

Set includeHeadersInCSVExport to false to export data rows only.

React TSX

Copy

<SimpleTable
  columns={columns}
  rows={rows}
  includeHeadersInCSVExport={false}
/>

Control which columns export

excludeFromCsv keeps a column in the UI but out of the file. excludeFromRender hides it in the table (and column editor) but still includes it in the CSV.

TypeScript

Copy

{
  accessor: "actions",
  label: "Actions",
  excludeFromCsv: true,
}

{
  accessor: "internalId",
  label: "Internal ID",
  excludeFromRender: true,
}

Columns with a valueFormatter export the formatted text by default. Override with useFormattedValueForCSV or exportValueGetter— see Value Formatter.

Example

Use the export button in the demo. Code or StackBlitz has the full example.

React TSX

Copy

1import { useRef, useMemo } from "react";
2import { SimpleTable } from "@simple-table/react";
3import type { Theme, TableAPI, ReactColumnDef } from "@simple-table/react";
4import { csvExportHeaders, csvExportData, csvExportConfig, type CsvProduct } from "./csv-export.demo-data";
5import "@simple-table/react/styles.css";
6
7const CsvExportDemo = ({
8  height = "400px",
9  theme
10}: {
11  height?: string | number;
12  theme?: Theme;
13}) => {
14  const tableRef = useRef<TableAPI<CsvProduct>>(null);
15
16  const headers: ReactColumnDef<CsvProduct>[] = useMemo(
17    () =>
18      csvExportHeaders.map((h): ReactColumnDef<CsvProduct> => {
19        if (h.accessor === "actions") {
20          return {
21            ...h,
22            cellRenderer: () => (
23              <button
24                style={{
25                  backgroundColor: "#3b82f6",
26                  color: "white",
27                  border: "none",
28                  padding: "4px 12px",
29                  borderRadius: 4,
30                  cursor: "pointer",
31                  fontSize: 12,
32                  fontWeight: "bold"
33                }}
34              >
35                View
36              </button>
37            )
38          };
39        }
40        return h;
41      }),
42    [],
43  );
44
45  const handleExport = () => {
46    tableRef.current?.exportToCSV();
47  };
48
49  const handleGetInfo = () => {
50    const api = tableRef.current;
51    if (!api) return;
52    const rows = api.getAllRows();
53    const hdrs = api.getHeaders();
54    const totalRevenue = rows.reduce((sum, r) => {
55      const revenue = r.row.revenue;
56      return sum + (typeof revenue === "number" ? revenue : Number(revenue) || 0);
57    }, 0);
58    alert(
59      `Table Info:\n• ${rows.length} rows\n• ${hdrs.length} columns\n• Columns: ${hdrs.map((h) => h.label).join(", ")}\n• Total Revenue: $${totalRevenue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
60    );
61  };
62
63  return (
64    <div>
65      <div style={{ marginBottom: 12, display: "flex", gap: 8 }}>
66        <button onClick={handleExport} style={{ padding: "6px 16px" }}>
67          Export to CSV
68        </button>
69        <button onClick={handleGetInfo} style={{ padding: "6px 16px" }}>
70          Get Table Info
71        </button>
72      </div>
73      <SimpleTable
74        ref={tableRef}
75        columns={headers}
76        rows={csvExportData}
77        enableColumnEditor={csvExportConfig.tableProps.enableColumnEditor}
78        selectableCells={csvExportConfig.tableProps.selectableCells}
79        customTheme={csvExportConfig.tableProps.customTheme}
80        height={height}
81        theme={theme}
82        getRowId={({ row }) => row.id}
83      />
84    </div>
85  );
86};
87
88export default CsvExportDemo;

Angularcsv-export-demo.component.ts

Copy

1import { Component, Input, ViewChild } from "@angular/core";
2import {SimpleTableComponent} from "@simple-table/angular";import type { AngularColumnDef, GetRowIdParams, Theme } from "@simple-table/angular";
3import { csvExportHeaders, csvExportData, csvExportConfig } from "./csv-export.demo-data";
4import "@simple-table/angular/styles.css";
5import type { CsvProduct } from "./csv-export.demo-data";
6
7@Component({
8  selector: "csv-export-demo",
9  standalone: true,
10  imports: [SimpleTableComponent],
11  template: `
12    <div>
13      <div style="display: flex; gap: 8px; margin-bottom: 12px">
14        <button style="padding: 6px 16px" (click)="handleExport()">Export to CSV</button>
15        <button style="padding: 6px 16px" (click)="handleGetInfo()">Get Table Info</button>
16      </div>
17      <simple-table
18      [getRowId]="getRowId"
19        #simpleTable
20        [rows]="rows"
21        [columns]="headers"
22        [enableColumnEditor]="true"
23        [selectableCells]="true"
24        [customTheme]="{ rowHeight: 32 }"
25        [height]="height"
26        [theme]="theme"
27      ></simple-table>
28    </div>
29  `,
30})
31export class CsvExportDemoComponent {
32  @ViewChild("simpleTable") tableRef!: SimpleTableComponent;
33  @Input() height: string | number = "400px";
34  @Input() theme?: Theme;
35
36  readonly rows: CsvProduct[] = csvExportData;
37  readonly headers: AngularColumnDef<CsvProduct>[] = csvExportHeaders.map((h) => {
38    if (h.accessor === "actions") {
39      return {
40        ...h,
41        cellRenderer: () =>
42          `<button style="background:#3b82f6;color:white;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:bold">View</button>`,
43      };
44    }
45    return { ...h };
46  });
47
48  handleExport(): void {
49    this.tableRef.getAPI()?.exportToCSV();
50  }
51
52  handleGetInfo(): void {
53    const api = this.tableRef.getAPI();
54    if (!api) return;
55    const rows = api.getAllRows();
56    const hdrs = api.getHeaders();
57    const totalRevenue = rows.reduce((sum, r) => {
58      const revenue = r.row.revenue;
59      return sum + (typeof revenue === "number" ? revenue : 0);
60    }, 0);
61    alert(
62      `Table Info:\n• ${rows.length} rows\n• ${hdrs.length} columns\n• Columns: ${hdrs.map((h) => h.label).join(", ")}\n• Total Revenue: $${totalRevenue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
63    );
64  }
65
66  getRowId = ({ row }: GetRowIdParams<CsvProduct>) => row.id;
67}
68
69
70// csv-export.demo-data.ts
71// Self-contained demo table setup for this example.
72import type { AngularColumnDef, ValueFormatterProps } from "@simple-table/angular";
73
74export interface CsvProduct {
75  id: string;
76  sku: string;
77  product: string;
78  category: string;
79  price: number;
80  stock: number;
81  sold: number;
82  revenue: number;
83  actions: string;
84}
85
86const CATEGORY_CODES: Record<string, string> = {
87  electronics: "ELEC",
88  furniture: "FURN",
89  stationery: "STAT",
90  appliances: "APPL",
91};
92
93export const csvExportData = [
94  { id: "db-1001", sku: "PRD-1001", product: "Wireless Keyboard", category: "Electronics", price: 49.99, stock: 145, sold: 234, revenue: 11697.66, actions: "" },
95  { id: "db-1002", sku: "PRD-1002", product: "Ergonomic Mouse", category: "Electronics", price: 29.99, stock: 89, sold: 456, revenue: 13675.44, actions: "" },
96  { id: "db-1003", sku: "PRD-1003", product: "USB-C Hub", category: "Electronics", price: 39.99, stock: 234, sold: 178, revenue: 7118.22, actions: "" },
97  { id: "db-2001", sku: "PRD-2001", product: "Standing Desk", category: "Furniture", price: 399.99, stock: 23, sold: 67, revenue: 26799.33, actions: "" },
98  { id: "db-2002", sku: "PRD-2002", product: "Office Chair", category: "Furniture", price: 249.99, stock: 56, sold: 123, revenue: 30748.77, actions: "" },
99  { id: "db-2003", sku: "PRD-2003", product: "Monitor Stand", category: "Furniture", price: 79.99, stock: 167, sold: 89, revenue: 7119.11, actions: "" },
100  { id: "db-3001", sku: "PRD-3001", product: "Notebook Set", category: "Stationery", price: 12.99, stock: 445, sold: 678, revenue: 8807.22, actions: "" },
101  { id: "db-3002", sku: "PRD-3002", product: "Pen Collection", category: "Stationery", price: 19.99, stock: 312, sold: 534, revenue: 10674.66, actions: "" },
102  { id: "db-3003", sku: "PRD-3003", product: "Desk Organizer", category: "Stationery", price: 24.99, stock: 198, sold: 289, revenue: 7222.11, actions: "" },
103  { id: "db-4001", sku: "PRD-4001", product: "Coffee Maker", category: "Appliances", price: 89.99, stock: 78, sold: 156, revenue: 14038.44, actions: "" },
104  { id: "db-4002", sku: "PRD-4002", product: "Electric Kettle", category: "Appliances", price: 34.99, stock: 134, sold: 267, revenue: 9342.33, actions: "" },
105  { id: "db-4003", sku: "PRD-4003", product: "Desk Lamp LED", category: "Appliances", price: 44.99, stock: 201, sold: 198, revenue: 8908.02, actions: "" },
106];
107
108export const csvExportHeaders: AngularColumnDef<CsvProduct, any>[] = [
109  { accessor: "id", label: "Internal ID", width: 80, type: "string", excludeFromRender: true },
110  { accessor: "sku", label: "SKU", width: 100, sortable: true, type: "string" },
111  { accessor: "product", label: "Product Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
112  {
113    accessor: "category",
114    label: "Category",
115    width: 130,
116    sortable: true,
117    type: "string",
118    valueFormatter: ({ value }: ValueFormatterProps<CsvProduct>) => {
119      const s = String(value);
120      return s.charAt(0).toUpperCase() + s.slice(1);
121    },
122    exportValueGetter: ({ value }) => {
123      const code = CATEGORY_CODES[String(value).toLowerCase()] ?? String(value).toUpperCase();
124      return `${value} (${code})`;
125    },
126  },
127  {
128    accessor: "price",
129    label: "Price",
130    width: 100,
131    sortable: true,
132    type: "number",
133    valueFormatter: ({ value }: ValueFormatterProps<CsvProduct, number>) => `$${value.toFixed(2)}`,
134    useFormattedValueForCSV: true,
135    useFormattedValueForClipboard: true,
136  },
137  { accessor: "stock", label: "In Stock", width: 100, sortable: true, type: "number" },
138  { accessor: "sold", label: "Units Sold", width: 110, sortable: true, type: "number" },
139  {
140    accessor: "revenue",
141    label: "Revenue",
142    width: 120,
143    sortable: true,
144    type: "number",
145    valueFormatter: ({ value }: ValueFormatterProps<CsvProduct, number>) =>
146      `$${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
147    useFormattedValueForCSV: true,
148    useFormattedValueForClipboard: true,
149  },
150  { accessor: "actions", label: "Actions", width: 100, type: "string", excludeFromCsv: true },
151];
152
153export const csvExportConfig = {
154  headers: csvExportHeaders,
155  rows: csvExportData,
156  tableProps: { enableColumnEditor: true, selectableCells: true, customTheme: { rowHeight: 32 } },
157};
158

Vue SFC

Copy

1<template>
2  <div>
3    <div style="display: flex; gap: 8px; margin-bottom: 12px">
4      <button style="padding: 6px 16px" @click="handleExport">Export to CSV</button>
5      <button style="padding: 6px 16px" @click="handleGetInfo">Get Table Info</button>
6    </div>
7    <SimpleTable
8      ref="tableRef"
9      :columns="headers"
10      :rows="csvExportData"
11      :get-row-id="getRowId"
12      :enable-column-editor="csvExportConfig.tableProps.enableColumnEditor"
13      :selectable-cells="csvExportConfig.tableProps.selectableCells"
14      :custom-theme="csvExportConfig.tableProps.customTheme"
15      :height="height"
16      :theme="theme"
17    />
18  </div>
19</template>
20
21<script setup lang="ts">
22import { ref } from "vue";
23import { SimpleTable } from "@simple-table/vue";
24import type { Theme, VueColumnDef, GetRowIdParams, SimpleTableExposed } from "@simple-table/vue";
25import { csvExportHeaders, csvExportData, csvExportConfig } from "./csv-export.demo-data";
26import type { CsvProduct } from "./csv-export.demo-data";
27import "@simple-table/vue/styles.css";
28
29withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
30  height: "400px",
31});
32
33const tableRef = ref<SimpleTableExposed<CsvProduct> | null>(null);
34const getRowId = ({ row }: GetRowIdParams<CsvProduct>) => row.id;
35
36const headers: VueColumnDef<CsvProduct>[] = csvExportHeaders.map((col) => {
37  if (col.accessor === "actions") {
38    return {
39      ...col,
40      cellRenderer: () =>
41        `<button style="background:#3b82f6;color:white;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:bold">View</button>`,
42    };
43  }
44  return { ...col };
45});
46
47function handleExport() {
48  tableRef.value?.getAPI()?.exportToCSV();
49}
50
51function handleGetInfo() {
52  const api = tableRef.value?.getAPI();
53  if (!api) return;
54  const rows = api.getAllRows();
55  const hdrs = api.getHeaders();
56  const totalRevenue = rows.reduce((sum, r) => sum + (Number(r.revenue) || 0), 0);
57  alert(
58    `Table Info:\n• ${rows.length} rows\n• ${hdrs.length} columns\n• Columns: ${hdrs.map((h) => h.label).join(", ")}\n• Total Revenue: $${totalRevenue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
59  );
60}
61</script>

Svelte

Copy

1<script lang="ts">
2  import { SimpleTable } from "@simple-table/svelte";
3  import type { Theme, SvelteColumnDef, TableAPI, GetRowIdParams } from "@simple-table/svelte";
4  import { csvExportHeaders, csvExportData, csvExportConfig } from "./csv-export.demo-data";
5  import type { CsvProduct } from "./csv-export.demo-data";
6  import "@simple-table/svelte/styles.css";
7
8  let { height = "400px", theme }: { height?: string | number; theme?: Theme } = $props();
9
10  let tableRef = $state<{ getAPI: () => TableAPI<CsvProduct> | null } | null>(null);
11
12  const getRowId = ({ row }: GetRowIdParams<CsvProduct>) => row.id;
13
14  const headers: SvelteColumnDef<CsvProduct>[] = csvExportHeaders.map((h) => {
15    if (h.accessor === "actions") {
16      return {
17        ...h,
18        cellRenderer: () =>
19          `<button style="background:#3b82f6;color:white;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:bold">View</button>`,
20      };
21    }
22    return { ...h };
23  });
24
25  function handleExport() {
26    tableRef?.getAPI()?.exportToCSV();
27  }
28
29  function handleGetInfo() {
30    const api = tableRef?.getAPI();
31    if (!api) return;
32    const rows = api.getAllRows();
33    const hdrs = api.getHeaders();
34    const totalRevenue = rows.reduce((sum, r) => sum + r.row.revenue, 0);
35    alert(
36      `Table Info:\n• ${rows.length} rows\n• ${hdrs.length} columns\n• Columns: ${hdrs.map((h) => h.label).join(", ")}\n• Total Revenue: $${totalRevenue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
37    );
38  }
39</script>
40
41<div>
42  <div style="display: flex; gap: 8px; margin-bottom: 12px;">
43    <button style="padding: 6px 16px" onclick={handleExport}>Export to CSV</button>
44    <button style="padding: 6px 16px" onclick={handleGetInfo}>Get Table Info</button>
45  </div>
46  <SimpleTable
47    bind:this={tableRef}
48    columns={headers}
49    {getRowId}
50    rows={csvExportData}
51    enableColumnEditor={csvExportConfig.tableProps.enableColumnEditor}
52    selectableCells={csvExportConfig.tableProps.selectableCells}
53    customTheme={csvExportConfig.tableProps.customTheme}
54    {height}
55    {theme}
56  />
57</div>

Solid TSX

Copy

1import { SimpleTable } from "@simple-table/solid";
2import type { Theme, TableAPI, SolidColumnDef } from "@simple-table/solid";
3import { csvExportHeaders, csvExportData, csvExportConfig, type CsvProduct } from "./csv-export.demo-data";
4import "@simple-table/solid/styles.css";
5
6export default function CsvExportDemo(props: { height?: string | number; theme?: Theme }) {
7  let tableRef: TableAPI<CsvProduct> | undefined;
8
9  const headers: SolidColumnDef<CsvProduct>[] = csvExportHeaders.map((h) => {
10    if (h.accessor === "actions") {
11      return {
12        ...h,
13        cellRenderer: () => (
14          <button
15            type="button"
16            style={{
17              background: "#3b82f6",
18              color: "white",
19              border: "none",
20              padding: "4px 12px",
21              "border-radius": "4px",
22              cursor: "pointer",
23              "font-size": "12px",
24              "font-weight": "bold",
25            }}
26          >
27            View
28          </button>
29        ),
30      };
31    }
32    return h;
33  });
34
35  const handleExport = () => {
36    tableRef?.exportToCSV();
37  };
38
39  const handleGetInfo = () => {
40    if (!tableRef) return;
41    const rows = tableRef.getAllRows();
42    const hdrs = tableRef.getHeaders();
43    const totalRevenue = rows.reduce((sum, r) => {
44      const revenue = r.row.revenue;
45      return sum + (typeof revenue === "number" ? revenue : Number(revenue) || 0);
46    }, 0);
47    alert(
48      `Table Info:\n• ${rows.length} rows\n• ${hdrs.length} columns\n• Columns: ${hdrs.map((h) => h.label).join(", ")}\n• Total Revenue: $${totalRevenue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
49    );
50  };
51
52  return (
53    <div>
54      <div style={{ "margin-bottom": "12px", display: "flex", gap: "8px" }}>
55        <button onClick={handleExport} style={{ padding: "6px 16px" }}>
56          Export to CSV
57        </button>
58        <button onClick={handleGetInfo} style={{ padding: "6px 16px" }}>
59          Get Table Info
60        </button>
61      </div>
62      <SimpleTable
63        ref={(api) => (tableRef = api)}
64        columns={headers}
65        getRowId={({ row }) => row.id}
66        rows={csvExportData}
67        enableColumnEditor={csvExportConfig.tableProps.enableColumnEditor}
68        selectableCells={csvExportConfig.tableProps.selectableCells}
69        customTheme={csvExportConfig.tableProps.customTheme}
70        height={props.height ?? "400px"}
71        theme={props.theme}
72      />
73    </div>
74  );
75}

TypeScriptCsvExportDemo.ts

Copy

1import { SimpleTableVanilla } from "simple-table-core";
2import type { CsvProduct } from "./csv-export.demo-data";
3import type { Theme, ColumnDef, GetRowIdParams } from "simple-table-core";
4import { csvExportHeaders, csvExportData, csvExportConfig } from "./csv-export.demo-data";
5import "simple-table-core/styles.css";
6
7
8const getRowId = ({ row }: GetRowIdParams<CsvProduct>) => row.id;
9export function renderCsvExportDemo(
10  container: HTMLElement,
11  options?: { height?: string | number; theme?: Theme },
12): SimpleTableVanilla<CsvProduct> {
13  const wrapper = document.createElement("div");
14
15  const controls = document.createElement("div");
16  controls.style.cssText = "display:flex;gap:8px;margin-bottom:12px";
17
18  const exportBtn = document.createElement("button");
19  exportBtn.textContent = "Export to CSV";
20  exportBtn.style.padding = "6px 16px";
21  controls.appendChild(exportBtn);
22
23  const infoBtn = document.createElement("button");
24  infoBtn.textContent = "Get Table Info";
25  infoBtn.style.padding = "6px 16px";
26  controls.appendChild(infoBtn);
27
28  const tableContainer = document.createElement("div");
29  wrapper.appendChild(controls);
30  wrapper.appendChild(tableContainer);
31  container.appendChild(wrapper);
32
33  const headers: ColumnDef<CsvProduct>[] = csvExportHeaders.map((h) => {
34    if (h.accessor === "actions") {
35      return {
36        ...h,
37        cellRenderer: () =>
38          `<button style="background:#3b82f6;color:white;border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:bold">View</button>`,
39      };
40    }
41    return { ...h };
42  });
43
44  const table = new SimpleTableVanilla(tableContainer, {
45    getRowId,
46    columns: headers,
47    rows: csvExportData,
48    enableColumnEditor: csvExportConfig.tableProps.enableColumnEditor,
49    selectableCells: csvExportConfig.tableProps.selectableCells,
50    customTheme: csvExportConfig.tableProps.customTheme,
51    height: options?.height ?? "400px",
52    theme: options?.theme,
53  });
54
55  exportBtn.addEventListener("click", () => {
56    table.getAPI().exportToCSV();
57  });
58
59  infoBtn.addEventListener("click", () => {
60    const api = table.getAPI();
61    const rows = api.getAllRows();
62    const hdrs = api.getHeaders();
63    const totalRevenue = rows.reduce(
64      (sum, r) => sum + (Number((r.row as { revenue?: unknown }).revenue) || 0),
65      0,
66    );
67    alert(
68      `Table Info:\n• ${rows.length} rows\n• ${hdrs.length} columns\n• Columns: ${hdrs.map((h) => h.label).join(", ")}\n• Total Revenue: $${totalRevenue.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
69    );
70  });
71
72  return table;
73}
74
75
76// csv-export.demo-data.ts
77// Self-contained demo table setup for this example.
78import type { ColumnDef } from "simple-table-core";
79
80export interface CsvProduct {
81  id: string;
82  sku: string;
83  product: string;
84  category: string;
85  price: number;
86  stock: number;
87  sold: number;
88  revenue: number;
89  actions: string;
90}
91
92const CATEGORY_CODES: Record<string, string> = {
93  electronics: "ELEC",
94  furniture: "FURN",
95  stationery: "STAT",
96  appliances: "APPL",
97};
98
99export const csvExportData = [
100  { id: "db-1001", sku: "PRD-1001", product: "Wireless Keyboard", category: "Electronics", price: 49.99, stock: 145, sold: 234, revenue: 11697.66, actions: "" },
101  { id: "db-1002", sku: "PRD-1002", product: "Ergonomic Mouse", category: "Electronics", price: 29.99, stock: 89, sold: 456, revenue: 13675.44, actions: "" },
102  { id: "db-1003", sku: "PRD-1003", product: "USB-C Hub", category: "Electronics", price: 39.99, stock: 234, sold: 178, revenue: 7118.22, actions: "" },
103  { id: "db-2001", sku: "PRD-2001", product: "Standing Desk", category: "Furniture", price: 399.99, stock: 23, sold: 67, revenue: 26799.33, actions: "" },
104  { id: "db-2002", sku: "PRD-2002", product: "Office Chair", category: "Furniture", price: 249.99, stock: 56, sold: 123, revenue: 30748.77, actions: "" },
105  { id: "db-2003", sku: "PRD-2003", product: "Monitor Stand", category: "Furniture", price: 79.99, stock: 167, sold: 89, revenue: 7119.11, actions: "" },
106  { id: "db-3001", sku: "PRD-3001", product: "Notebook Set", category: "Stationery", price: 12.99, stock: 445, sold: 678, revenue: 8807.22, actions: "" },
107  { id: "db-3002", sku: "PRD-3002", product: "Pen Collection", category: "Stationery", price: 19.99, stock: 312, sold: 534, revenue: 10674.66, actions: "" },
108  { id: "db-3003", sku: "PRD-3003", product: "Desk Organizer", category: "Stationery", price: 24.99, stock: 198, sold: 289, revenue: 7222.11, actions: "" },
109  { id: "db-4001", sku: "PRD-4001", product: "Coffee Maker", category: "Appliances", price: 89.99, stock: 78, sold: 156, revenue: 14038.44, actions: "" },
110  { id: "db-4002", sku: "PRD-4002", product: "Electric Kettle", category: "Appliances", price: 34.99, stock: 134, sold: 267, revenue: 9342.33, actions: "" },
111  { id: "db-4003", sku: "PRD-4003", product: "Desk Lamp LED", category: "Appliances", price: 44.99, stock: 201, sold: 198, revenue: 8908.02, actions: "" },
112];
113
114export const csvExportHeaders: ColumnDef<CsvProduct>[] = [
115  { accessor: "id", label: "Internal ID", width: 80, type: "string", excludeFromRender: true },
116  { accessor: "sku", label: "SKU", width: 100, sortable: true, type: "string" },
117  { accessor: "product", label: "Product Name", minWidth: 120, width: "1fr", sortable: true, type: "string" },
118  {
119    accessor: "category",
120    label: "Category",
121    width: 130,
122    sortable: true,
123    type: "string",
124    valueFormatter: ({ value }) => {
125      const s = String(value);
126      return s.charAt(0).toUpperCase() + s.slice(1);
127    },
128    exportValueGetter: ({ value }) => {
129      const code = CATEGORY_CODES[String(value).toLowerCase()] ?? String(value).toUpperCase();
130      return `${value} (${code})`;
131    },
132  },
133  {
134    accessor: "price",
135    label: "Price",
136    width: 100,
137    sortable: true,
138    type: "number",
139    valueFormatter: ({ value }) => `$${Number(value).toFixed(2)}`,
140    useFormattedValueForCSV: true,
141    useFormattedValueForClipboard: true,
142  },
143  { accessor: "stock", label: "In Stock", width: 100, sortable: true, type: "number" },
144  { accessor: "sold", label: "Units Sold", width: 110, sortable: true, type: "number" },
145  {
146    accessor: "revenue",
147    label: "Revenue",
148    width: 120,
149    sortable: true,
150    type: "number",
151    valueFormatter: ({ value }) =>
152      `$${Number(value).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
153    useFormattedValueForCSV: true,
154    useFormattedValueForClipboard: true,
155  },
156  { accessor: "actions", label: "Actions", width: 100, type: "string", excludeFromCsv: true },
157];
158
159export const csvExportConfig = {
160  headers: csvExportHeaders,
161  rows: csvExportData,
162  tableProps: { enableColumnEditor: true, selectableCells: true, customTheme: { rowHeight: 32 } },
163};
164

StackBlitz

Props

CSV Export Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`includeHeadersInCSVExport` boolean	Optional	Include column labels as the first CSV row. Defaults to true.
`ColumnDef.excludeFromCsv` boolean	Optional	Show the column in the table but omit it from CSV export.
`ColumnDef.excludeFromRender` boolean	Optional	Hide the column in the table/editor while still exporting it to CSV.

exportToCSV options

ExportToCSVProps

Property	Required	Description	Example
Property	Required	Description	Example
`filename` string	Optional	Custom filename for the exported CSV file. Defaults to 'table-export.csv' if not provided.