feat: add ability to show/hide the header in a table (elastic#719)

w33ble · Jun 26, 2018 · d3c7526 · d3c7526
1 parent 9142458
commit d3c7526
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 15 deletions.
diff --git a/common/functions/__tests__/table.js b/common/functions/__tests__/table.js
@@ -64,5 +64,17 @@ describe('table', () => {
         expect(result).to.have.property('perPage', 10);
       });
     });
+
+    describe('showHeader', () => {
+      it('sets the showHeader property', () => {
+        const result = fn(testTable, { showHeader: false }).value;
+        expect(result).to.have.property('showHeader', false);
+      });
+
+      it('defaults to true', () => {
+        const result = fn(testTable).value;
+        expect(result).to.have.property('showHeader', true);
+      });
+    });
   });
 });
diff --git a/common/functions/table.js b/common/functions/table.js
@@ -22,9 +22,14 @@ export const table = () => ({
       default: 10,
       help: 'Show this many rows per page. You probably want to raise this is disabling pagination',
     },
+    showHeader: {
+      types: ['boolean'],
+      default: true,
+      help: 'Show or hide the header row with titles for each column.',
+    },
   },
   fn: (context, args) => {
-    const { font, paginate, perPage } = args;
+    const { font, paginate, perPage, showHeader } = args;
 
     return {
       type: 'render',
@@ -34,6 +39,7 @@ export const table = () => ({
         font,
         paginate,
         perPage,
+        showHeader,
       },
     };
   },

diff --git a/common/types/datatable.js b/common/types/datatable.js
@@ -57,6 +57,7 @@ export const datatable = () => ({
           datatable,
           paginate: true,
           perPage: 10,
+          showHeader: true,
         },
       };
     },

diff --git a/common/types/pointseries.js b/common/types/pointseries.js
@@ -15,7 +15,10 @@ export const pointseries = () => ({
       return {
         type: 'render',
         as: 'table',
-        value: { datatable },
+        value: {
+          datatable,
+          showHeader: true,
+        },
       };
     },
   },

diff --git a/public/components/datatable/datatable.js b/public/components/datatable/datatable.js
@@ -31,7 +31,7 @@ const getFormattedValue = (val, type) => {
   return String(val);
 };
 
-export const Datatable = ({ datatable, perPage, paginate }) => (
+export const Datatable = ({ datatable, perPage, paginate, showHeader }) => (
   <Paginate rows={datatable.rows} perPage={perPage || 10}>
     {({
       rows,
@@ -46,16 +46,18 @@ export const Datatable = ({ datatable, perPage, paginate }) => (
       <div className="canvas__datatable">
         <div style={{ flexGrow: 1 }}>
           <Table condensed>
-            <thead>
-              <tr>
-                {datatable.columns.map(col => (
-                  <th key={`header-${getColumnName(col)}`}>
-                    {getColumnName(col)}{' '}
-                    <small className="muted">{getIcon(getColumnType(col))}</small>
-                  </th>
-                ))}
-              </tr>
-            </thead>
+            {!showHeader ? null : (
+              <thead>
+                <tr>
+                  {datatable.columns.map(col => (
+                    <th key={`header-${getColumnName(col)}`}>
+                      {getColumnName(col)}{' '}
+                      <small className="muted">{getIcon(getColumnType(col))}</small>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+            )}
             <tbody>
               {rows.map((row, i) => (
                 <tr key={i}>
@@ -90,4 +92,5 @@ Datatable.propTypes = {
   datatable: PropTypes.object.isRequired,
   perPage: PropTypes.number,
   paginate: PropTypes.bool,
+  showHeader: PropTypes.bool,
 };
diff --git a/public/expression_types/views/table.js b/public/expression_types/views/table.js
@@ -27,5 +27,12 @@ export const table = () => ({
       argType: 'toggle',
       default: true,
     },
+    {
+      name: 'showHeader',
+      displayName: 'Header',
+      help: 'Show or hide the header row with titles for each column.',
+      argType: 'toggle',
+      default: true,
+    },
   ],
 });
diff --git a/public/render_functions/table.js b/public/render_functions/table.js
@@ -9,10 +9,15 @@ export const table = () => ({
   help: 'Render tabular data as HTML',
   reuseDomNode: true,
   render(domNode, config, handlers) {
-    const { datatable, paginate, perPage, font } = config;
+    const { datatable, paginate, perPage, font, showHeader } = config;
     ReactDOM.render(
       <div style={{ ...get(font, 'spec'), height: '100%' }}>
-        <Datatable datatable={datatable} perPage={perPage} paginate={paginate} />
+        <Datatable
+          datatable={datatable}
+          perPage={perPage}
+          paginate={paginate}
+          showHeader={showHeader}
+        />
       </div>,
       domNode,
       () => handlers.done()