@rovula/ui 0.1.39 → 0.1.41

package/dist/esm/types/components/DataTable/DataTable.d.ts

@@ -52,6 +52,15 @@ export interface DataTableProps<TData, TValue> extends DataTableEditingProps<TDa
     loading?: boolean;
     /** Label for the initial-loading state (default: "Loading…"). */
     loadingLabel?: string;
+    /** Icon rendered in the empty-state placeholder. Replaces the default `ClipboardList` icon. */
+    emptyIcon?: React.ReactNode;
+    /** Text rendered in the empty-state placeholder (default: "There is no information yet."). */
+    emptyText?: React.ReactNode;
+    /**
+     * Fully replaces the empty-state cell content. When provided, `emptyIcon` and
+     * `emptyText` are ignored.
+     */
+    renderEmpty?: () => React.ReactNode;
     /**
      * When true, DataTable will only render a vertical window of rows based on
      * the scroll position of its internal scroll container. This is a basic
@@ -197,4 +206,4 @@ export interface ColumnManagementOptions {
     /** Show "Show all" button. @default true */
     showAll?: boolean;
 }
-export declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, paginationMode, totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore, fetchingMoreLabel, loading, loadingLabel, highlightRowId, scrollToHighlightOnMouseLeave, selectable, onRowSelectionChange, rowActions, reorderable, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered, surface, striped, divided, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility, tableLayout, columnManagement: columnManagementProp, resizable, columnMinSize, columnMaxSize, virtualized, virtualRowEstimate, className, enableEditing, editDisplayMode, editTrigger, onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, paginationMode, totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore, fetchingMoreLabel, loading, loadingLabel, emptyIcon, emptyText, renderEmpty, highlightRowId, scrollToHighlightOnMouseLeave, selectable, onRowSelectionChange, rowActions, reorderable, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered, surface, striped, divided, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility, tableLayout, columnManagement: columnManagementProp, resizable, columnMinSize, columnMaxSize, virtualized, virtualRowEstimate, className, enableEditing, editDisplayMode, editTrigger, onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/DataTable/DataTable.stories.d.ts

@@ -48,6 +48,9 @@ declare const meta: {
         fetchingMoreLabel?: string | undefined;
         loading?: boolean | undefined;
         loadingLabel?: string | undefined;
+        emptyIcon?: React.ReactNode;
+        emptyText?: React.ReactNode;
+        renderEmpty?: (() => React.ReactNode) | undefined;
         virtualized?: boolean | undefined;
         virtualRowEstimate?: number | undefined;
         highlightRowId?: string | string[] | undefined;
@@ -165,6 +168,11 @@ export declare const PerformanceLargeDataset: StoryObj;
 export declare const WithVirtualizedRows: StoryObj;
 /** Checkbox selection — header checkbox selects all; row checkboxes select individually. */
 export declare const WithSelection: StoryObj;
+/**
+ * Select rows then hit "Delete selected" — the header checkbox should clear
+ * automatically once the rows are gone (regression test for stale selection state).
+ */
+export declare const WithSelectionAndDelete: StoryObj;
 /**
  * Row highlight + scroll — use `highlightRowId` to visually mark important rows
  * (uses the same token as selected rows) and automatically scroll them into view.

package/dist/index.d.ts

@@ -958,6 +958,15 @@ interface DataTableProps<TData, TValue> extends DataTableEditingProps<TData> {
     loading?: boolean;
     /** Label for the initial-loading state (default: "Loading…"). */
     loadingLabel?: string;
+    /** Icon rendered in the empty-state placeholder. Replaces the default `ClipboardList` icon. */
+    emptyIcon?: React__default.ReactNode;
+    /** Text rendered in the empty-state placeholder (default: "There is no information yet."). */
+    emptyText?: React__default.ReactNode;
+    /**
+     * Fully replaces the empty-state cell content. When provided, `emptyIcon` and
+     * `emptyText` are ignored.
+     */
+    renderEmpty?: () => React__default.ReactNode;
     /**
      * When true, DataTable will only render a vertical window of rows based on
      * the scroll position of its internal scroll container. This is a basic
@@ -1103,7 +1112,7 @@ interface ColumnManagementOptions {
     /** Show "Show all" button. @default true */
     showAll?: boolean;
 }
-declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, paginationMode, totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore, fetchingMoreLabel, loading, loadingLabel, highlightRowId, scrollToHighlightOnMouseLeave, selectable, onRowSelectionChange, rowActions, reorderable, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered, surface, striped, divided, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility, tableLayout, columnManagement: columnManagementProp, resizable, columnMinSize, columnMaxSize, virtualized, virtualRowEstimate, className, enableEditing, editDisplayMode, editTrigger, onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, paginationMode, totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore, fetchingMoreLabel, loading, loadingLabel, emptyIcon, emptyText, renderEmpty, highlightRowId, scrollToHighlightOnMouseLeave, selectable, onRowSelectionChange, rowActions, reorderable, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered, surface, striped, divided, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility, tableLayout, columnManagement: columnManagementProp, resizable, columnMinSize, columnMaxSize, virtualized, virtualRowEstimate, className, enableEditing, editDisplayMode, editTrigger, onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;

package/dist/src/theme/global.css

@@ -50,13 +50,13 @@
   --state-primary-default-skyller: #2563eb;
   --state-primary-hover-xspector: #ddcd00;
   --state-primary-hover-report-xspector-light-mode: #35475b;
-  --state-primary-hover-skyller: #6692f1;
+  --state-primary-hover-skyller: #1e4fbc;
   --state-primary-stroke-xspector: rgba(177 164 0 / 0.48);
   --state-primary-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.64);
   --state-primary-stroke-skyller: rgba(189 189 189 / 0.64);
   --state-primary-hover-bg-xspector: rgba(221 205 0 / 0.08);
   --state-primary-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
-  --state-primary-hover-bg-skyller: rgba(102 146 241 / 0.08);
+  --state-primary-hover-bg-skyller: rgba(30 79 188 / 0.08);
   --state-primary-pressed-xspector: #6f6700;
   --state-primary-pressed-report-xspector-light-mode: #152333;
   --state-primary-pressed-skyller: #1e40af;
@@ -71,7 +71,7 @@
   --state-primary-text-outline-skyller: #2563eb;
   --state-primary-text-hover-xspector: #ddcd00;
   --state-primary-text-hover-report-xspector-light-mode: #35475b;
-  --state-primary-text-hover-skyller: #6692f1;
+  --state-primary-text-hover-skyller: #1e4fbc;
   --state-primary-text-pressed-xspector: #6f6700;
   --state-primary-text-pressed-report-xspector-light-mode: #152333;
   --state-primary-text-pressed-skyller: #1e40af;
@@ -80,13 +80,13 @@
   --state-secondary-default-skyller: #171717;
   --state-secondary-hover-xspector: #fafafa;
   --state-secondary-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-hover-skyller: #424242;
+  --state-secondary-hover-skyller: #000000;
   --state-secondary-stroke-xspector: rgba(236 236 236 / 0.48);
   --state-secondary-stroke-report-xspector-light-mode: rgba(155 143 0 / 0.64);
   --state-secondary-stroke-skyller: rgba(189 189 189 / 0.64);
   --state-secondary-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --state-secondary-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
-  --state-secondary-hover-bg-skyller: rgba(66 66 66 / 0.08);
+  --state-secondary-hover-bg-skyller: rgba(0 0 0 / 0.08);
   --state-secondary-pressed-xspector: #bbbbbb;
   --state-secondary-pressed-report-xspector-light-mode: #6f6700;
   --state-secondary-pressed-skyller: #000000;
@@ -101,7 +101,7 @@
   --state-secondary-text-outline-skyller: #171717;
   --state-secondary-text-hover-xspector: #fafafa;
   --state-secondary-text-hover-report-xspector-light-mode: #b1a400;
-  --state-secondary-text-hover-skyller: #424242;
+  --state-secondary-text-hover-skyller: #000000;
   --state-secondary-text-pressed-xspector: #c5c5c5;
   --state-secondary-text-pressed-report-xspector-light-mode: #6f6700;
   --state-secondary-text-pressed-skyller: #000000;
@@ -110,13 +110,13 @@
   --state-tertiary-default-skyller: #60a5fa;
   --state-tertiary-hover-xspector: #adcad6;
   --state-tertiary-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-hover-skyller: #90c0fc;
