Table - allow noItemMessage to be node

elastic · Mar 15, 2018 · 2cd0bcd · 2cd0bcd
1 parent 3e1eff1
commit 2cd0bcd
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 4 deletions.
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -33,6 +33,45 @@ exports[`EuiBasicTable basic - empty - custom message 1`] = `
 </div>
 `;
 
+exports[`EuiBasicTable basic - empty - custom message as node 1`] = `
+<div
+  className="euiBasicTable testClass1 testClass2"
+>
+  <EuiTable>
+    <EuiTableHeader>
+      <EuiTableHeaderCell
+        align="left"
+        isSortAscending={false}
+        isSorted={false}
+        key="_data_h_name_0"
+        scope="col"
+      >
+        Name
+      </EuiTableHeaderCell>
+    </EuiTableHeader>
+    <EuiTableBody>
+      <EuiTableRow>
+        <EuiTableRowCell
+          align="center"
+          colSpan={1}
+          textOnly={true}
+        >
+          <p>
+            no items, click 
+            <a
+              href={true}
+            >
+              here
+            </a>
+             to make some
+          </p>
+        </EuiTableRowCell>
+      </EuiTableRow>
+    </EuiTableBody>
+  </EuiTable>
+</div>
+`;
+
 exports[`EuiBasicTable basic - empty 1`] = `
 <div
   className="euiBasicTable testClass1 testClass2"

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -120,6 +120,8 @@ export const SelectionType = PropTypes.shape({
   selectableMessage: PropTypes.func // (selectable, item) => boolean;
 });
 
+export const NoItemsMessageType = PropTypes.oneOfType([PropTypes.string, PropTypes.node]);
+
 const SortingType = PropTypes.shape({
   sort: PropertySortType
 });
@@ -133,7 +135,7 @@ const BasicTablePropTypes = {
   onChange: PropTypes.func,
   error: PropTypes.string,
   loading: PropTypes.bool,
-  noItemsMessage: PropTypes.string,
+  noItemsMessage: NoItemsMessageType,
   className: PropTypes.string
 };
 
@@ -421,11 +423,17 @@ export class EuiBasicTable extends Component {
 
   renderEmptyBody() {
     const colSpan = this.props.columns.length + (this.props.selection ? 1 : 0);
+    let message;
+    if (typeof this.props.noItemsMessage === 'string') {
+      message = (<div>{ this.props.noItemsMessage }</div>);
+    } else {
+      message = this.props.noItemsMessage;
+    }
     return (
       <EuiTableBody>
         <EuiTableRow>
           <EuiTableRowCell align="center" colSpan={colSpan}>
-            <div>{ this.props.noItemsMessage }</div>
+            {message}
           </EuiTableRowCell>
         </EuiTableRow>
       </EuiTableBody>

diff --git a/src/components/basic_table/basic_table.test.js b/src/components/basic_table/basic_table.test.js
@@ -47,6 +47,27 @@ describe('EuiBasicTable', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('basic - empty - custom message as node', () => {
+
+    const props = {
+      ...requiredProps,
+      items: [],
+      columns: [
+        {
+          field: 'name',
+          name: 'Name',
+          description: 'description'
+        }
+      ],
+      noItemsMessage: (<p>no items, click <a href>here</a> to make some</p>)
+    };
+    const component = shallow(
+      <EuiBasicTable {...props} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('basic - with items', () => {
 
     const props = {

diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import {
   EuiBasicTable,
   ColumnType,
-  SelectionType
+  SelectionType,
+  NoItemsMessageType
 } from './basic_table';
 import {
   defaults as paginationBarDefaults
@@ -22,7 +23,7 @@ const InMemoryTablePropTypes = {
   columns: PropTypes.arrayOf(ColumnType).isRequired,
   items: PropTypes.array,
   loading: PropTypes.bool,
-  message: PropTypes.string,
+  message: NoItemsMessageType,
   error: PropTypes.string,
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     defaultQuery: QueryType,