From e6554fcf1cb9df7c5663ff67858e64f276f2c42f Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Thu, 21 Nov 2019 11:09:40 +0000
Subject: [PATCH 01/12] Fix linting error

---
 src/components/Accordion/Accordion.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Accordion/Accordion.js b/src/components/Accordion/Accordion.js
index 0b3a5dcee..1ff8aa6db 100644
--- a/src/components/Accordion/Accordion.js
+++ b/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
+      ariaMultiselect="true" //eslint-disable-line jsx-a11y/aria-props
     >
       <ul className="p-accordion__list">
         {generateSections(sections, setExpanded, expanded)}

From b608a67c81ba47d560b9d8f334372961ffcc2259 Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Thu, 21 Nov 2019 11:11:31 +0000
Subject: [PATCH 02/12] Add empty state to MainTable

---
 .../__snapshots__/Accordion.test.js.snap      |   2 +-
 src/components/MainTable/MainTable.js         | 106 +++++++++---------
 src/components/MainTable/MainTable.scss       |   4 +
 .../MainTable/MainTable.stories.mdx           |  15 +++
 src/components/Table/Table.js                 |   1 +
 .../Table/__snapshots__/Table.test.js.snap    |   5 +
 src/index.scss                                |   1 +
 7 files changed, 83 insertions(+), 51 deletions(-)
 create mode 100644 src/components/MainTable/MainTable.scss

diff --git a/src/components/Accordion/__snapshots__/Accordion.test.js.snap b/src/components/Accordion/__snapshots__/Accordion.test.js.snap
index e669bebf1..76b29e11f 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.js.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Accordion  renders 1`] = `
 <aside
-  aria-multiselect="true"
+  ariaMultiselect="true"
   className="p-accordion"
   role="tablist"
 >
diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index 8131f17ad..6c161c3a5 100644
--- a/src/components/MainTable/MainTable.js
+++ b/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") {
@@ -82,60 +84,64 @@ const generateRows = (
   sortFunction
 ) => {
   // Clone the rows so we can restore the original order.
-  const sortedRows = [...rows];
-  if (sortable && currentSortKey) {
-    if (!sortFunction) {
-      sortFunction = (a, b) => {
-        if (!a.sortData || !b.sortData) {
+  if (Object.entries(rows).length) {
+    const sortedRows = [...rows];
+    if (sortable && currentSortKey) {
+      if (!sortFunction) {
+        sortFunction = (a, b) => {
+          if (!a.sortData || !b.sortData) {
+            return 0;
+          }
+          if (a.sortData[currentSortKey] > b.sortData[currentSortKey]) {
+            return currentSortDirection === "ascending" ? 1 : -1;
+          } else if (a.sortData[currentSortKey] < b.sortData[currentSortKey]) {
+            return currentSortDirection === "ascending" ? -1 : 1;
+          }
           return 0;
-        }
-        if (a.sortData[currentSortKey] > b.sortData[currentSortKey]) {
-          return currentSortDirection === "ascending" ? 1 : -1;
-        } else if (a.sortData[currentSortKey] < b.sortData[currentSortKey]) {
-          return currentSortDirection === "ascending" ? -1 : 1;
-        }
-        return 0;
-      };
+        };
+      }
+      sortedRows.sort((a, b) =>
+        sortFunction(a, b, currentSortDirection, currentSortKey)
+      );
     }
-    sortedRows.sort((a, b) =>
-      sortFunction(a, b, currentSortDirection, currentSortKey)
-    );
-  }
-  let slicedRows = sortedRows;
-  if (paginate) {
-    let startIndex = (currentPage - 1) * paginate;
-    if (startIndex > rows.length) {
-      // If the rows have changed e.g. when filtering and the user is on a page
-      // that no longer exists then send them to the start.
-      setCurrentPage(1);
+    let slicedRows = sortedRows;
+    if (paginate) {
+      let startIndex = (currentPage - 1) * paginate;
+      if (startIndex > rows.length) {
+        // If the rows have changed e.g. when filtering and the user is on a page
+        // that no longer exists then send them to the start.
+        setCurrentPage(1);
+      }
+      slicedRows = sortedRows.slice(startIndex, startIndex + paginate);
     }
-    slicedRows = sortedRows.slice(startIndex, startIndex + paginate);
+    const rowItems = slicedRows.map(
+      (
+        { columns, expanded, expandedContent, key, sortData, ...rowProps },
+        index
+      ) => {
+        const cellItems = columns.map(({ content, ...cellProps }, index) => (
+          <TableCell key={index} {...cellProps}>
+            {content}
+          </TableCell>
+        ));
+        // The expanding cell is alway created to match the correct number of
+        // table cells in rows that do have expanding content.
+        return (
+          <TableRow key={key || index} {...rowProps}>
+            {cellItems}
+            {expanding && (
+              <TableCell expanding={true} hidden={!expanded}>
+                {expandedContent}
+              </TableCell>
+            )}
+          </TableRow>
+        );
+      }
+    );
+    return <tbody>{rowItems}</tbody>;
+  } else {
+    return <caption>No data to display</caption>;
   }
-  const rowItems = slicedRows.map(
-    (
-      { columns, expanded, expandedContent, key, sortData, ...rowProps },
-      index
-    ) => {
-      const cellItems = columns.map(({ content, ...cellProps }, index) => (
-        <TableCell key={index} {...cellProps}>
-          {content}
-        </TableCell>
-      ));
-      // The expanding cell is alway created to match the correct number of
-      // table cells in rows that do have expanding content.
-      return (
-        <TableRow key={key || index} {...rowProps}>
-          {cellItems}
-          {expanding && (
-            <TableCell expanding={true} hidden={!expanded}>
-              {expandedContent}
-            </TableCell>
-          )}
-        </TableRow>
-      );
-    }
-  );
-  return <tbody>{rowItems}</tbody>;
 };
 
 const MainTable = ({
diff --git a/src/components/MainTable/MainTable.scss b/src/components/MainTable/MainTable.scss
new file mode 100644
index 000000000..06b1b9c9b
--- /dev/null
+++ b/src/components/MainTable/MainTable.scss
@@ -0,0 +1,4 @@
+caption {
+  margin-top: -1rem;
+  width: 100%;
+}
diff --git a/src/components/MainTable/MainTable.stories.mdx b/src/components/MainTable/MainTable.stories.mdx
index b146c4a51..c80e0c16b 100644
--- a/src/components/MainTable/MainTable.stories.mdx
+++ b/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>
diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
index 91d22b757..b06619c2e 100644
--- a/src/components/Table/Table.js
+++ b/src/components/Table/Table.js
@@ -17,6 +17,7 @@ const Table = ({
       "p-table--sortable": sortable,
       "p-table-expanding": expanding
     })}
+    style={{ captionSide: "bottom" }}
     {...props}
   >
     {children}
diff --git a/src/components/Table/__snapshots__/Table.test.js.snap b/src/components/Table/__snapshots__/Table.test.js.snap
index be7aa7401..4171a171a 100644
--- a/src/components/Table/__snapshots__/Table.test.js.snap
+++ b/src/components/Table/__snapshots__/Table.test.js.snap
@@ -4,6 +4,11 @@ exports[`Table renders 1`] = `
 <table
   className=""
   role="grid"
+  style={
+    Object {
+      "captionSide": "bottom",
+    }
+  }
 >
   <thead />
 </table>
diff --git a/src/index.scss b/src/index.scss
index 7e28d4bbe..a31cefd80 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,2 +1,3 @@
 @import "./components/ActionButton/ActionButton.scss";
 @import "./components/Loader/Loader.scss";
+@import "./components/MainTable/MainTable.scss";

From 0470cde7667ddee9b19b10a9375b491bb6504ea9 Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Tue, 3 Dec 2019 11:58:26 +0000
Subject: [PATCH 03/12] Remove nesting

---
 src/components/MainTable/MainTable.js | 107 +++++++++++++-------------
 1 file changed, 53 insertions(+), 54 deletions(-)

diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index 6c161c3a5..cc070fbc5 100644
--- a/src/components/MainTable/MainTable.js
+++ b/src/components/MainTable/MainTable.js
@@ -84,64 +84,63 @@ const generateRows = (
   sortFunction
 ) => {
   // Clone the rows so we can restore the original order.
-  if (Object.entries(rows).length) {
-    const sortedRows = [...rows];
-    if (sortable && currentSortKey) {
-      if (!sortFunction) {
-        sortFunction = (a, b) => {
-          if (!a.sortData || !b.sortData) {
-            return 0;
-          }
-          if (a.sortData[currentSortKey] > b.sortData[currentSortKey]) {
-            return currentSortDirection === "ascending" ? 1 : -1;
-          } else if (a.sortData[currentSortKey] < b.sortData[currentSortKey]) {
-            return currentSortDirection === "ascending" ? -1 : 1;
-          }
+  if (Object.entries(rows).length === 0) {
+    return <caption>No data to display</caption>;
+  }
+  const sortedRows = [...rows];
+  if (sortable && currentSortKey) {
+    if (!sortFunction) {
+      sortFunction = (a, b) => {
+        if (!a.sortData || !b.sortData) {
           return 0;
-        };
-      }
-      sortedRows.sort((a, b) =>
-        sortFunction(a, b, currentSortDirection, currentSortKey)
-      );
-    }
-    let slicedRows = sortedRows;
-    if (paginate) {
-      let startIndex = (currentPage - 1) * paginate;
-      if (startIndex > rows.length) {
-        // If the rows have changed e.g. when filtering and the user is on a page
-        // that no longer exists then send them to the start.
-        setCurrentPage(1);
-      }
-      slicedRows = sortedRows.slice(startIndex, startIndex + paginate);
+        }
+        if (a.sortData[currentSortKey] > b.sortData[currentSortKey]) {
+          return currentSortDirection === "ascending" ? 1 : -1;
+        } else if (a.sortData[currentSortKey] < b.sortData[currentSortKey]) {
+          return currentSortDirection === "ascending" ? -1 : 1;
+        }
+        return 0;
+      };
     }
-    const rowItems = slicedRows.map(
-      (
-        { columns, expanded, expandedContent, key, sortData, ...rowProps },
-        index
-      ) => {
-        const cellItems = columns.map(({ content, ...cellProps }, index) => (
-          <TableCell key={index} {...cellProps}>
-            {content}
-          </TableCell>
-        ));
-        // The expanding cell is alway created to match the correct number of
-        // table cells in rows that do have expanding content.
-        return (
-          <TableRow key={key || index} {...rowProps}>
-            {cellItems}
-            {expanding && (
-              <TableCell expanding={true} hidden={!expanded}>
-                {expandedContent}
-              </TableCell>
-            )}
-          </TableRow>
-        );
-      }
+    sortedRows.sort((a, b) =>
+      sortFunction(a, b, currentSortDirection, currentSortKey)
     );
-    return <tbody>{rowItems}</tbody>;
-  } else {
-    return <caption>No data to display</caption>;
   }
+  let slicedRows = sortedRows;
+  if (paginate) {
+    let startIndex = (currentPage - 1) * paginate;
+    if (startIndex > rows.length) {
+      // If the rows have changed e.g. when filtering and the user is on a page
+      // that no longer exists then send them to the start.
+      setCurrentPage(1);
+    }
+    slicedRows = sortedRows.slice(startIndex, startIndex + paginate);
+  }
+  const rowItems = slicedRows.map(
+    (
+      { columns, expanded, expandedContent, key, sortData, ...rowProps },
+      index
+    ) => {
+      const cellItems = columns.map(({ content, ...cellProps }, index) => (
+        <TableCell key={index} {...cellProps}>
+          {content}
+        </TableCell>
+      ));
+      // The expanding cell is alway created to match the correct number of
+      // table cells in rows that do have expanding content.
+      return (
+        <TableRow key={key || index} {...rowProps}>
+          {cellItems}
+          {expanding && (
+            <TableCell expanding={true} hidden={!expanded}>
+              {expandedContent}
+            </TableCell>
+          )}
+        </TableRow>
+      );
+    }
+  );
+  return <tbody>{rowItems}</tbody>;
 };
 
 const MainTable = ({

From 1504618433776a9414cfcfc7a2e4f705dd68d27d Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Tue, 3 Dec 2019 12:01:30 +0000
Subject: [PATCH 04/12] Add comment to custom styling

---
 src/components/MainTable/MainTable.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/MainTable/MainTable.scss b/src/components/MainTable/MainTable.scss
index 06b1b9c9b..091051bb2 100644
--- a/src/components/MainTable/MainTable.scss
+++ b/src/components/MainTable/MainTable.scss
@@ -1,3 +1,5 @@
+// Adding caption styling for empty state
+// https://github.com/canonical-web-and-design/vanilla-framework/issues/2663
 caption {
   margin-top: -1rem;
   width: 100%;

From 3d1c10ac2bb2058cbd8572635e4fc25be4cd174a Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Tue, 3 Dec 2019 12:43:38 +0000
Subject: [PATCH 05/12] Add emptyStateMsg prop

---
 src/components/MainTable/MainTable.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index cc070fbc5..2757811a5 100644
--- a/src/components/MainTable/MainTable.js
+++ b/src/components/MainTable/MainTable.js
@@ -75,6 +75,7 @@ const generateHeaders = (
 const generateRows = (
   currentSortDirection,
   currentSortKey,
+  emptyStateMsg,
   expanding,
   paginate,
   rows,
@@ -83,10 +84,11 @@ const generateRows = (
   sortable,
   sortFunction
 ) => {
-  // Clone the rows so we can restore the original order.
+  // If the table has no rows, return empty state message
   if (Object.entries(rows).length === 0) {
-    return <caption>No data to display</caption>;
+    return <caption>{emptyStateMsg}</caption>;
   }
+  // Clone the rows so we can restore the original order.
   const sortedRows = [...rows];
   if (sortable && currentSortKey) {
     if (!sortFunction) {
@@ -146,6 +148,7 @@ const generateRows = (
 const MainTable = ({
   defaultSort,
   defaultSortDirection,
+  emptyStateMsg,
   expanding,
   headers,
   onUpdateSort,
@@ -180,6 +183,7 @@ const MainTable = ({
   return (
     <>
       <Table
+        emptyStateMsg={emptyStateMsg}
         expanding={expanding}
         sortable={sortable}
         responsive={responsive}
@@ -199,6 +203,7 @@ const MainTable = ({
           generateRows(
             currentSortDirection,
             currentSortKey,
+            emptyStateMsg,
             expanding,
             paginate,
             rows,
@@ -224,6 +229,7 @@ const MainTable = ({
 MainTable.propTypes = {
   defaultSort: PropTypes.string,
   defaultSortDirection: PropTypes.oneOf(["ascending", "descending"]),
+  emptyStateMsg: PropTypes.string.isRequired,
   expanding: PropTypes.bool,
   headers: PropTypes.arrayOf(
     PropTypes.shape({
@@ -257,4 +263,9 @@ MainTable.propTypes = {
   sortFunction: PropTypes.func
 };
 
+// Specifies the default values for props:
+MainTable.defaultProps = {
+  emptyStateMsg: "No data to display"
+};
+
 export default MainTable;

From 7458f6120274e4f5ec63758e32e84f692921e9dc Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Mon, 9 Dec 2019 12:04:48 +0000
Subject: [PATCH 06/12] Change ariaMultiselect to ariaMultiselectable

https://webplatform.github.io/docs/aria/attributes/aria-multiselectable/
---
 src/components/Accordion/Accordion.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Accordion/Accordion.js b/src/components/Accordion/Accordion.js
index 1ff8aa6db..34ccbdc7c 100644
--- a/src/components/Accordion/Accordion.js
+++ b/src/components/Accordion/Accordion.js
@@ -22,7 +22,7 @@ const Accordion = ({ className, sections, ...props }) => {
       className={classNames(className, "p-accordion")}
       {...props}
       role="tablist"
-      ariaMultiselect="true" //eslint-disable-line jsx-a11y/aria-props
+      ariaMultiselectable="true"
     >
       <ul className="p-accordion__list">
         {generateSections(sections, setExpanded, expanded)}

From c4e6864c84af67216b276f51fc55ab2594b82e53 Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Mon, 9 Dec 2019 12:05:07 +0000
Subject: [PATCH 07/12] Scope styling to MainTable

---
 src/components/MainTable/MainTable.js   |  1 +
 src/components/MainTable/MainTable.scss | 14 +++++++++-----
 src/components/Table/Table.js           |  1 -
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index 2757811a5..e590cd74d 100644
--- a/src/components/MainTable/MainTable.js
+++ b/src/components/MainTable/MainTable.js
@@ -183,6 +183,7 @@ const MainTable = ({
   return (
     <>
       <Table
+        className="p-main-table"
         emptyStateMsg={emptyStateMsg}
         expanding={expanding}
         sortable={sortable}
diff --git a/src/components/MainTable/MainTable.scss b/src/components/MainTable/MainTable.scss
index 091051bb2..9290b3396 100644
--- a/src/components/MainTable/MainTable.scss
+++ b/src/components/MainTable/MainTable.scss
@@ -1,6 +1,10 @@
-// Adding caption styling for empty state
-// https://github.com/canonical-web-and-design/vanilla-framework/issues/2663
-caption {
-  margin-top: -1rem;
-  width: 100%;
+.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%;
+  }
 }
diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js
index b06619c2e..91d22b757 100644
--- a/src/components/Table/Table.js
+++ b/src/components/Table/Table.js
@@ -17,7 +17,6 @@ const Table = ({
       "p-table--sortable": sortable,
       "p-table-expanding": expanding
     })}
-    style={{ captionSide: "bottom" }}
     {...props}
   >
     {children}

From 4aa0cdfcd09ea906f929aa768070d636ad47b0d7 Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Mon, 9 Dec 2019 12:06:57 +0000
Subject: [PATCH 08/12] Use default params instead of defaultProps

---
 src/components/MainTable/MainTable.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index e590cd74d..8973eefc5 100644
--- a/src/components/MainTable/MainTable.js
+++ b/src/components/MainTable/MainTable.js
@@ -148,7 +148,7 @@ const generateRows = (
 const MainTable = ({
   defaultSort,
   defaultSortDirection,
-  emptyStateMsg,
+  emptyStateMsg = "No data to display",
   expanding,
   headers,
   onUpdateSort,
@@ -264,9 +264,4 @@ MainTable.propTypes = {
   sortFunction: PropTypes.func
 };
 
-// Specifies the default values for props:
-MainTable.defaultProps = {
-  emptyStateMsg: "No data to display"
-};
-
 export default MainTable;

From 0d9e3e0e29d198e8b89d0b319d54d2c7197f1af1 Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Mon, 9 Dec 2019 12:11:03 +0000
Subject: [PATCH 09/12] Update snapshots

Update snapshots
---
 .../Accordion/__snapshots__/Accordion.test.js.snap           | 2 +-
 .../MainTable/__snapshots__/MainTable.test.js.snap           | 4 +++-
 src/components/Table/__snapshots__/Table.test.js.snap        | 5 -----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/Accordion/__snapshots__/Accordion.test.js.snap b/src/components/Accordion/__snapshots__/Accordion.test.js.snap
index 76b29e11f..5a29adf0a 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.js.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Accordion  renders 1`] = `
 <aside
-  ariaMultiselect="true"
+  ariaMultiselectable="true"
   className="p-accordion"
   role="tablist"
 >
diff --git a/src/components/MainTable/__snapshots__/MainTable.test.js.snap b/src/components/MainTable/__snapshots__/MainTable.test.js.snap
index fe2be2032..a295912f7 100644
--- a/src/components/MainTable/__snapshots__/MainTable.test.js.snap
+++ b/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
diff --git a/src/components/Table/__snapshots__/Table.test.js.snap b/src/components/Table/__snapshots__/Table.test.js.snap
index 4171a171a..be7aa7401 100644
--- a/src/components/Table/__snapshots__/Table.test.js.snap
+++ b/src/components/Table/__snapshots__/Table.test.js.snap
@@ -4,11 +4,6 @@ exports[`Table renders 1`] = `
 <table
   className=""
   role="grid"
-  style={
-    Object {
-      "captionSide": "bottom",
-    }
-  }
 >
   <thead />
 </table>

From a6047185d8d37f44575dd77426a855720322d46f Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Mon, 9 Dec 2019 12:11:17 +0000
Subject: [PATCH 10/12] Remove isRequired from emptyStateMsg propType

---
 src/components/MainTable/MainTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index 8973eefc5..81bcf8c80 100644
--- a/src/components/MainTable/MainTable.js
+++ b/src/components/MainTable/MainTable.js
@@ -230,7 +230,7 @@ const MainTable = ({
 MainTable.propTypes = {
   defaultSort: PropTypes.string,
   defaultSortDirection: PropTypes.oneOf(["ascending", "descending"]),
-  emptyStateMsg: PropTypes.string.isRequired,
+  emptyStateMsg: PropTypes.string,
   expanding: PropTypes.bool,
   headers: PropTypes.arrayOf(
     PropTypes.shape({

From 8fb7b61cf7d79736eb71bf89763ea57b9ac57f48 Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Mon, 9 Dec 2019 12:15:01 +0000
Subject: [PATCH 11/12] Remove erroneous prop declaration

---
 src/components/MainTable/MainTable.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index 81bcf8c80..563b14cbf 100644
--- a/src/components/MainTable/MainTable.js
+++ b/src/components/MainTable/MainTable.js
@@ -184,7 +184,6 @@ const MainTable = ({
     <>
       <Table
         className="p-main-table"
-        emptyStateMsg={emptyStateMsg}
         expanding={expanding}
         sortable={sortable}
         responsive={responsive}

From 748b20c66c563ea86a130970705f81206fbb9831 Mon Sep 17 00:00:00 2001
From: Barry McGee <barry.mcgee@integralcode.co.uk>
Date: Wed, 8 Jan 2020 09:12:17 +0000
Subject: [PATCH 12/12] Action feedback

---
 src/components/MainTable/MainTable.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/MainTable/MainTable.js b/src/components/MainTable/MainTable.js
index 563b14cbf..a00605d68 100644
--- a/src/components/MainTable/MainTable.js
+++ b/src/components/MainTable/MainTable.js
@@ -85,7 +85,7 @@ const generateRows = (
   sortFunction
 ) => {
   // If the table has no rows, return empty state message
-  if (Object.entries(rows).length === 0) {
+  if (Object.entries(rows).length === 0 && emptyStateMsg) {
     return <caption>{emptyStateMsg}</caption>;
   }
   // Clone the rows so we can restore the original order.
@@ -148,7 +148,7 @@ const generateRows = (
 const MainTable = ({
   defaultSort,
   defaultSortDirection,
-  emptyStateMsg = "No data to display",
+  emptyStateMsg = "",
   expanding,
   headers,
   onUpdateSort,
@@ -229,7 +229,10 @@ const MainTable = ({
 MainTable.propTypes = {
   defaultSort: PropTypes.string,
   defaultSortDirection: PropTypes.oneOf(["ascending", "descending"]),
-  emptyStateMsg: PropTypes.string,
+  /**
+   * 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({