+  --state-tertiary-hover-skyller: #4d84c8;
   --state-tertiary-stroke-xspector: rgba(138 162 171 / 0.48);
   --state-tertiary-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
   --state-tertiary-stroke-skyller: rgba(189 189 189 / 0.48);
   --state-tertiary-hover-bg-xspector: rgba(173 202 214 / 0.08);
   --state-tertiary-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
-  --state-tertiary-hover-bg-skyller: rgba(144 192 252 / 0.08);
+  --state-tertiary-hover-bg-skyller: rgba(77 132 200 / 0.08);
   --state-tertiary-pressed-xspector: #57656b;
   --state-tertiary-pressed-report-xspector-light-mode: #b1b1b1;
   --state-tertiary-pressed-skyller: #1e40af;
@@ -131,7 +131,7 @@
   --state-tertiary-text-outline-skyller: #60a5fa;
   --state-tertiary-text-hover-xspector: #adcad6;
   --state-tertiary-text-hover-report-xspector-light-mode: #6f6f6f;
-  --state-tertiary-text-hover-skyller: #90c0fc;
+  --state-tertiary-text-hover-skyller: #4d84c8;
   --state-tertiary-text-pressed-xspector: #57656b;
   --state-tertiary-text-pressed-report-xspector-light-mode: #b1b1b1;
   --state-tertiary-text-pressed-skyller: #1e40af;
@@ -140,13 +140,13 @@
   --state-info-default-skyller: #2563eb;
   --state-info-hover-xspector: #2998ff;
   --state-info-hover-report-xspector-light-mode: #2998ff;
-  --state-info-hover-skyller: #6692f1;
+  --state-info-hover-skyller: #1d4ed8;
   --state-info-stroke-xspector: rgba(27 125 245 / 0.48);
   --state-info-stroke-report-xspector-light-mode: rgba(41 152 255 / 0.48);
   --state-info-stroke-skyller: rgba(37 99 235 / 0.48);
   --state-info-hover-bg-xspector: rgba(41 152 255 / 0.08);
   --state-info-hover-bg-report-xspector-light-mode: rgba(41 152 255 / 0.08);
-  --state-info-hover-bg-skyller: rgba(102 146 241 / 0.08);
+  --state-info-hover-bg-skyller: rgba(29 78 216 / 0.08);
   --state-info-pressed-xspector: #1752b6;
   --state-info-pressed-report-xspector-light-mode: #1752b6;
   --state-info-pressed-skyller: #1e40af;
@@ -161,7 +161,7 @@
   --state-info-text-outline-skyller: #2563eb;
   --state-info-text-hover-xspector: #2998ff;
   --state-info-text-hover-report-xspector-light-mode: #2998ff;
-  --state-info-text-hover-skyller: #6692f1;
+  --state-info-text-hover-skyller: #1d4ed8;
   --state-info-text-pressed-xspector: #1752b6;
   --state-info-text-pressed-report-xspector-light-mode: #1752b6;
   --state-info-text-pressed-skyller: #1e40af;
@@ -170,13 +170,13 @@
   --state-success-default-skyller: #16a34a;
   --state-success-hover-xspector: #54d62c;
   --state-success-hover-report-xspector-light-mode: #54d62c;
-  --state-success-hover-skyller: #4ade80;
+  --state-success-hover-skyller: #15803d;
   --state-success-stroke-xspector: rgba(49 153 23 / 0.48);
   --state-success-stroke-report-xspector-light-mode: rgba(68 192 34 / 0.48);
   --state-success-stroke-skyller: rgba(22 163 74 / 0.48);
   --state-success-hover-bg-xspector: rgba(84 214 44 / 0.08);
   --state-success-hover-bg-report-xspector-light-mode: rgba(84 214 44 / 0.08);
-  --state-success-hover-bg-skyller: rgba(74 222 128 / 0.08);
+  --state-success-hover-bg-skyller: rgba(21 128 61 / 0.08);
   --state-success-pressed-xspector: #235d17;
   --state-success-pressed-report-xspector-light-mode: #235d17;
   --state-success-pressed-skyller: #166534;
