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 } 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>(null);
15
16  const headers: ReactColumnDef[] = useMemo(
17    () =>
18      csvExportHeaders.map((h) => {
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 row = r as Record<string, unknown>;
56      return sum + (Number(row.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      />
83    </div>
84  );
85};
86
87export default CsvExportDemo;

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      :enable-column-editor="csvExportConfig.tableProps.enableColumnEditor"
12      :selectable-cells="csvExportConfig.tableProps.selectableCells"
13      :custom-theme="csvExportConfig.tableProps.customTheme"
14      :height="height"
15      :theme="theme"
16    />
17  </div>
18</template>
19
20<script setup lang="ts">
21import { ref } from "vue";
22import { SimpleTable } from "@simple-table/vue";
23import type { Theme, TableAPI, VueColumnDef } from "@simple-table/vue";
24import { csvExportHeaders, csvExportData, csvExportConfig } from "./csv-export.demo-data";
25import "@simple-table/vue/styles.css";
26
27withDefaults(defineProps<{ height?: string | number; theme?: Theme }>(), {
28  height: "400px",
29});
30
31const tableRef = ref<{ getAPI: () => TableAPI | null } | null>(null);
32
33const headers: VueColumnDef[] = 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
44function handleExport() {
45  tableRef.value?.getAPI()?.exportToCSV();
46}
47
48function handleGetInfo() {
49  const api = tableRef.value?.getAPI();
50  if (!api) return;
51  const rows = api.getAllRows();
52  const hdrs = api.getHeaders();
53  const totalRevenue = rows.reduce((sum, r) => sum + (Number(r.revenue) || 0), 0);
54  alert(
55    `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 })}`,
56  );
57}
58</script>

Angularcsv-export-demo.component.ts

Copy

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

Svelte

Copy

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

Solid TSX

Copy

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

TypeScriptCsvExportDemo.ts

Copy

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

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.