feat(component): add emptyComponent prop to Table (#436)

bigcommerce · Aug 21, 2020 · d1e877d · d1e877d
1 parent c025900
commit d1e877d
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 8 deletions.
diff --git a/packages/big-design/src/components/Table/Table.tsx b/packages/big-design/src/components/Table/Table.tsx
@@ -18,6 +18,7 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
     className,
     columns,
     actions,
+    emptyComponent,
     headerless = false,
     id,
     itemName,
@@ -137,6 +138,14 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
     </Body>
   );
 
+  const renderEmptyState = () => {
+    if (items.length === 0 && emptyComponent) {
+      return emptyComponent;
+    }
+
+    return null;
+  };
+
   return (
     <>
       {shouldRenderActions() && (
@@ -156,6 +165,8 @@ const InternalTable = <T extends TableItem>(props: TableProps<T>): React.ReactEl
         {renderHeaders()}
         {renderItems()}
       </StyledTable>
+
+      {renderEmptyState()}
     </>
   );
 };

diff --git a/packages/big-design/src/components/Table/spec.tsx b/packages/big-design/src/components/Table/spec.tsx
@@ -1,14 +1,16 @@
 import React, { CSSProperties } from 'react';
 import 'jest-styled-components';
 
-import { fireEvent, render } from '@test/utils';
+import { fireEvent, render, screen } from '@test/utils';
 
 import { Table, TableFigure } from './Table';
 
 interface SimpleTableOptions {
   className?: string;
   columns?: any[];
+  items?: any[];
   dataTestId?: string;
+  emptyComponent?: React.ReactElement;
   headerless?: boolean;
   id?: string;
   itemName?: string;
@@ -19,9 +21,11 @@ const getSimpleTable = ({
   className,
   columns,
   dataTestId,
+  emptyComponent,
   headerless,
   id,
   itemName,
+  items,
   style,
 }: SimpleTableOptions = {}) => (
   <Table
@@ -30,6 +34,7 @@ const getSimpleTable = ({
     id={id}
     headerless={headerless}
     itemName={itemName}
+    emptyComponent={emptyComponent}
     style={style}
     columns={
       columns || [
@@ -38,13 +43,15 @@ const getSimpleTable = ({
         { header: 'Stock', render: ({ stock }) => stock },
       ]
     }
-    items={[
-      { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
-      { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
-      { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
-      { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
-      { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
-    ]}
+    items={
+      items || [
+        { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
+        { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
+        { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
+        { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
+        { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
+      ]
+    }
   />
 );
 
@@ -444,4 +451,20 @@ describe('sortable', () => {
     expect(container.querySelector('th')).toBeInTheDocument();
     expect(container.querySelector('th')).not.toBeVisible();
   });
+
+  test('renders the emptyComponent when there are no items', () => {
+    const emptyComponent = <p>There are no items!</p>;
+
+    render(getSimpleTable({ items: [], emptyComponent }));
+
+    expect(screen.getByText(/no items/i)).toBeInTheDocument();
+  });
+
+  test('does not render emptyComponent if there are items', () => {
+    const emptyComponent = <p>There are no items!</p>;
+
+    render(getSimpleTable({ emptyComponent }));
+
+    expect(screen.queryByText(/no items/i)).not.toBeInTheDocument();
+  });
 });
diff --git a/packages/big-design/src/components/Table/types.ts b/packages/big-design/src/components/Table/types.ts
@@ -38,6 +38,7 @@ export type TablePaginationProps = Omit<PaginationProps, keyof MarginProps>;
 export interface TableProps<T> extends React.TableHTMLAttributes<HTMLTableElement> {
   actions?: React.ComponentType<T>;
   columns: Array<TableColumn<T>>;
+  emptyComponent?: React.ReactElement;
   headerless?: boolean;
   itemName?: string;
   items: T[];

diff --git a/packages/docs/PropTables/StatefulTablePropTable.tsx b/packages/docs/PropTables/StatefulTablePropTable.tsx
@@ -69,6 +69,11 @@ const statefulTableProps: Prop[] = [
     types: 'React.ComponentType<any>',
     description: 'Component to render custom actions.',
   },
+  {
+    name: 'emptyComponent',
+    types: 'React.ReactElement',
+    description: 'Component to render when there are no items.',
+  },
 ];
 
 const tableColumnsProps: Prop[] = [

diff --git a/packages/docs/PropTables/TablePropTable.tsx b/packages/docs/PropTables/TablePropTable.tsx
@@ -74,6 +74,11 @@ const tableProps: Prop[] = [
     types: 'React.ComponentType<any>',
     description: 'Component to render custom actions.',
   },
+  {
+    name: 'emptyComponent',
+    types: 'React.ReactElement',
+    description: 'Component to render when there are no items.',
+  },
 ];
 
 const tableColumnsProps: Prop[] = [