@@ -191,7 +191,7 @@
   --state-success-text-outline-skyller: #16a34a;
   --state-success-text-hover-xspector: #54d62c;
   --state-success-text-hover-report-xspector-light-mode: #54d62c;
-  --state-success-text-hover-skyller: #4ade80;
+  --state-success-text-hover-skyller: #15803d;
   --state-success-text-pressed-xspector: #235d17;
   --state-success-text-pressed-report-xspector-light-mode: #235d17;
   --state-success-text-pressed-skyller: #166534;
@@ -200,13 +200,13 @@
   --state-warning-default-skyller: #f59e0b;
   --state-warning-hover-xspector: #ffdf1b;
   --state-warning-hover-report-xspector-light-mode: #ffdf1b;
-  --state-warning-hover-skyller: #fbbf24;
+  --state-warning-hover-skyller: #d97706;
   --state-warning-stroke-xspector: rgba(255 193 7 / 0.48);
   --state-warning-stroke-report-xspector-light-mode: rgba(255 223 27 / 0.48);
   --state-warning-stroke-skyller: rgba(245 158 11 / 0.48);
   --state-warning-hover-bg-xspector: rgba(255 193 7 / 0.08);
   --state-warning-hover-bg-report-xspector-light-mode: rgba(255 193 7 / 0.08);
-  --state-warning-hover-bg-skyller: rgba(251 191 36 / 0.08);
+  --state-warning-hover-bg-skyller: rgba(217 119 6 / 0.08);
   --state-warning-pressed-xspector: #985108;
   --state-warning-pressed-report-xspector-light-mode: #985108;
   --state-warning-pressed-skyller: #d97706;
@@ -221,22 +221,22 @@
   --state-warning-text-outline-skyller: #f59e0b;
   --state-warning-text-hover-xspector: #ffdf1b;
   --state-warning-text-hover-report-xspector-light-mode: #ffdf1b;
-  --state-warning-text-hover-skyller: #fbbf24;
+  --state-warning-text-hover-skyller: #d97706;
   --state-warning-text-pressed-xspector: #985108;
   --state-warning-text-pressed-report-xspector-light-mode: #985108;
-  --state-warning-text-pressed-skyller: #d97706;
+  --state-warning-text-pressed-skyller: #92400e;
   --state-error-default-xspector: #ff4d35;
   --state-error-default-report-xspector-light-mode: #ed2f15;
   --state-error-default-skyller: #ef4444;
   --state-error-hover-xspector: #f87171;
   --state-error-hover-report-xspector-light-mode: #ff4d35;
-  --state-error-hover-skyller: #f87171;
+  --state-error-hover-skyller: #b91c1c;
   --state-error-stroke-xspector: rgba(255 77 53 / 0.48);
   --state-error-stroke-report-xspector-light-mode: rgba(237 47 21 / 0.64);
   --state-error-stroke-skyller: rgba(220 38 38 / 0.64);
   --state-error-hover-bg-xspector: rgba(248 113 113 / 0.08);
   --state-error-hover-bg-report-xspector-light-mode: rgba(255 77 53 / 0.08);
-  --state-error-hover-bg-skyller: rgba(248 113 113 / 0.08);
+  --state-error-hover-bg-skyller: rgba(185 28 28 / 0.08);
   --state-error-pressed-xspector: #a5210f;
   --state-error-pressed-report-xspector-light-mode: #a5210f;
   --state-error-pressed-skyller: #991b1b;
@@ -251,7 +251,7 @@
   --state-error-text-outline-skyller: #dc2626;
   --state-error-text-hover-xspector: #f87171;
   --state-error-text-hover-report-xspector-light-mode: #ff4d35;
-  --state-error-text-hover-skyller: #f87171;
+  --state-error-text-hover-skyller: #b91c1c;
   --state-error-text-pressed-xspector: #a5210f;
   --state-error-text-pressed-report-xspector-light-mode: #a5210f;
   --state-error-text-pressed-skyller: #991b1b;
@@ -872,13 +872,13 @@
   --function-default-solid-skyller: #171717;
   --function-default-hover-xspector: #fafafa;
   --function-default-hover-report-xspector-light-mode: #35475b;
