feat: expose noDataIcon props to display more icon while table is empty

carbon-design-system · Feb 21, 2024 · 1d7c69f · 1d7c69f
1 parent a1c0955
commit 1d7c69f
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 48 deletions.
diff --git a/packages/react/src/components/Table/EmptyTable/EmptyTable.jsx b/packages/react/src/components/Table/EmptyTable/EmptyTable.jsx
@@ -24,12 +24,18 @@ const propTypes = {
     `The 'testID' prop has been deprecated. Please use 'testId' instead.`
   ),
   testId: PropTypes.string,
+  /** icon to display while no data in table */
+  noDataIcon: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.oneOf(['error', 'error404', 'empty', 'not-authorized', 'no-result', 'success', '']),
+  ]),
 };
 
 const defaultProps = {
   id: 'EmptyTable',
   onEmptyStateAction: null,
   testId: '',
+  noDataIcon: '',
 };
 
 const EmptyTable = ({
@@ -49,55 +55,61 @@ const EmptyTable = ({
   // TODO: remove deprecated 'testID' in v3
   testID,
   testId,
-}) => (
-  <TableBody
-    id={`${id}-empty-table`}
-    // TODO: remove deprecated 'testID' in v3
-    data-testid={testID || testId}
-  >
-    <TableRow className={`${iotPrefix}--empty-table--table-row`}>
-      <TableCell colSpan={totalColumns}>
-        {React.isValidElement(emptyState) ? (
-          emptyState
-        ) : (
-          <div className="empty-table-cell--default">
-            {isFiltered ? (
-              <EmptyState
-                icon="no-result"
-                title={messageWithFilters}
-                body={messageWithFiltersBody || ''}
-                action={
-                  onEmptyStateAction
-                    ? {
-                        label: buttonLabelWithFilters,
-                        onClick: onEmptyStateAction,
-                        kind: 'secondary',
-                      }
-                    : null
-                }
-              />
-            ) : (
-              <EmptyState
-                icon="empty"
-                title={message}
-                body={messageBody || ''}
-                action={
-                  onEmptyStateAction
-                    ? {
-                        label: buttonLabel,
-                        onClick: onEmptyStateAction,
-                      }
-                    : null
-                }
-              />
-            )}
-          </div>
-        )}
-      </TableCell>
-    </TableRow>
-  </TableBody>
-);
+  noDataIcon,
+}) => {
+  const isFilterEmptyTable = (
+    <EmptyState
+      icon="no-result"
+      title={messageWithFilters}
+      body={messageWithFiltersBody || ''}
+      action={
+        onEmptyStateAction
+          ? {
+              label: buttonLabelWithFilters,
+              onClick: onEmptyStateAction,
+              kind: 'secondary',
+            }
+          : null
+      }
+    />
+  );
 
+  const defaultEmptyTable = (
+    <EmptyState
+      icon={noDataIcon !== '' ? noDataIcon : 'empty'}
+      title={message}
+      body={messageBody || ''}
+      action={
+        onEmptyStateAction
+          ? {
+              label: buttonLabel,
+              onClick: onEmptyStateAction,
+            }
+          : null
+      }
+    />
+  );
+
+  return (
+    <TableBody
+      id={`${id}-empty-table`}
+      // TODO: remove deprecated 'testID' in v3
+      data-testid={testID || testId}
+    >
+      <TableRow className={`${iotPrefix}--empty-table--table-row`}>
+        <TableCell colSpan={totalColumns}>
+          {React.isValidElement(emptyState) ? (
+            emptyState
+          ) : (
+            <div className="empty-table-cell--default">
+              {isFiltered ? isFilterEmptyTable : defaultEmptyTable}
+            </div>
+          )}
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  );
+};
 EmptyTable.propTypes = propTypes;
 EmptyTable.defaultProps = defaultProps;
 

diff --git a/packages/react/src/components/Table/Table.jsx b/packages/react/src/components/Table/Table.jsx
@@ -168,6 +168,11 @@ const propTypes = {
     hasBreadcrumbDrop: PropTypes.bool,
     /** Freezes table header and footer */
     pinHeaderAndFooter: PropTypes.bool,
+    /** display icon while Table data is empty */
+    noDataIcon: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.oneOf(['error', 'error404', 'empty', 'not-authorized', 'no-result', 'success', '']),
+    ]),
   }),
 
   /** Size prop from Carbon to shrink row height (and header height in some instances) */
@@ -613,6 +618,7 @@ export const defaultProps = (baseProps) => ({
   // previously used as testId.
   testId: null,
   enablePercentageColumnWidth: false,
+  noDataIcon: '',
 });
 
 const Table = (props) => {
@@ -639,6 +645,7 @@ const Table = (props) => {
     testId,
     size,
     zIndex,
+    noDataIcon,
     ...others
   } = merge({}, defaultProps(props), props);
 
@@ -1239,6 +1246,7 @@ const Table = (props) => {
                 id={id}
                 totalColumns={totalColumns}
                 isFiltered={isFiltered}
+                noDataIcon={noDataIcon}
                 emptyState={
                   // only show emptyState if no filters or search is applied
                   view.table.emptyState && !isFiltered

diff --git a/packages/react/src/components/Table/mdx/Table.mdx b/packages/react/src/components/Table/mdx/Table.mdx
@@ -470,6 +470,7 @@ import TableViewDropdownContent from '../TableViewDropdown/TableViewDropdownCont
 | locale               | string          |         | what locale should we use to format table values if left empty no locale formatting happens                                                                                                            |
 | i18n                 | object          |         | (see [i18n prop](#i18n-prop))                                                                                                                                                                          |
 | error                | string          |         | Specify the error message that need to be displayed by default. Incase we use `view.table.errorState` property then the error state element will be rendered instead of error message                  |
+| noDataIcon           | string          |         | While Table is empty then we have choice while icon should be display. one of (error', 'error404', 'empty', 'not-authorized', 'no-result', 'success') option so display.                               |
 
 ### Column Prop
 

diff --git a/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -564,6 +564,7 @@ Map {
   "EmptyTable" => Object {
     "defaultProps": Object {
       "id": "EmptyTable",
+      "noDataIcon": "",
       "onEmptyStateAction": null,
       "testId": "",
     },
@@ -672,6 +673,30 @@ Map {
         "isRequired": true,
         "type": "bool",
       },
+      "noDataIcon": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "args": Array [
+                Array [
+                  "error",
+                  "error404",
+                  "empty",
+                  "not-authorized",
+                  "no-result",
+                  "success",
+                  "",
+                ],
+              ],
+              "type": "oneOf",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "onEmptyStateAction": Object {
         "type": "func",
       },
@@ -797,6 +822,7 @@ Map {
       "id": null,
       "lightweight": undefined,
       "locale": null,
+      "noDataIcon": "",
       "options": Object {
         "hasAdvancedFilter": false,
         "hasAggregations": false,
@@ -1725,6 +1751,30 @@ Map {
             "hasUserViewManagement": Object {
               "type": "bool",
             },
+            "noDataIcon": Object {
+              "args": Array [
+                Array [
+                  Object {
+                    "type": "func",
+                  },
+                  Object {
+                    "args": Array [
+                      Array [
+                        "error",
+                        "error404",
+                        "empty",
+                        "not-authorized",
+                        "no-result",
+                        "success",
+                        "",
+                      ],
+                    ],
+                    "type": "oneOf",
+                  },
+                ],
+              ],
+              "type": "oneOfType",
+            },
             "pinColumn": Object {
               "args": Array [
                 Array [