@ceed/ads 1.27.0 → 1.28.0

package/dist/components/DataTable/styled.d.ts

@@ -280,4 +280,5 @@ export declare const MotionSortIcon: import("framer-motion").CustomDomComponent<
     ref?: ((instance: SVGSVGElement | null) => void) | React.RefObject<SVGSVGElement> | null | undefined;
 }, "style" | "children" | "color" | "fontSize" | "shapeRendering" | "className" | "sx" | "viewBox" | "classes" | "htmlColor" | "inheritViewBox" | "titleAccess">>;
 export declare const DefaultLoadingOverlay: () => React.JSX.Element;
+export declare const DefaultNoRowsOverlay: () => React.JSX.Element;
 export declare const Resizer: (ref: RefObject<HTMLTableCellElement>, targetRef?: RefObject<any>) => React.JSX.Element;

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

@@ -237,6 +237,7 @@ export type DataTableProps<T extends Record<PropertyKey, any>, GetId extends ((r
         toolbar?: React.ElementType;
         footer?: React.ElementType;
         loadingOverlay?: React.ElementType;
+        noRowsOverlay?: React.ElementType;
     };
     slotProps?: {
         checkbox?: Partial<{
@@ -249,6 +250,9 @@ export type DataTableProps<T extends Record<PropertyKey, any>, GetId extends ((r
         background?: Partial<{
             [key: string]: any;
         }>;
+        noRowsOverlay?: Partial<{
+            [key: string]: any;
+        }>;
     };
 } & ComponentProps<typeof Table>;
 export {};

package/dist/components/data-display/DataTable.md

@@ -509,12 +509,13 @@ DataTable allows customization of various parts through `slots` and `slotProps`.
 
 ### Available Slots
 
-| Slot             | Description                  |
-| ---------------- | ---------------------------- |
-| `checkbox`       | Customize checkbox component |
-| `toolbar`        | Table top toolbar            |
-| `footer`         | Table bottom footer          |
-| `loadingOverlay` | Loading overlay              |
+| Slot             | Description                   |
+| ---------------- | ----------------------------- |
+| `checkbox`       | Customize checkbox component  |
+| `toolbar`        | Table top toolbar             |
+| `footer`         | Table bottom footer           |
+| `loadingOverlay` | Loading overlay               |
+| `noRowsOverlay`  | Empty state overlay (no rows) |
 
 ### Custom Toolbar
 
@@ -581,6 +582,154 @@ const CustomLoadingOverlay = () => (
 <DataTable rows={rows} columns={columns} loading slots={{ loadingOverlay: CustomLoadingOverlay }} />;
 ```
 
+### No Rows Overlay
+
+When `rows` is empty and `loading` is not `true`, a no rows overlay is displayed in the table body.
+
+```tsx
+<DataTable
+  onPaginationModelChange={fn()}
+  onSelectionModelChange={fn()}
+  onRowClick={fn()}
+  columns={[{
+  field: 'dessert',
+  headerName: 'Dessert (100g serving)',
+  width: '40%'
+}, {
+  field: 'calories',
+  headerName: 'Calories',
+  type: 'number'
+}, {
+  field: 'fat',
+  headerName: 'Fat (g)',
+  type: 'number'
+}, {
+  field: 'carbs',
+  headerName: 'Carbs (g)',
+  type: 'number'
+}, {
+  field: 'protein',
+  headerName: 'Protein (g)',
+  type: 'number'
+}]}
+  rows={[]}
+  noWrap
+/>
+```
+
+### Custom No Rows Overlay
+
+You can customize the empty state UI using `slots.noRowsOverlay`.
+
+```tsx
+<DataTable rows={[]} columns={tableColumns} noWrap slots={{
+  noRowsOverlay: CustomOverlay
+}} slotProps={{
+  noRowsOverlay: {
+    message: 'Custom message via slotProps'
+  }
+}} />
+```
+
+```tsx
+const CustomNoRowsOverlay = ({ message }: { message?: string }) => (
+  <Stack alignItems="center" spacing={1}>
+    <Typography level="title-md">No data available</Typography>
+    <Typography level="body-sm" textColor="text.secondary">
+      {message || 'Try adding new records.'}
+    </Typography>
+  </Stack>
+);
+
+<DataTable
+  rows={[]}
+  columns={columns}
+  slots={{ noRowsOverlay: CustomNoRowsOverlay }}
+  slotProps={{ noRowsOverlay: { message: 'Custom message via slotProps' } }}
+/>;
+```
+
+### No Rows Overlay with Checkbox
+
+The overlay correctly spans the full table width including the checkbox column.
+
+```tsx
+<DataTable
+  onPaginationModelChange={fn()}
+  onSelectionModelChange={fn()}
+  onRowClick={fn()}
+  columns={[{
+  field: 'dessert',
+  headerName: 'Dessert (100g serving)',
+  width: '40%'
+}, {
+  field: 'calories',
+  headerName: 'Calories',
+  type: 'number'
+}, {
+  field: 'fat',
+  headerName: 'Fat (g)',
+  type: 'number'
+}, {
+  field: 'carbs',
+  headerName: 'Carbs (g)',
+  type: 'number'
+}, {
+  field: 'protein',
+  headerName: 'Protein (g)',
+  type: 'number'
+}]}
+  rows={[]}
+  noWrap
+  checkboxSelection
+/>
+```
+
+### No Rows Overlay Loading Priority
+
+When `loading` is `true`, the loading overlay takes priority over the no rows overlay.
+
+```tsx
+<Stack gap={2}>
+  <Button onClick={() => setLoading(!loading)}>{loading ? 'Stop Loading' : 'Start Loading'}</Button>
+  <Typography level="body-sm">
+    {loading ? 'Loading overlay is shown (noRowsOverlay hidden)' : 'NoRowsOverlay is shown'}
+  </Typography>
+  <DataTable rows={[]} columns={tableColumns} loading={loading} noWrap slotProps={{
+    background: {
+      style: {
+        height: '300px'
+      }
+    }
+  }} />
+</Stack>
+```
+
+### Combined Custom Loading + No Rows Overlay
+
+Both `loadingOverlay` and `noRowsOverlay` slots can be customized simultaneously.
+
+```tsx
+<Stack gap={2}>
+  <Stack direction="row" gap={1} alignItems="center">
+    <Button onClick={() => setLoading(!loading)}>{loading ? 'Stop Loading' : 'Start Loading'}</Button>
+    <Typography level="body-xs" textColor="text.tertiary">
+      {loading ? 'Custom loading overlay shown' : 'Custom no rows overlay shown'}
+    </Typography>
+  </Stack>
+  <DataTable rows={[]} columns={tableColumns} loading={loading} noWrap slots={{
+    loadingOverlay: CustomLoadingOverlay,
+    noRowsOverlay: CustomNoRowsOverlay
+  }} slotProps={{
+    background: {
+      style: {
+        height: '300px'
+      }
+    }
+  }} />
+</Stack>
+```
+
 ### Custom Checkbox
 
 ```tsx