-  --function-default-hover-skyller: #424242;
+  --function-default-hover-skyller: #000000;
   --function-default-hover-bg-xspector: rgba(250 250 250 / 0.08);
   --function-default-hover-bg-report-xspector-light-mode: rgba(30 50 73 / 0.08);
   --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
-  --function-default-stroke-skyller: rgba(189 189 189 / 0.48);
+  --function-default-stroke-skyller: rgba(0 0 0 / 0.48);
   --function-default-icon-xspector: #212b36;
   --function-default-icon-report-xspector-light-mode: #ffffff;
   --function-default-icon-skyller: #ffffff;
@@ -890,13 +890,13 @@
   --function-active-solid-skyller: #2563eb;
   --function-active-hover-xspector: #ddcd00;
   --function-active-hover-report-xspector-light-mode: #b1a400;
-  --function-active-hover-skyller: #5182ef;
+  --function-active-hover-skyller: #1e4fbc;
   --function-active-hover-bg-xspector: rgba(221 205 0 / 0.08);
   --function-active-hover-bg-report-xspector-light-mode: rgba(221 205 0 / 0.08);
   --function-active-hover-bg-skyller: rgba(81 130 239 / 0.08);
   --function-active-stroke-xspector: rgba(177 164 0 / 0.48);
   --function-active-stroke-report-xspector-light-mode: rgba(177 164 0 / 0.48);
-  --function-active-stroke-skyller: rgba(37 99 235 / 0.48);
+  --function-active-stroke-skyller: rgba(30 79 188 / 0.48);
   --function-active-icon-xspector: #212b36;
   --function-active-icon-report-xspector-light-mode: #ffffff;
   --function-active-icon-skyller: #ffffff;
@@ -1055,7 +1055,7 @@
   --bg-stroke5-skyller: #000000;
   --table-bg-main-xspector: #091a2a;
   --table-bg-main-report-xspector-light-mode: #e5e5e5;
-  --table-bg-main-skyller: #d4d4d6;
+  --table-bg-main-skyller: #bfdbfd;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
   --table-bg-line-skyller: #ececec;
@@ -1064,13 +1064,13 @@
   --table-bg-a-skyller: #fdfdfd;
   --table-bg-b-xspector: #0f2f50;
   --table-bg-b-report-xspector-light-mode: #f3f3f3;
-  --table-bg-b-skyller: #f1f1f1;
+  --table-bg-b-skyller: #eff6ff;
   --table-panel-hover-xspector: #343638;
   --table-panel-hover-report-xspector-light-mode: #d4d4d4;
-  --table-panel-hover-skyller: #eff6fe;
+  --table-panel-hover-skyller: #dfedfe;
   --table-bg-hover-xspector: #103861;
   --table-bg-hover-report-xspector-light-mode: #ffffff;
-  --table-bg-hover-skyller: #eff6fe;
+  --table-bg-hover-skyller: #cfe4fd;
   --table-panel-sub-line-xspector: #393b3f;
   --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
   --table-panel-sub-line-skyller: #ececec;
@@ -1079,7 +1079,7 @@
   --table-panel-main-line-skyller: #d4d4d4;
   --table-panel-selected-xspector: #6f6700;
   --table-panel-selected-report-xspector-light-mode: #d4d4d4;
-  --table-panel-selected-skyller: #bfdbfd;
+  --table-panel-selected-skyller: #afd2fd;
   --modal-dropdown-surface-xspector: #252628;
   --modal-dropdown-surface-report-xspector-light-mode: #ffffff;
   --modal-dropdown-surface-skyller: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/DataTable/DataTable.stories.tsx

@@ -814,6 +814,59 @@ export const WithSelection: StoryObj = {
   },
 };
 
