Merge pull request #39 from barrymcgee/empty-table-state

Add empty table state to MainTable

src/components/Accordion/Accordion.js

@@ -22,7 +22,7 @@ const Accordion = ({ className, sections, ...props }) => {
       className={classNames(className, "p-accordion")}
       {...props}
       role="tablist"
-      aria-multiselect="true" //eslint-disable-line jsx-a11y/aria-props
+      ariaMultiselectable="true"
     >
       <ul className="p-accordion__list">
         {generateSections(sections, setExpanded, expanded)}

src/components/Accordion/__snapshots__/Accordion.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Accordion  renders 1`] = `
 <aside
-  aria-multiselect="true"
+  ariaMultiselectable="true"
   className="p-accordion"
   role="tablist"
 >

src/components/MainTable/MainTable.js

@@ -7,6 +7,8 @@ import TableRow from "../TableRow";
 import TableHeader from "../TableHeader";
 import TableCell from "../TableCell";
 
+import "./MainTable.scss";
+
 const updateSort = (setSortKey, setSortDirection, sortKey, sortDirection) => {
   let newDirection = null;
   if (sortDirection === "none") {
@@ -73,6 +75,7 @@ const generateHeaders = (
 const generateRows = (
   currentSortDirection,
   currentSortKey,
+  emptyStateMsg,
   expanding,
   paginate,
   rows,
@@ -81,6 +84,10 @@ const generateRows = (
   sortable,
   sortFunction
 ) => {
+  // If the table has no rows, return empty state message
+  if (Object.entries(rows).length === 0 && emptyStateMsg) {
+    return <caption>{emptyStateMsg}</caption>;
+  }
   // Clone the rows so we can restore the original order.
   const sortedRows = [...rows];
   if (sortable && currentSortKey) {
@@ -141,6 +148,7 @@ const generateRows = (
 const MainTable = ({
   defaultSort,
   defaultSortDirection,
+  emptyStateMsg = "",
   expanding,
   headers,
   onUpdateSort,
@@ -175,6 +183,7 @@ const MainTable = ({
   return (
     <>
       <Table
+        className="p-main-table"
         expanding={expanding}
         sortable={sortable}
         responsive={responsive}
@@ -194,6 +203,7 @@ const MainTable = ({
           generateRows(
             currentSortDirection,
             currentSortKey,
+            emptyStateMsg,
             expanding,
             paginate,
             rows,
@@ -219,6 +229,10 @@ const MainTable = ({
 MainTable.propTypes = {
   defaultSort: PropTypes.string,
   defaultSortDirection: PropTypes.oneOf(["ascending", "descending"]),
+  /**
+   * A state that will be shown when no rows are passed to the table.
+   */
+  emptyStateMsg: PropTypes.node,
   expanding: PropTypes.bool,
   headers: PropTypes.arrayOf(
     PropTypes.shape({

src/components/MainTable/MainTable.scss

@@ -0,0 +1,10 @@
+.p-main-table {
+  // Adding caption styling for empty state
+  // https://github.com/canonical-web-and-design/vanilla-framework/issues/2663
+  caption-side: bottom;
+
+  caption {
+    margin-top: -1rem;
+    width: 100%;
+  }
+}

src/components/MainTable/MainTable.stories.mdx

@@ -331,3 +331,18 @@ This is a [React](https://reactjs.org/) component to support many table use case
     />
   </Story>
 </Preview>
+
+### Empty
+
+<Preview>
+  <Story name="Empty">
+    <MainTable
+      headers={[
+        { content: "Plan" },
+        { content: "Foundation Cloud" },
+        { content: "Foundation Cloud Plus" }
+      ]}
+      rows={[]}
+    />
+  </Story>
+</Preview>

src/components/MainTable/__snapshots__/MainTable.test.js.snap

@@ -2,7 +2,9 @@
 
 exports[`MainTable renders 1`] = `
 <Fragment>
-  <Table>
+  <Table
+    className="p-main-table"
+  >
     <thead>
       <TableRow>
         <TableHeader

src/index.scss

@@ -1,2 +1,3 @@
 @import "./components/ActionButton/ActionButton.scss";
 @import "./components/Loader/Loader.scss";
+@import "./components/MainTable/MainTable.scss";