diff --git a/core/components/molecules/table/table.js b/core/components/molecules/table/table.js index f643a60c0..c67a1c67a 100644 --- 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 ( - - - {rows} - + + + + {rows} + + {this.props.emptyMessage} + ) } } @@ -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 {children} +} + 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 index 7b9d06715..b08af8660 100644 --- 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 + + + {item => } + + + + + +
+``` + diff --git a/core/components/molecules/table/table.story.js b/core/components/molecules/table/table.story.js index 4b48e1158..249bddf58 100644 --- a/core/components/molecules/table/table.story.js +++ b/core/components/molecules/table/table.story.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { Example } from '@auth0/cosmos/_helpers/story-helpers' -import { Avatar, Table } from '@auth0/cosmos' +import { Avatar, Table, EmptyState } from '@auth0/cosmos' const items = [ { @@ -125,3 +125,35 @@ storiesOf('Table').add('stressed', () => ( )) + +storiesOf('Table').add('with no items', () => ( + + + You don't have any users in your tenant at the moment + + } + > + + {item => } + + + + + +
+
+))