+/**
+ * Select rows then hit "Delete selected" — the header checkbox should clear
+ * automatically once the rows are gone (regression test for stale selection state).
+ */
+export const WithSelectionAndDelete: StoryObj = {
+  render: () => {
+    const [rows, setRows] = React.useState<Project[]>(projectData);
+    const [selected, setSelected] = React.useState<Record<string, boolean>>({});
+
+    const selectedIds = Object.keys(selected).filter((k) => selected[k]);
+
+    const handleDelete = () => {
+      setRows((prev) => prev.filter((r) => !selected[r.id]));
+    };
+
+    return (
+      <div className="flex flex-col gap-3 w-full h-full">
+        <div className="flex items-center gap-3 px-1">
+          <p className="typography-small2 text-text-g-contrast-high flex-1">
+            Selected IDs: {selectedIds.join(", ") || "–"}
+          </p>
+          <Button
+            size="sm"
+            variant="solid"
+            color="error"
+            disabled={selectedIds.length === 0}
+            onClick={handleDelete}
+            startIcon={<Trash2 className="size-4" />}
+          >
+            Delete selected ({selectedIds.length})
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setRows(projectData)}
+          >
+            Reset
+          </Button>
+        </div>
+        <DataTable
+          columns={projectColumns}
+          data={rows}
+          getRowId={(r) => r.id}
+          selectable
+          onRowSelectionChange={setSelected}
+          striped
+          divided
+        />
+      </div>
+    );
+  },
+};
+
 /**
  * Row highlight + scroll — use `highlightRowId` to visually mark important rows
  * (uses the same token as selected rows) and automatically scroll them into view.

package/src/components/DataTable/DataTable.tsx

@@ -345,6 +345,15 @@ export interface DataTableProps<TData, TValue>
   loading?: boolean;
   /** Label for the initial-loading state (default: "Loading…"). */
   loadingLabel?: string;
+  /** Icon rendered in the empty-state placeholder. Replaces the default `ClipboardList` icon. */
+  emptyIcon?: React.ReactNode;
+  /** Text rendered in the empty-state placeholder (default: "There is no information yet."). */
+  emptyText?: React.ReactNode;
+  /**
+   * Fully replaces the empty-state cell content. When provided, `emptyIcon` and
+   * `emptyText` are ignored.
+   */
+  renderEmpty?: () => React.ReactNode;
 
   // --- Virtualization (experimental) ---
   /**
@@ -1055,6 +1064,9 @@ export function DataTable<TData, TValue>({
   fetchingMoreLabel = "Loading more…",
   loading = false,
   loadingLabel = "Loading…",
+  emptyIcon,
+  emptyText = "There is no information yet.",
+  renderEmpty,
   highlightRowId,
   scrollToHighlightOnMouseLeave = false,
   selectable = false,
@@ -1380,6 +1392,23 @@ export function DataTable<TData, TValue>({
     onRowSelectionChange?.(rowSelection);
   }, [rowSelection, onRowSelectionChange]);
 
+  // Prune stale selection keys when rows are removed (e.g. after deleting selected rows).
+  useEffect(() => {
+    if (!selectable) return;
+    const currentIds = new Set(
+      table.getRowModel().rows.map((r) => r.id),
+    );
+    setRowSelection((prev) => {
+      const pruned = Object.fromEntries(
+        Object.entries(prev).filter(([id]) => currentIds.has(id)),
+      );
+      // Avoid re-render if nothing changed.
+      if (Object.keys(pruned).length === Object.keys(prev).length) return prev;
+      return pruned;
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, selectable]);
+
   // Infinite scroll — listener on the wrapper div
   useEffect(() => {
     if (paginationMode !== "infinite") return;
@@ -2282,8 +2311,18 @@ export function DataTable<TData, TValue>({
                     className="typography-body1 text-text-g-contrast-medium text-center h-full"
                   >
                     <div className="flex flex-1 h-full flex-col items-center justify-center gap-3 py-16">
-                      <ClipboardList className="w-8 text-secondary-120" />
-                      There is no information yet.
+                      {renderEmpty ? (
+                        renderEmpty()
+                      ) : (
+                        <>
+                          {emptyIcon !== undefined ? (
+                            emptyIcon
+                          ) : (
+                            <ClipboardList className="w-8 text-secondary-120" />
+                          )}
+                          {emptyText}
+                        </>
+                      )}
                     </div>
                   </TableCell>
                 </TableRow>

package/src/theme/main-preset.js

@@ -325,6 +325,10 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      boxShadow: {
+        card: "0 6px 12px 0 rgba(0, 0, 0, 0.08)",
+        modal: "0 12px 24px -4px rgba(0, 0, 0, 0.12)",
+      },
     },
   },
   presets: [require("./presets/colors"), require("tailwindcss-animate")],