feat(ui): added emptyState prop to table for handling no data and keeping formatting (#74)

Author: tmccoy14

packages/demo/src/components/demo/table.tsx

@@ -1,13 +1,21 @@
-import { Button, SortButton, Table, Badge } from "@eqtylab/equality";
 import type { Elevation } from "@eqtylab/equality";
+import {
+  Badge,
+  Button,
+  EmptyTableState,
+  SortButton,
+  Table,
+} from "@eqtylab/equality";
 
 interface TableDemoProps {
   variant?:
     | "unclickable"
     | "clickable"
     | "with-actions"
     | "with-border"
-    | "with-sorter";
+    | "with-sorter"
+    | "empty-state"
+    | "empty-state-custom";
   elevation: Elevation;
 }
 
@@ -187,6 +195,38 @@ export const TableDemo = ({
     );
   }
 
+  if (variant === "empty-state") {
+    return (
+      <Table
+        columns={columns}
+        rows={[]}
+        border
+        elevation={elevation}
+        emptyState="No data available"
+      />
+    );
+  }
+
+  if (variant === "empty-state-custom") {
+    return (
+      <Table
+        columns={columns}
+        rows={[]}
+        border
+        elevation={elevation}
+        emptyState={
+          <EmptyTableState
+            icon="SearchX"
+            title="No Members Found"
+            description="Try refining your search terms or clearing filters."
+            showClearButton
+            onClear={() => {}}
+          />
+        }
+      />
+    );
+  }
+
   if (variant === "with-sorter") {
     const columns_with_sorter = [
       {

packages/demo/src/content/components/table.mdx

@@ -25,6 +25,18 @@ import { ELEVATION } from "@eqtylab/equality";
 
 <TableDemo client:only="react" variant="with-sorter" />
 
+### Empty State
+
+When `rows` is empty and `emptyState` is provided, the table keeps column headers visible and renders the empty state content spanning all columns.
+
+<TableDemo client:only="react" variant="empty-state" />
+
+### Empty State with Custom Component
+
+The `emptyState` prop accepts any `ReactNode`, so you can pass a custom component like `EmptyTableState`.
+
+<TableDemo client:only="react" variant="empty-state-custom" />
+
 ## Style Options
 
 ### With Border
@@ -94,3 +106,13 @@ import { ELEVATION } from "@eqtylab/equality";
   variant="with-border"
   elevation={ELEVATION.FLOATING}
 />
+
+## Props
+
+| Name         | Description                                                  | Type                                              | Default | Required |
+| ------------ | ------------------------------------------------------------ | ------------------------------------------------- | ------- | -------- |
+| `columns`    | Column definitions with key, content, and optional className | `TableColumn[]`                                   |         | ✅       |
+| `rows`       | Row data with key, cells, and optional onClick/className     | `TableRowData[]`                                  |         | ✅       |
+| `border`     | Adds a border and rounded corners around the table           | `boolean`                                         | `false` | ❌       |
+| `elevation`  | Controls the shadow and border elevation level               | `sunken`, `base`, `raised`, `overlay`, `floating` | `base`  | ❌       |
+| `emptyState` | Content rendered when rows is empty, spanning all columns    | `ReactNode`                                       |         | ❌       |

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@eqtylab/equality",
   "description": "EQTYLab's component and token-based design system",
   "homepage": "https://equality.eqtylab.io/",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "Apache-2.0",
   "keywords": [
     "component library",

packages/ui/src/components/table/table.module.css

@@ -17,6 +17,10 @@
   @apply overflow-hidden rounded-md;
 }
 
+.table-empty-state {
+  @apply text-text-secondary py-8 text-center;
+}
+
 /* ELEVATION */
 
 .table--sunken {

packages/ui/src/components/table/table.tsx

@@ -38,6 +38,7 @@ interface TableProps extends VariantProps<typeof tableElevationVariants> {
   rows: TableRowData[];
   className?: string;
   border?: boolean;
+  emptyState?: React.ReactNode;
 }
 
 const tableElevationVariants = generateElevationVariants(styles, 'table', ELEVATION.BASE);
@@ -48,7 +49,10 @@ const Table = ({
   className,
   border = false,
   elevation = ELEVATION.BASE,
+  emptyState,
 }: TableProps) => {
+  const isEmpty = rows.length === 0;
+
   return (
     <div
       className={cn(
@@ -68,21 +72,31 @@ const Table = ({
             ))}
           </TableRow>
         </TableHeader>
-        <TableBody>
-          {rows.map((row) => (
-            <TableRow
-              key={row.key}
-              className={cn(row.className, row.onClick && styles['table-row-clickable'])}
-              onClick={row.onClick}
-            >
-              {row.cells.map((cell) => (
-                <TableCell key={cell.key} className={cell.className}>
-                  {cell.content}
-                </TableCell>
-              ))}
+        {isEmpty && emptyState ? (
+          <TableBody>
+            <TableRow>
+              <TableCell colSpan={columns.length} className={styles['table-empty-state']}>
+                {emptyState}
+              </TableCell>
             </TableRow>
-          ))}
-        </TableBody>
+          </TableBody>
+        ) : (
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.key}
+                className={cn(row.className, row.onClick && styles['table-row-clickable'])}
+                onClick={row.onClick}
+              >
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.key} className={cell.className}>
+                    {cell.content}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        )}
       </TableContainer>
     </div>
   );