@undevy-org/tablewright 0.7.9 → 0.8.0

package/dist/es/components/data-table/TableCsvExportButton.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { FileDown } from "lucide-react";
+import { resolveCsvExportLabel, resolveExportColumnsFromTable, exportTableToCsv, downloadCsvFile, resolveTableExportButtonSize, resolveTableExportButtonVariant, defaultTableRowCellText } from "../../lib/export-table-csv.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+function TableCsvExportButton({
+  table,
+  filename,
+  getCellText,
+  utf8Bom,
+  columnIds,
+  labels,
+  className,
+  variant,
+  size
+}) {
+  const buttonVariant = resolveTableExportButtonVariant(variant);
+  const buttonSize = resolveTableExportButtonSize(size);
+  const exportLabel = resolveCsvExportLabel(labels);
+  const handleExport = () => {
+    const columns = resolveExportColumnsFromTable(table, columnIds, labels?.columns);
+    const rows = table.getRowModel().rows.map((row) => row.original);
+    const resolveCellText = getCellText ?? ((row, columnId) => defaultTableRowCellText(row, columnId, table));
+    const csv = exportTableToCsv({
+      columns,
+      rows,
+      getCellText: resolveCellText
+    });
+    downloadCsvFile(csv, filename, { utf8Bom });
+  };
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: buttonVariant,
+      size: buttonSize,
+      className: cn("shrink-0", className),
+      onClick: handleExport,
+      children: [
+        /* @__PURE__ */ jsx(FileDown, { className: "h-4 w-4" }),
+        exportLabel
+      ]
+    }
+  );
+}
+export {
+  TableCsvExportButton
+};

package/dist/es/components/layout/SidebarAccountMenu.js

