Documentation

CSV Export

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

SimpleTable makes it easy to export your table data to CSV format with just one method call. Using the tableRef and the exportToCSV() method, users can download their data for analysis, reporting, or sharing.

Basic Usage

To enable CSV export in your table, follow these steps:

Create a table reference - Create a ref using useRef and pass it to the tableRef prop
Add an export button - Create a button or trigger that calls the export method
Call exportToCSV() - Invoke tableRef.current?.exportToCSV() to download the CSV file

CSV Export Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`ref` React.RefObject<TableAPI>	Required	React ref object that provides access to table methods including exportToCSV. Pass this ref to the SimpleTable component to enable CSV export functionality.
`exportToCSV` (props?: { filename?: string }) => void	Optional	Method to export table data to CSV format. Exports ALL data including all pages when pagination is enabled (fixed in v1.9.4). Call via tableRef.current?.exportToCSV(). Optionally pass a filename parameter.
`includeHeadersInCSVExport` boolean	Optional	When true, includes column headers as the first row in CSV exports. Defaults to true.
`ColumnDef.excludeFromRender` boolean	Optional	When true, hides the column from the table display and from the column editor, while keeping it in CSV exports. Perfect for internal IDs, database keys, or technical fields that shouldn't clutter the UI but are needed in exports.
`ColumnDef.excludeFromCsv` boolean	Optional	When true, shows the column in the table but excludes it from CSV exports. Perfect for action buttons, interactive elements, or UI-only columns that don't make sense in exported data.

✨ Full Data Export

The exportToCSV() method now exports all data from your table, including all pages when pagination is enabled. Previously, only the current page was exported - this has been fixed in version 1.9.4.

The exported CSV includes all visible columns and respects active filters/sorting. Default filename is table-export.csv. Customize with exportToCSV({ filename: "my-file.csv" }).

Formatting CSV Exports

Control how column values appear in CSV exports using three powerful options. By default, CSV exports use raw data values.

1. Use Formatted Values (useFormattedValueForCSV)

Export the same formatted values that are displayed in the table. Perfect when you want CSV exports to match what users see on screen.

2. Custom Export Values (exportValueGetter)

Provide completely different values specifically for CSV export. Takes highest priority. Ideal for adding codes, identifiers, or transforming data for spreadsheet compatibility.

3. Adding Context to Exports

Use exportValueGetter to add department codes, identifiers, or additional context for better data clarity:

Accessing Table Data

New in v1.9.4: The table ref now provides powerful methods to access all table data and configuration programmatically. Try clicking the "Get Table Info" button in the demo above!

getAllRows() - Access Complete Dataset

Returns all rows as TableRow[] objects, flattened and including nested/grouped rows. Each TableRow contains the raw data in the row property plus metadata like depth, position, and rowPath. Perfect for analytics, batch operations, or custom exports.

getHeaders() - Access Column Configuration

Returns the table's current header/column definitions. Useful for dynamic table manipulation or building custom UI controls.