feat: 🎸 Added empty state option to Table

When table has no data by default a message is shown. User can provide custom empty state via 'emptyState' property ✅ Closes: 100
melfore · Oct 1, 2020 · 7246b92 · 7246b92
1 parent 341daac
commit 7246b92
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 39 deletions.
diff --git a/src/components/Table/index.stories.tsx b/src/components/Table/index.stories.tsx
@@ -113,6 +113,18 @@ export const Basic = () => (
   />
 );
 
+export const EmptyState = () => (
+  <Table
+    columns={[
+      { label: "Name", path: "name" },
+      { label: "Age", path: "age" },
+    ]}
+    emptyState={<Typography>Custom Empty State</Typography>}
+    rows={[]}
+    title="Empty State"
+  />
+);
+
 export const Loading = () => (
   <Table
     columns={[
@@ -152,6 +164,17 @@ export const Localized = () => (
   </IntlProviderMock>
 );
 
+export const NoData = () => (
+  <Table
+    columns={[
+      { label: "Name", path: "name" },
+      { label: "Age", path: "age" },
+    ]}
+    rows={[]}
+    title="No Data"
+  />
+);
+
 export const WithCustomColumnRender = () => (
   <StoriesWrapper>
     <Table

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -44,6 +44,7 @@ const Table: FC<ITable> = ({
   actions = [],
   columns,
   dataCy = DATA_CY_DEFAULT,
+  emptyState,
   height = "100%",
   hideHeader = false,
   loading = false,
@@ -224,47 +225,60 @@ const Table: FC<ITable> = ({
           </MUITableRow>
         </MUITableHead>
         <MUITableBody>
-          {internalRows.map(({ id, ...row }) => (
-            <MUITableRow key={`row-${id}`}>
-              {internalColumns.map(({ padding, path, render }, columnIndex) => (
-                <MUITableCell
-                  key={`column-${path || columnIndex}`}
-                  onClick={(event) => {
-                    if (path === CHECKBOX_SELECTION_PATH || path === ROW_ACTION_PATH) {
-                      return;
-                    }
+          {!internalRows.length ? (
+            <MUITableRow key={`row-no-data`}>
+              <MUITableCell
+                key={`column-no-data`}
+                colSpan={internalColumns.length}
+                padding="default"
+                style={{ textAlign: "center" }}
+              >
+                {emptyState || <Typography>No data to display</Typography>}
+              </MUITableCell>
+            </MUITableRow>
+          ) : (
+            internalRows.map(({ id, ...row }) => (
+              <MUITableRow key={`row-${id}`}>
+                {internalColumns.map(({ padding, path, render }, columnIndex) => (
+                  <MUITableCell
+                    key={`column-${path || columnIndex}`}
+                    onClick={(event) => {
+                      if (path === CHECKBOX_SELECTION_PATH || path === ROW_ACTION_PATH) {
+                        return;
+                      }
 
-                    suppressEvent(event);
-                    onRowClick && onRowClick(row);
-                  }}
-                  padding={padding || "default"}
-                >
-                  {path === CHECKBOX_SELECTION_PATH ? (
-                    <Checkbox
-                      size={CheckboxSize.small}
-                      onChange={(selected) => onSelection(id)}
-                      value={isRowSelected(id)}
-                    />
-                  ) : path === ROW_ACTION_PATH ? (
-                    rowActions.map(({ callback, disabled, icon, label }) => (
-                      <IconButton
-                        key={`action-${label}`}
-                        dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.action, label)}
-                        disabled={disabled}
-                        icon={icon || Icons.settings}
-                        onClick={() => callback(row)}
-                        size={IconSize.small}
+                      suppressEvent(event);
+                      onRowClick && onRowClick(row);
+                    }}
+                    padding={padding || "default"}
+                  >
+                    {path === CHECKBOX_SELECTION_PATH ? (
+                      <Checkbox
+                        size={CheckboxSize.small}
+                        onChange={(selected) => onSelection(id)}
+                        value={isRowSelected(id)}
                       />
-                    ))
-                  ) : render ? (
-                    render(row)
-                  ) : (
-                    row[path]
-                  )}
-                </MUITableCell>
-              ))}
-            </MUITableRow>
-          ))}
+                    ) : path === ROW_ACTION_PATH ? (
+                      rowActions.map(({ callback, disabled, icon, label }) => (
+                        <IconButton
+                          key={`action-${label}`}
+                          dataCy={getComposedDataCy(dataCy, SUBPARTS_MAP.action, label)}
+                          disabled={disabled}
+                          icon={icon || Icons.settings}
+                          onClick={() => callback(row)}
+                          size={IconSize.small}
+                        />
+                      ))
+                    ) : render ? (
+                      render(row)
+                    ) : (
+                      row[path]
+                    )}
+                  </MUITableCell>
+                ))}
+              </MUITableRow>
+            ))
+          )}
         </MUITableBody>
       </MUITable>
       {(onPageChange || onPageSizeChange) && (

diff --git a/src/types/Table.ts b/src/types/Table.ts
@@ -29,6 +29,7 @@ export interface ITableColumn {
 export interface ITable extends ILocalizable {
   actions?: ITableAction[];
   columns: ITableColumn[];
+  emptyState?: ReactNode;
   height?: number | string;
   hideHeader?: boolean;
   loading?: boolean;