@dynostack/react-grid 0.3.1 → 0.4.0

package/dist/index.d.cts

@@ -1,7 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
 import * as React$1 from 'react';
 import { CSSProperties } from 'react';
+import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
 
 type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
 type CustomRowAction<TData> = {
@@ -20,7 +19,7 @@ type DataTableRowActionsProps<TData> = {
     onSaveEdit?: () => void;
     onCancelEdit?: () => void;
 };
-declare function DataTableRowActions<TData>({ row, actions, customActions, onAction, isEditing, onSaveEdit, onCancelEdit, }: DataTableRowActionsProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableRowActions<TData>({ row, actions, customActions, onAction, isEditing, onSaveEdit, onCancelEdit, }: DataTableRowActionsProps<TData>): React$1.JSX.Element;
 
 /**
  * CSS variable overrides for a single DataTable instance.
@@ -157,7 +156,7 @@ type ViewSheetLabels = {
 type ViewSheetConfig<TData> = {
     /** Side of the screen to slide in from. Defaults to "right". */
     side?: SheetSide;
-    /** Initial column count. Defaults to "compact" (1 column). */
+    /** Initial layout density. Defaults to "compact" (more fields per row). */
     defaultDensity?: ViewSheetDensity;
     /** Hide the density tabs entirely if you want a fixed layout. */
     hideDensityTabs?: boolean;
@@ -357,6 +356,18 @@ type DataTableProps<TData extends {
     pageSizeOptions?: number[];
     initialColumnPinning?: ColumnPinningState;
     initialColumnVisibility?: VisibilityState;
+    /** Initial sort order. */
+    initialSorting?: SortingState;
+    /** Observe selected row objects (loaded rows only in server mode). */
+    onSelectionChange?: (rows: TData[]) => void;
+    /** Accessible table name. */
+    ariaLabel?: string;
+    /** Alternating row backgrounds. */
+    striped?: boolean;
+    /** Keep headers visible inside a vertically constrained table. */
+    stickyHeader?: boolean;
+    /** Scroll viewport height, e.g. "480px". */
+    maxHeight?: React.CSSProperties["maxHeight"];
     /** Optional controlled global filter (for cross-tab persistence). */
     globalFilter?: string;
     onGlobalFilterChange?: (value: string) => void;
@@ -396,7 +407,7 @@ type DataTableProps<TData extends {
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, initialSorting, onSelectionChange, ariaLabel, striped, stickyHeader, maxHeight, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): React$1.JSX.Element;
 
 /**
  * Shared portal container for every overlay inside a DataTable (popover,
@@ -426,13 +437,13 @@ type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
     title: string;
 };
-declare function DataTableColumnHeader<TData, TValue>({ column, title, }: Props$2<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTableColumnHeader<TData, TValue>({ column, title, }: Props$2<TData, TValue>): React$1.JSX.Element;
 
 type Props$1<TData> = {
     table: Table<TData>;
     pageSizeOptions?: number[];
 };
-declare function DataTablePagination<TData>({ table, pageSizeOptions, }: Props$1<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTablePagination<TData>({ table, pageSizeOptions, }: Props$1<TData>): React$1.JSX.Element;
 
 type ToolbarFeatureFlags = {
     search?: boolean;
@@ -468,7 +479,7 @@ type Props<TData> = {
     features?: ToolbarFeatureFlags;
     labels?: ToolbarLabels;
 };
-declare function DataTableToolbar<TData>({ table, totalRecords, isFetching, onRefresh, onAddRow, onBulkDelete, exportFileName, globalFilter, onGlobalFilterChange, toolbarSlot, features, labels: labelsProp, }: Props<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableToolbar<TData>({ table, totalRecords, isFetching, onRefresh, onAddRow, onBulkDelete, exportFileName, globalFilter, onGlobalFilterChange, toolbarSlot, features, labels: labelsProp, }: Props<TData>): React$1.JSX.Element;
 
 type EditableCellProps<TData, TValue> = CellContext<TData, TValue> & {
     isEditing: boolean;
@@ -478,7 +489,7 @@ type EditableCellProps<TData, TValue> = CellContext<TData, TValue> & {
     onCancel: () => void;
     onStartEdit: () => void;
 };
-declare function EditableCell<TData, TValue>({ getValue, column, row, isEditing, autoOpen, onCommit, onCancel, onStartEdit, }: EditableCellProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function EditableCell<TData, TValue>({ getValue, column, row, isEditing, autoOpen, onCommit, onCancel, onStartEdit, }: EditableCellProps<TData, TValue>): React$1.JSX.Element;
 
 type TextOp = "contains" | "notContains" | "equals" | "notEqual" | "startsWith" | "endsWith" | "blank" | "notBlank";
 type NumberOp = "equals" | "notEqual" | "lessThan" | "lessThanOrEqual" | "greaterThan" | "greaterThanOrEqual" | "inRange" | "blank" | "notBlank";
@@ -507,9 +518,11 @@ type CommonProps<TData, TValue> = {
     column: Column<TData, TValue>;
     onClose: () => void;
 };
-declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TValue>): react_jsx_runtime.JSX.Element | null;
+declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TValue>): React$1.JSX.Element | null;
 
+/** Neutralize spreadsheet formulas in untrusted text; preserve real numbers. */
+declare function sanitizeSpreadsheetValue(value: unknown): string;
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, sanitizeSpreadsheetValue, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };

package/dist/index.d.ts

@@ -1,7 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
 import * as React$1 from 'react';
 import { CSSProperties } from 'react';
+import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
 
 type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
 type CustomRowAction<TData> = {
@@ -20,7 +19,7 @@ type DataTableRowActionsProps<TData> = {
     onSaveEdit?: () => void;
     onCancelEdit?: () => void;
 };
-declare function DataTableRowActions<TData>({ row, actions, customActions, onAction, isEditing, onSaveEdit, onCancelEdit, }: DataTableRowActionsProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableRowActions<TData>({ row, actions, customActions, onAction, isEditing, onSaveEdit, onCancelEdit, }: DataTableRowActionsProps<TData>): React$1.JSX.Element;
 
 /**
  * CSS variable overrides for a single DataTable instance.
@@ -157,7 +156,7 @@ type ViewSheetLabels = {
 type ViewSheetConfig<TData> = {
     /** Side of the screen to slide in from. Defaults to "right". */
     side?: SheetSide;
-    /** Initial column count. Defaults to "compact" (1 column). */
+    /** Initial layout density. Defaults to "compact" (more fields per row). */
     defaultDensity?: ViewSheetDensity;
     /** Hide the density tabs entirely if you want a fixed layout. */
     hideDensityTabs?: boolean;
@@ -357,6 +356,18 @@ type DataTableProps<TData extends {
     pageSizeOptions?: number[];
     initialColumnPinning?: ColumnPinningState;
     initialColumnVisibility?: VisibilityState;
+    /** Initial sort order. */
+    initialSorting?: SortingState;
+    /** Observe selected row objects (loaded rows only in server mode). */
+    onSelectionChange?: (rows: TData[]) => void;
+    /** Accessible table name. */
+    ariaLabel?: string;
+    /** Alternating row backgrounds. */
+    striped?: boolean;
+    /** Keep headers visible inside a vertically constrained table. */
+    stickyHeader?: boolean;
+    /** Scroll viewport height, e.g. "480px". */
+    maxHeight?: React.CSSProperties["maxHeight"];
     /** Optional controlled global filter (for cross-tab persistence). */
     globalFilter?: string;
     onGlobalFilterChange?: (value: string) => void;
@@ -396,7 +407,7 @@ type DataTableProps<TData extends {
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, initialSorting, onSelectionChange, ariaLabel, striped, stickyHeader, maxHeight, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): React$1.JSX.Element;
 
 /**
  * Shared portal container for every overlay inside a DataTable (popover,
@@ -426,13 +437,13 @@ type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
     title: string;
 };
-declare function DataTableColumnHeader<TData, TValue>({ column, title, }: Props$2<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTableColumnHeader<TData, TValue>({ column, title, }: Props$2<TData, TValue>): React$1.JSX.Element;
 
 type Props$1<TData> = {
     table: Table<TData>;
     pageSizeOptions?: number[];
 };
-declare function DataTablePagination<TData>({ table, pageSizeOptions, }: Props$1<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTablePagination<TData>({ table, pageSizeOptions, }: Props$1<TData>): React$1.JSX.Element;
 
 type ToolbarFeatureFlags = {
     search?: boolean;
@@ -468,7 +479,7 @@ type Props<TData> = {
     features?: ToolbarFeatureFlags;
     labels?: ToolbarLabels;
 };
-declare function DataTableToolbar<TData>({ table, totalRecords, isFetching, onRefresh, onAddRow, onBulkDelete, exportFileName, globalFilter, onGlobalFilterChange, toolbarSlot, features, labels: labelsProp, }: Props<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTableToolbar<TData>({ table, totalRecords, isFetching, onRefresh, onAddRow, onBulkDelete, exportFileName, globalFilter, onGlobalFilterChange, toolbarSlot, features, labels: labelsProp, }: Props<TData>): React$1.JSX.Element;
 
 type EditableCellProps<TData, TValue> = CellContext<TData, TValue> & {
     isEditing: boolean;
@@ -478,7 +489,7 @@ type EditableCellProps<TData, TValue> = CellContext<TData, TValue> & {
     onCancel: () => void;
     onStartEdit: () => void;
 };
-declare function EditableCell<TData, TValue>({ getValue, column, row, isEditing, autoOpen, onCommit, onCancel, onStartEdit, }: EditableCellProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function EditableCell<TData, TValue>({ getValue, column, row, isEditing, autoOpen, onCommit, onCancel, onStartEdit, }: EditableCellProps<TData, TValue>): React$1.JSX.Element;
 
 type TextOp = "contains" | "notContains" | "equals" | "notEqual" | "startsWith" | "endsWith" | "blank" | "notBlank";
 type NumberOp = "equals" | "notEqual" | "lessThan" | "lessThanOrEqual" | "greaterThan" | "greaterThanOrEqual" | "inRange" | "blank" | "notBlank";
@@ -507,9 +518,11 @@ type CommonProps<TData, TValue> = {
     column: Column<TData, TValue>;
     onClose: () => void;
 };
-declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TValue>): react_jsx_runtime.JSX.Element | null;
+declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TValue>): React$1.JSX.Element | null;
 
+/** Neutralize spreadsheet formulas in untrusted text; preserve real numbers. */
+declare function sanitizeSpreadsheetValue(value: unknown): string;
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, sanitizeSpreadsheetValue, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useId } from 'react';
 import { useReactTable, getPaginationRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
-import { Trash2Icon, XIcon, SearchIcon, RefreshCwIcon, ColumnsIcon, DownloadIcon, FileTextIcon, FileSpreadsheetIcon, PlusIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PinOffIcon, PinIcon, EyeOffIcon, FilterIcon, CheckIcon, MoreHorizontalIcon, ChevronDownIcon, GripVerticalIcon, Loader2Icon, MinusIcon, CopyIcon, PencilIcon, EyeIcon, ChevronUpIcon, LayoutGridIcon, Rows3Icon, ListIcon } from 'lucide-react';
+import { Trash2Icon, XIcon, SearchIcon, RefreshCwIcon, ColumnsIcon, DownloadIcon, FileTextIcon, FileSpreadsheetIcon, PlusIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PinOffIcon, PinIcon, EyeOffIcon, FilterIcon, CheckIcon, MoreHorizontalIcon, ChevronDownIcon, GripVerticalIcon, Loader2Icon, MinusIcon, CopyIcon, PencilIcon, EyeIcon, ChevronUpIcon, ListIcon, Rows3Icon, LayoutGridIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot, Separator as Separator$1, Popover as Popover$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, Select as Select$1, Dialog, AlertDialog as AlertDialog$1 } from 'radix-ui';
@@ -281,15 +281,21 @@ function PopoverContent({
 }
 
 // src/export.ts
+function sanitizeSpreadsheetValue(value) {
+  if (value == null) return "";
+  const text = String(value);
+  if (typeof value === "string" && (/^[\s\u0000-\u001f]*[=+\-@＝＋－＠]/u.test(text) || /^[\t\r\n]/.test(text))) return `'${text}`;
+  return text;
+}
 function escapeCsv(value) {
   if (value === null || value === void 0) return "";
-  const s = String(value);
+  const s = sanitizeSpreadsheetValue(value);
   if (/[",\n\r]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
   return s;
 }
 function escapeHtml(value) {
   if (value === null || value === void 0) return "";
-  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return sanitizeSpreadsheetValue(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function getExportRows(table) {
   const visible = table.getVisibleLeafColumns().filter((c) => {
@@ -1899,7 +1905,7 @@ function EditableCell({
     if (typeof flag === "function") return flag(row.original);
     return flag;
   })();
-  if (!isEditing) {
+  if (!isEditing || !isEditable) {
     const display = renderDisplay(initial, editor, meta);
     return /* @__PURE__ */ jsx(
       "div",
@@ -1916,7 +1922,9 @@ function EditableCell({
       }
     );
   }
-  const commit = (value) => onCommit(value);
+  const commit = (value) => {
+    if (isEditable) onCommit(value);
+  };
   const handleKey = (e) => {
     if (e.key === "Enter") commit(local);
     else if (e.key === "Escape") onCancel();
@@ -2046,6 +2054,9 @@ var TOKEN_TO_VAR = {
   radius: "--radius",
   fontFamily: "--font-family"
 };
+function isSafeToken(value) {
+  return typeof value === "string" && !/[;{}<>@\\\u0000-\u001f]/.test(value) && !/\/\*|\*\/|url\s*\(|expression\s*\(/i.test(value);
+}
 function isModed(theme) {
   if (!theme) return false;
   return "light" in theme || "dark" in theme;
@@ -2054,8 +2065,8 @@ function tokensToStyle(tokens) {
   if (!tokens) return {};
   const out = {};
   for (const [k, v] of Object.entries(tokens)) {
-    if (v == null) continue;
-    const cssVar = TOKEN_TO_VAR[k];
+    if (!isSafeToken(v)) continue;
+    const cssVar = Object.prototype.hasOwnProperty.call(TOKEN_TO_VAR, k) ? TOKEN_TO_VAR[k] : void 0;
     if (cssVar) out[cssVar] = v;
   }
   return out;
@@ -2129,8 +2140,8 @@ function tokensToCssBlock(tokens) {
   if (!tokens) return "";
   const parts = [];
   for (const [k, v] of Object.entries(tokens)) {
-    if (v == null) continue;
-    const cssVar = TOKEN_TO_VAR[k];
+    if (!isSafeToken(v)) continue;
+    const cssVar = Object.prototype.hasOwnProperty.call(TOKEN_TO_VAR, k) ? TOKEN_TO_VAR[k] : void 0;
     if (cssVar) parts.push(`${cssVar}:${v}`);
   }
   return parts.join(";");
@@ -2214,8 +2225,8 @@ function SheetOverlay({
   );
 }
 var SIDE_CLASS = {
-  right: "right-0 top-0 h-full w-3/4 max-w-md border-l data-closed:slide-out-to-right data-open:slide-in-from-right",
-  left: "left-0 top-0 h-full w-3/4 max-w-md border-r data-closed:slide-out-to-left data-open:slide-in-from-left",
+  right: "right-0 top-0 h-full w-full border-l sm:w-[min(48rem,calc(100vw-2rem))] data-closed:slide-out-to-right data-open:slide-in-from-right",
+  left: "left-0 top-0 h-full w-full border-r sm:w-[min(48rem,calc(100vw-2rem))] data-closed:slide-out-to-left data-open:slide-in-from-left",
   top: "left-0 top-0 w-full max-h-[80vh] border-b data-closed:slide-out-to-top data-open:slide-in-from-top",
   bottom: "left-0 bottom-0 w-full max-h-[80vh] border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom"
 };
@@ -2290,14 +2301,19 @@ function SheetDescription({
   );
 }
 var COLS_CLASS = {
-  compact: "grid-cols-1",
+  compact: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
   relaxed: "grid-cols-1 sm:grid-cols-2",
-  comfy: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+  comfy: "grid-cols-1"
+};
+var CARD_CLASS = {
+  compact: "gap-0.5 p-2.5",
+  relaxed: "gap-1 p-3",
+  comfy: "gap-1.5 p-4"
 };
 var DENSITY_ICON = {
-  compact: /* @__PURE__ */ jsx(ListIcon, { className: "size-3.5" }),
+  compact: /* @__PURE__ */ jsx(LayoutGridIcon, { className: "size-3.5" }),
   relaxed: /* @__PURE__ */ jsx(Rows3Icon, { className: "size-3.5" }),
-  comfy: /* @__PURE__ */ jsx(LayoutGridIcon, { className: "size-3.5" })
+  comfy: /* @__PURE__ */ jsx(ListIcon, { className: "size-3.5" })
 };
 function DataTableViewSheet({
   table,
@@ -2370,10 +2386,13 @@ function DataTableViewSheet({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex flex-col gap-0.5 rounded-md border bg-card p-2.5",
+          className: cn(
+            "flex min-w-0 flex-col rounded-md border bg-card",
+            CARD_CLASS[density]
+          ),
           children: [
             /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: headerLabel }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground break-words", children: rendered })
+            /* @__PURE__ */ jsx("span", { className: "break-words text-sm text-foreground", children: rendered })
           ]
         },
         colId
@@ -2398,11 +2417,15 @@ function AlertDialogContent({
   ...props
 }) {
   const container = usePortalContainer();
+  const positionClass = container ? "absolute" : "fixed";
   return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { container: container ?? void 0, children: [
     /* @__PURE__ */ jsx(
       AlertDialog$1.Overlay,
       {
-        className: "fixed inset-0 z-50 bg-foreground/30 backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0"
+        className: cn(
+          "inset-0 z-50 bg-foreground/30 backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+          positionClass
+        )
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2410,7 +2433,8 @@ function AlertDialogContent({
       {
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          positionClass,
           className
         ),
         ...props,
@@ -2541,6 +2565,10 @@ function useEditingContext() {
   if (!ctx) throw new Error("DataTable editing context missing");
   return ctx;
 }
+function DefaultCellHost(ctx) {
+  const value = ctx.getValue();
+  return value == null ? null : String(value);
+}
 function EditableCellHost(ctx) {
   const {
     editingCell,
@@ -2629,6 +2657,7 @@ function ActionsCellHost({ row }) {
           onView?.(row.original);
         } else if (a === "delete") {
           onRequestDelete?.(row.original);
+          return;
         }
         onRowAction?.(a, row.original);
       }
@@ -2661,6 +2690,7 @@ var DENSITY_CLASS = {
   default: "",
   comfortable: "[&_tbody_td]:py-2"
 };
+var EMPTY_DATA = [];
 function DataTable({
   data,
   columns,
@@ -2684,6 +2714,12 @@ function DataTable({
   pageSizeOptions,
   initialColumnPinning,
   initialColumnVisibility,
+  initialSorting,
+  onSelectionChange,
+  ariaLabel = "Data table",
+  striped = false,
+  stickyHeader = false,
+  maxHeight,
   globalFilter: globalFilterProp,
   onGlobalFilterChange,
   className,
@@ -2760,7 +2796,7 @@ function DataTable({
     }
     setConfirmCtx(null);
   };
-  const [sorting, setSorting] = useState([]);
+  const [sorting, setSorting] = useState(initialSorting ?? []);
   const [columnFilters, setColumnFilters] = useState([]);
   const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
   const isControlledFilter = globalFilterProp !== void 0;
@@ -2856,7 +2892,7 @@ function DataTable({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     ...dataSourceDeps
   ]);
-  const baseData = dataSourceEnabled ? sourceRows : data ?? [];
+  const baseData = dataSourceEnabled ? sourceRows : data ?? EMPTY_DATA;
   const effectiveIsLoading = dataSourceEnabled ? sourceLoading : isLoading;
   const effectiveIsFetching = dataSourceEnabled ? sourceFetching : isFetching;
   const effectiveOnRefresh = dataSourceEnabled ? () => setSourceRefreshKey((key) => key + 1) : onRefresh;
@@ -2900,7 +2936,7 @@ function DataTable({
             title: headerLabel
           }
         ),
-        cell: hasEditor ? EditableCellHost : original
+        cell: hasEditor ? EditableCellHost : original ?? DefaultCellHost
       };
     };
     const built = columns.map(wrap);
@@ -3012,10 +3048,10 @@ function DataTable({
     enableColumnFilters: f.filtering,
     enableColumnResizing: f.resizing,
     columnResizeMode: "onChange",
-    enableRowSelection: true,
+    enableRowSelection: enableSelection,
     enableExpanding: !!(renderSubRow || getSubRows),
     enablePinning: f.pinning,
-    manualPagination: isServerSideDataSource,
+    manualPagination: isServerSideDataSource || !f.pagination,
     manualSorting: isServerSideDataSource,
     manualFiltering: isServerSideDataSource,
     pageCount: isServerSideDataSource ? Math.max(1, Math.ceil(effectiveTotalRecords / pagination.pageSize)) : void 0,
@@ -3105,6 +3141,11 @@ function DataTable({
     setEditingRowId(tempId);
   } : void 0;
   const rows = table.getRowModel().rows;
+  const selectionCallback = useRef(onSelectionChange);
+  selectionCallback.current = onSelectionChange;
+  useEffect(() => {
+    selectionCallback.current?.(table.getSelectedRowModel().flatRows.map((row) => row.original));
+  }, [rowSelection, mergedData, table]);
   const visibleLeafCount = table.getVisibleLeafColumns().length;
   const editingContextValue = useMemo(
     () => ({
@@ -3182,17 +3223,18 @@ function DataTable({
                 labels
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-auto", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-auto", style: { maxHeight }, children: [
               /* @__PURE__ */ jsxs(
                 "table",
                 {
-                  className: "w-full caption-bottom text-sm",
+                  "aria-label": ariaLabel,
+                  className: cn("w-full caption-bottom text-sm", striped && "[&_tbody>tr:nth-child(even)]:bg-muted/25"),
                   style: {
                     width: table.getCenterTotalSize() ? void 0 : "100%",
                     minWidth: "100%"
                   },
                   children: [
-                    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/70", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: hg.headers.map((header) => {
+                    /* @__PURE__ */ jsx("thead", { className: cn("bg-card", stickyHeader && "sticky top-0 z-10"), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: hg.headers.map((header) => {
                       const meta = header.column.columnDef.meta;
                       const isUtility = header.column.id === "__select" || header.column.id === "__expand" || header.column.id === "__actions";
                       const isPinned = !!header.column.getIsPinned();
@@ -3368,6 +3410,6 @@ function renderSkeleton(cols, rows) {
   return Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: Array.from({ length: cols }).map((__, c) => /* @__PURE__ */ jsx("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, c)) }, r));
 }
 
-export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, PortalContainerContext, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };
+export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, PortalContainerContext, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, sanitizeSpreadsheetValue, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map