diff --git a/.changeset/new-toes-flow.md b/.changeset/new-toes-flow.md new file mode 100644 index 0000000..49795cb --- /dev/null +++ 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 index df9946c..0dcbf87 100644 --- 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 index c5d07c1..9d9d8a1 100644 --- 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[]>({ rowRenderFn, onRowClick, clickableRows = true, + emptyState, overrides, }: TableProps) { const id = useId(); @@ -164,6 +170,15 @@ export function Table[]>({ + {renderedRows.length === 0 && emptyState && ( + <> + + + {emptyState} + + + + )} {renderedRows}