Allow table to receive an empty state instance and show it if no item…

…s are present (#849) * Allow table to receive an empty state instance and show it if no items * Fix title in docs * Improve example in docs * Allow table to receive an empty state instance and show it if no items * Fix title in docs * Improve example in docs * Implement custom empty state renderer * Add default message * Use React defaultProps to set empty message default value * Allow table to receive an empty state instance and show it if no items * Fix title in docs * Improve example in docs * add deprecated tag in docs * Allow table to receive an empty state instance and show it if no items * Implement custom empty state renderer * Add default message * Use React defaultProps to set empty message default value * Fix padding * Reduce table empty state example * CSS adjustments
auth0 · Sep 10, 2018 · 4417d2a · 4417d2a
1 parent 0b488f3
commit 4417d2a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 13 deletions.
diff --git a/core/components/molecules/table/table.js b/core/components/molecules/table/table.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { colors, spacing } from '@auth0/cosmos-tokens'
+import { colors, spacing, misc } from '@auth0/cosmos-tokens'
 import TableColumn from './table-column'
 import TableHeader from './table-header'
 import Automation from '../../_helpers/automation-attribute'
@@ -131,15 +131,18 @@ class Table extends React.Component {
     ))
 
     return (
-      <Table.Element {...Automation('table')}>
-        <Table.Header
-          columns={columns}
-          sortingColumn={sortingColumn}
-          sortDirection={sortDirection}
-          onSort={onSort}
-        />
-        <Table.Body {...Automation('table.body')}>{rows}</Table.Body>
-      </Table.Element>
+      <React.Fragment>
+        <Table.Element {...Automation('table')}>
+          <Table.Header
+            columns={columns}
+            sortingColumn={sortingColumn}
+            sortDirection={sortDirection}
+            onSort={onSort}
+          />
+          <Table.Body {...Automation('table.body')}>{rows}</Table.Body>
+        </Table.Element>
+        <Table.EmptyState rows={rows}>{this.props.emptyMessage}</Table.EmptyState>
+      </React.Fragment>
     )
   }
 }
@@ -177,6 +180,21 @@ Table.Cell = styled.td`
   width: ${props => props.column.width || 'auto'};
 `
 
+Table.EmptyState = ({ rows, children }) => {
+  if (rows.length > 0 || !children) return null
+
+  const TableEmptyState = styled.div`
+    padding: ${spacing.small};
+    background-color: rgb(250, 250, 250);
+    border-radius: ${misc.radius};
+    text-align: center;
+    margin-top: ${spacing.xsmall};
+    color: ${colors.text.default};
+  `
+
+  return <TableEmptyState>{children}</TableEmptyState>
+}
+
 Table.propTypes = {
   /** The items in the table. */
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -187,13 +205,16 @@ Table.propTypes = {
   /** A function that will be called when a row is clicked. */
   onRowClick: PropTypes.func,
   /** A function that will be called when the table is re-sorted via clicking a header. */
-  onSort: PropTypes.func
+  onSort: PropTypes.func,
+  /** A message to show to the user in case there */
+  emptyMessage: PropTypes.node
 }
 
 Table.defaultProps = {
   onRowClick: null,
   onSort: null,
-  sortDirection: 'asc'
+  sortDirection: 'asc',
+  emptyMessage: 'There are no items to display'
 }
 
 export default Table
diff --git a/core/components/molecules/table/table.md b/core/components/molecules/table/table.md
@@ -247,3 +247,20 @@ class Example extends React.Component {
   }
 }
 ```
+
+### Empty table
+
+You can optionally pass an message to the table and it will be shown if there are no items in the dataset. In case you don't provide it, we will use "There are no items to display" as the default.
+
+```js
+<Table items={[]} emptyMessage="You don't have any users in your tenant at the moment.">
+  <Table.Column field="image" width="50px">
+    {item => <Avatar type="user" image={item.image} />}
+  </Table.Column>
+  <Table.Column field="name" title="Name" width="30%" />
+  <Table.Column field="country" title="Country" />
+  <Table.Column field="goals" title="Goals" sortable />
+  <Table.Column field="assists" title="Assists" sortable />
+</Table>
+```
+
diff --git a/core/components/molecules/table/table.story.js b/core/components/molecules/table/table.story.js