feat(table): Add empty state for table

slingshot · Mar 21, 2024 · 9c1955b · 9c1955b
1 parent f59a223
commit 9c1955b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/.changeset/new-toes-flow.md b/.changeset/new-toes-flow.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+Add emptyState render for Table when there are no rows to display
diff --git a/src/stories/table/Table.module.scss b/src/stories/table/Table.module.scss
@@ -27,6 +27,14 @@
         border-bottom: 1px solid var(--pte-colors-borderOpaque);
     }
 
+    tr.empty {
+        border-bottom: none;
+
+        td {
+            padding: 20px 0 0 0;
+        }
+    }
+
     tbody tr.clickable {
         transition: background-color var(--pte-animations-interaction);
 

diff --git a/src/stories/table/Table.tsx b/src/stories/table/Table.tsx
@@ -55,6 +55,11 @@ export type TableProps<
      * Whether the rows should be clickable.
      */
     clickableRows?: boolean;
+
+    /**
+     * The content to display when the table is empty.
+     */
+    emptyState?: ReactNode;
     /**
      * Prop overrides for rendered elements.
      */
@@ -87,6 +92,7 @@ export function Table<RowData extends Record<string, any>[]>({
     rowRenderFn,
     onRowClick,
     clickableRows = true,
+    emptyState,
     overrides,
 }: TableProps<RowData>) {
     const id = useId();
@@ -164,6 +170,15 @@ export function Table<RowData extends Record<string, any>[]>({
                 </tr>
             </thead>
             <tbody {...overrides?.tbody}>
+                {renderedRows.length === 0 && emptyState && (
+                    <>
+                        <tr className={styles.empty}>
+                            <td colSpan={columns.length} className={styles.emptyState}>
+                                {emptyState}
+                            </td>
+                        </tr>
+                    </>
+                )}
                 {renderedRows}
             </tbody>
         </table>