@@ -104,7 +104,7 @@ function SidebarAccountMenu({
                         "aria-label": "Light",
                         onSelect: (event) => event.preventDefault(),
                         className: cn(
-                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
+                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[highlighted]:data-[state=checked]:bg-[var(--bg-hover)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
                         ),
                         children: /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" })
                       }
@@ -116,7 +116,7 @@ function SidebarAccountMenu({
                         "aria-label": "Dark",
                         onSelect: (event) => event.preventDefault(),
                         className: cn(
-                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
+                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[highlighted]:data-[state=checked]:bg-[var(--bg-hover)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
                         ),
                         children: /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
                       }

package/dist/es/index.js

@@ -32,6 +32,7 @@ import { RowActionsMenu } from "./components/data-table/RowActionsMenu.js";
 import { RowControlCell, RowControlHeader } from "./components/data-table/RowControlCell.js";
 import { SortableHeader } from "./components/data-table/SortableHeader.js";
 import { TableFooter } from "./components/data-table/TableFooter.js";
+import { TableCsvExportButton } from "./components/data-table/TableCsvExportButton.js";
 import { TableLayout } from "./components/data-table/TableLayout.js";
 import { useColumnResize } from "./components/data-table/hooks/use-column-resize.js";
 import { getVisiblePageNumbers } from "./components/data-table/hooks/use-table-pagination.js";
@@ -65,6 +66,7 @@ import { getCompoundValue, getDateRange, getNumberRange, getStringArray, isFilte
 import { useTableOrchestration } from "./hooks/useTableOrchestration.js";
 import { createTableOrchestrationStore, defaultValueForFilter } from "./hooks/table-orchestration-store.js";
 import { useRowDragOverride } from "./hooks/useRowDragOverride.js";
+import { downloadCsvFile, exportTableToCsv } from "./lib/export-table-csv.js";
 import { computeColumnGaps, gapColumnId } from "./lib/column-gaps.js";
 import { computeColumnStats } from "./lib/filter-stats.js";
 import { formatEnumLabel } from "./lib/format-enum.js";
@@ -162,6 +164,7 @@ export {
   SidebarAccountMenu,
   SidebarUser,
   SortableHeader,
+  TableCsvExportButton,
   TableFooter,
   TableLayout,
   Tabs,
@@ -183,6 +186,8 @@ export {
   createTableOrchestrationStore,
   defaultValueForFilter,
   displayTimeZone,
+  downloadCsvFile,
+  exportTableToCsv,
   formatDateParts,
   formatEnumLabel,
   formatLiveTimestamp,

package/dist/es/lib/export-table-csv.js

@@ -0,0 +1,82 @@
+const DEFAULT_CSV_EXPORT_LABEL = "Export CSV";
+function resolveCsvExportLabel(labels) {
+  return labels?.export ?? DEFAULT_CSV_EXPORT_LABEL;
+}
+function resolveTableExportButtonSize(size) {
+  return size ?? "default";
+}
+function resolveTableExportButtonVariant(variant) {
+  return variant ?? "secondary";
+}
+function escapeCsvField(value) {
+  if (/[",\r\n]/.test(value)) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function exportTableToCsv(options) {
+  const { columns, rows, getCellText } = options;
+  const headerLine = columns.map((column) => escapeCsvField(column.header)).join(",");
+  const bodyLines = rows.map(
+    (row) => columns.map((column) => escapeCsvField(getCellText(row, column.id))).join(",")
+  );
+  return [headerLine, ...bodyLines].join("\r\n");
+}
+function downloadCsvFile(content, filename, options) {
+  const utf8Bom = options?.utf8Bom ?? false;
+  const payload = utf8Bom ? `\uFEFF${content}` : content;
+  const blob = new Blob([payload], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename.endsWith(".csv") ? filename : `${filename}.csv`;
+  anchor.rel = "noopener";
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+function resolveColumnHeader(table, columnId, columnLabels) {
+  if (columnLabels?.[columnId]) {
+    return columnLabels[columnId];
+  }
+  const column = table.getColumn(columnId);
+  if (!column) {
+    return columnId;
+  }
+  const header = column.columnDef.header;
+  return typeof header === "string" ? header : columnId;
+}
+function resolveExportColumnsFromTable(table, columnIds, columnLabels) {
+  const ids = columnIds ?? table.getVisibleLeafColumns().map((column) => column.id);
+  return ids.map((id) => ({
+    id,
+    header: resolveColumnHeader(table, id, columnLabels)
+  }));
+}
+function defaultTableRowCellText(row, columnId, table) {
+  const tableRow = table.getRowModel().rows.find((candidate) => candidate.original === row);
+  if (!tableRow) {
+    return "";
+  }
+  const cell = tableRow.getAllCells().find((candidate) => candidate.column.id === columnId);
+  if (!cell) {
+    return "";
+  }
+  const value = cell.getValue();
+  if (value == null) {
+    return "";
+  }
+  return String(value);
+}
+export {
+  DEFAULT_CSV_EXPORT_LABEL,
+  defaultTableRowCellText,
+  downloadCsvFile,
+  exportTableToCsv,
+  resolveCsvExportLabel,
+  resolveExportColumnsFromTable,
+  resolveTableExportButtonSize,
+  resolveTableExportButtonVariant
+};

package/dist/styles.css

@@ -1676,6 +1676,9 @@
 .data-\[highlighted\]\:bg-\[var\(--bg-hover\)\][data-highlighted] {
     background-color: var(--bg-hover)
 }
+.data-\[highlighted\]\:data-\[state\=checked\]\:bg-\[var\(--bg-hover\)\][data-state="checked"][data-highlighted] {
+    background-color: var(--bg-hover)
+}
 .data-\[selected\=true\]\:bg-\[var\(--bg-hover\)\][data-selected="true"] {
     background-color: var(--bg-hover)
 }

package/dist/tablewright.cjs

@@ -1814,6 +1814,118 @@ function renderNumericPager(props) {
     )
   ] });
 }
+const DEFAULT_CSV_EXPORT_LABEL = "Export CSV";
+function resolveCsvExportLabel(labels) {
+  return labels?.export ?? DEFAULT_CSV_EXPORT_LABEL;
+}
+function resolveTableExportButtonSize(size) {
+  return size ?? "default";
+}
+function resolveTableExportButtonVariant(variant) {
+  return variant ?? "secondary";
+}
+function escapeCsvField(value) {
+  if (/[",\r\n]/.test(value)) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function exportTableToCsv(options) {
+  const { columns, rows, getCellText } = options;
+  const headerLine = columns.map((column) => escapeCsvField(column.header)).join(",");
+  const bodyLines = rows.map(
+    (row) => columns.map((column) => escapeCsvField(getCellText(row, column.id))).join(",")
+  );
+  return [headerLine, ...bodyLines].join("\r\n");
+}
+function downloadCsvFile(content, filename, options) {
+  const utf8Bom = options?.utf8Bom ?? false;
+  const payload = utf8Bom ? `\uFEFF${content}` : content;
+  const blob = new Blob([payload], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename.endsWith(".csv") ? filename : `${filename}.csv`;
+  anchor.rel = "noopener";
+  anchor.style.display = "none";
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  URL.revokeObjectURL(url);
+}
+function resolveColumnHeader(table, columnId, columnLabels) {
+  if (columnLabels?.[columnId]) {
+    return columnLabels[columnId];
+  }
+  const column = table.getColumn(columnId);
+  if (!column) {
+    return columnId;
+  }
+  const header = column.columnDef.header;
+  return typeof header === "string" ? header : columnId;
+}
+function resolveExportColumnsFromTable(table, columnIds, columnLabels) {
+  const ids = columnIds ?? table.getVisibleLeafColumns().map((column) => column.id);
+  return ids.map((id) => ({
+    id,
+    header: resolveColumnHeader(table, id, columnLabels)
+  }));
+}
+function defaultTableRowCellText(row, columnId, table) {
+  const tableRow = table.getRowModel().rows.find((candidate) => candidate.original === row);
+  if (!tableRow) {
+    return "";
+  }
+  const cell = tableRow.getAllCells().find((candidate) => candidate.column.id === columnId);
+  if (!cell) {
+    return "";
+  }
+  const value = cell.getValue();
+  if (value == null) {
+    return "";
+  }
+  return String(value);
+}
+function TableCsvExportButton({
+  table,
+  filename,
+  getCellText,
+  utf8Bom,
+  columnIds,
+  labels,
+  className,
+  variant,
+  size
+}) {
+  const buttonVariant = resolveTableExportButtonVariant(variant);
+  const buttonSize = resolveTableExportButtonSize(size);
+  const exportLabel = resolveCsvExportLabel(labels);
+  const handleExport = () => {
+    const columns = resolveExportColumnsFromTable(table, columnIds, labels?.columns);
+    const rows = table.getRowModel().rows.map((row) => row.original);
+    const resolveCellText = getCellText ?? ((row, columnId) => defaultTableRowCellText(row, columnId, table));
+    const csv = exportTableToCsv({
+      columns,
+      rows,
+      getCellText: resolveCellText
+    });
+    downloadCsvFile(csv, filename, { utf8Bom });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      type: "button",
+      variant: buttonVariant,
+      size: buttonSize,
+      className: cn("shrink-0", className),
+      onClick: handleExport,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "h-4 w-4" }),
+        exportLabel
+      ]
+    }
+  );
+}
 function useColumnResize(defaults, initialWidths) {
   const [widths, setWidths] = React.useState(() => {
     const w = {};
@@ -2306,7 +2418,7 @@ function SidebarAccountMenu({
                         "aria-label": "Light",
                         onSelect: (event) => event.preventDefault(),
                         className: cn(
-                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
+                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[highlighted]:data-[state=checked]:bg-[var(--bg-hover)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
                         ),
                         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" })
                       }
@@ -2318,7 +2430,7 @@ function SidebarAccountMenu({
                         "aria-label": "Dark",
                         onSelect: (event) => event.preventDefault(),
                         className: cn(
-                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
+                          "relative flex cursor-default select-none items-center justify-center rounded-md px-2 py-0 outline-none hover:bg-[var(--bg-hover)] data-[highlighted]:bg-[var(--bg-hover)] data-[state=checked]:bg-[var(--bg-secondary)] data-[highlighted]:data-[state=checked]:bg-[var(--bg-hover)] data-[state=checked]:text-[var(--text-primary)] text-[var(--text-secondary)]"
                         ),
                         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" })
                       }
@@ -5943,6 +6055,7 @@ exports.Sidebar = Sidebar;
 exports.SidebarAccountMenu = SidebarAccountMenu;
 exports.SidebarUser = SidebarUser;
 exports.SortableHeader = SortableHeader;
+exports.TableCsvExportButton = TableCsvExportButton;
 exports.TableFooter = TableFooter;
 exports.TableLayout = TableLayout;
 exports.Tabs = Tabs;
@@ -5964,6 +6077,8 @@ exports.computeColumnStats = computeColumnStats;
 exports.createTableOrchestrationStore = createTableOrchestrationStore;
 exports.defaultValueForFilter = defaultValueForFilter;
 exports.displayTimeZone = displayTimeZone;
+exports.downloadCsvFile = downloadCsvFile;
+exports.exportTableToCsv = exportTableToCsv;
 exports.formatDateParts = formatDateParts;
 exports.formatEnumLabel = formatEnumLabel;
 exports.formatLiveTimestamp = formatLiveTimestamp;

package/dist/tablewright.css

@@ -1524,6 +1524,9 @@
 .data-\[highlighted\]\:bg-\[var\(--bg-hover\)\][data-highlighted] {
     background-color: var(--bg-hover)
 }
+.data-\[highlighted\]\:data-\[state\=checked\]\:bg-\[var\(--bg-hover\)\][data-state="checked"][data-highlighted] {
+    background-color: var(--bg-hover)
+}
 .data-\[selected\=true\]\:bg-\[var\(--bg-hover\)\][data-selected="true"] {
     background-color: var(--bg-hover)
 }

package/dist/types/components/data-table/TableCsvExportButton.d.ts

@@ -0,0 +1,20 @@
+import type { Table } from "@tanstack/react-table";
+import { type ButtonProps } from "../ui/button.js";
+export type TableCsvExportButtonLabels = {
+    /** @default "Export CSV" */
+    export?: string;
+    columns?: Record<string, string>;
+};
+export type TableCsvExportButtonProps<TData> = {
+    table: Table<TData>;
+    filename: string;
+    getCellText?: (row: TData, columnId: string) => string;
+    utf8Bom?: boolean;
+    /** Defaults to visible leaf columns on the table instance. */
+    columnIds?: string[];
+    labels?: TableCsvExportButtonLabels;
+    className?: string;
+    variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
+};
+export declare function TableCsvExportButton<TData>({ table, filename, getCellText, utf8Bom, columnIds, labels, className, variant, size, }: TableCsvExportButtonProps<TData>): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -46,6 +46,8 @@ export { RowControlHeader } from "./components/data-table/RowControlCell.js";
 export type { RowControlHeaderProps } from "./components/data-table/RowControlCell.js";
 export { SortableHeader } from "./components/data-table/SortableHeader.js";
 export { TableFooter } from "./components/data-table/TableFooter.js";
+export { TableCsvExportButton } from "./components/data-table/TableCsvExportButton.js";
+export type { TableCsvExportButtonProps } from "./components/data-table/TableCsvExportButton.js";
 export { TableLayout } from "./components/data-table/TableLayout.js";
 export { useColumnResize } from "./components/data-table/hooks/use-column-resize.js";
 export { getVisiblePageNumbers } from "./components/data-table/hooks/use-table-pagination.js";
@@ -100,6 +102,8 @@ export { createTableOrchestrationStore, defaultValueForFilter, } from "./hooks/t
 export type { TableOrchestrationState, TableOrchestrationActions, TableOrchestrationStore, TableOrchestrationStoreApi, } from "./hooks/table-orchestration-store.js";
 export { useRowDragOverride } from "./hooks/useRowDragOverride.js";
 export type { UseRowDragOverrideResult } from "./hooks/useRowDragOverride.js";
+export { downloadCsvFile, exportTableToCsv, } from "./lib/export-table-csv.js";
+export type { DownloadCsvFileOptions, ExportTableToCsvOptions, } from "./lib/export-table-csv.js";
 export { computeColumnGaps, gapColumnId } from "./lib/column-gaps.js";
 export { computeColumnStats } from "./lib/filter-stats.js";
 export { formatEnumLabel } from "./lib/format-enum.js";

package/dist/types/lib/export-table-csv.d.ts

@@ -0,0 +1,26 @@
+import type { Table } from "@tanstack/react-table";
+export type ExportTableToCsvOptions<TRow> = {
+    columns: {
+        id: string;
+        header: string;
+    }[];
+    rows: TRow[];
+    getCellText: (row: TRow, columnId: string) => string;
+};
+export declare const DEFAULT_CSV_EXPORT_LABEL = "Export CSV";
+export declare function resolveCsvExportLabel(labels?: {
+    export?: string;
+}): string;
+export declare function resolveTableExportButtonSize<TSize extends string | null | undefined>(size: TSize): NonNullable<TSize> | "default";
+export declare function resolveTableExportButtonVariant<TVariant extends string | null | undefined>(variant: TVariant): NonNullable<TVariant> | "secondary";
+export type DownloadCsvFileOptions = {
+    /** Prepends a UTF-8 BOM so Excel recognizes UTF-8. @default false */
+    utf8Bom?: boolean;
+};
+export declare function exportTableToCsv<TRow>(options: ExportTableToCsvOptions<TRow>): string;
+export declare function downloadCsvFile(content: string, filename: string, options?: DownloadCsvFileOptions): void;
+export declare function resolveExportColumnsFromTable<TData>(table: Table<TData>, columnIds?: string[], columnLabels?: Record<string, string>): {
+    id: string;
+    header: string;
+}[];
+export declare function defaultTableRowCellText<TData>(row: TData, columnId: string, table: Table<TData>): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.7.9",
+  "version": "0.8.0",
   "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
   "license": "MIT",
   "repository": {