From 3584c3dfd8a37fecbe30a7b6ecea4ab5e539cf94 Mon Sep 17 00:00:00 2001
From: Stephen Stone <sstone2423@gmail.com>
Date: Thu, 13 Feb 2020 09:12:36 -0500
Subject: [PATCH] feat(table): toolbar only renders with children (#902)

* feat(table): toolbar only renders with children

* feat(table): added secondarytitle and tooltip conditionals

* feat(tabletoolbar): add conditionals to render
---
 src/components/Table/Table.jsx                |  112 +-
 src/components/Table/Table.story.jsx          |   36 +-
 .../Table/__snapshots__/Table.story.storyshot | 5333 ++---------------
 .../__snapshots__/TableCard.story.storyshot   |  150 +-
 4 files changed, 712 insertions(+), 4919 deletions(-)

diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
index 243c659d71..2ee5f1e030 100644
--- a/src/components/Table/Table.jsx
+++ b/src/components/Table/Table.jsx
@@ -362,57 +362,67 @@ const Table = props => {
 
   return (
     <StyledTableContainer style={style} className={className}>
-      <TableToolbar
-        tableId={id}
-        secondaryTitle={secondaryTitle}
-        tooltip={tooltip}
-        i18n={{
-          clearAllFilters: i18n.clearAllFilters,
-          columnSelectionButtonAria: i18n.columnSelectionButtonAria,
-          filterButtonAria: i18n.filterButtonAria,
-          searchLabel: i18n.searchLabel,
-          searchPlaceholder: i18n.searchPlaceholder,
-          batchCancel: i18n.batchCancel,
-          itemsSelected: i18n.itemsSelected,
-          itemSelected: i18n.itemSelected,
-          filterNone: i18n.filterNone,
-          filterAscending: i18n.filterAscending,
-          filterDescending: i18n.filterDescending,
-          downloadIconDescription: i18n.downloadIconDescription,
-          rowCountInHeader: i18n.rowCountInHeader,
-        }}
-        actions={pick(
-          actions.toolbar,
-          'onCancelBatchAction',
-          'onApplyBatchAction',
-          'onClearAllFilters',
-          'onToggleColumnSelection',
-          'onToggleFilter',
-          'onApplySearch',
-          'onDownloadCSV'
-        )}
-        options={pick(
-          options,
-          'hasColumnSelection',
-          'hasFilter',
-          'hasSearch',
-          'hasRowSelection',
-          'hasRowCountInHeader'
-        )}
-        tableState={{
-          totalSelected: view.table.selectedIds.length,
-          totalFilters: view.filters ? view.filters.length : 0,
-          totalItemsCount: view.pagination.totalItems,
-          ...pick(
-            view.toolbar,
-            'batchActions',
-            'search',
-            'activeBar',
-            'customToolbarContent',
-            'isDisabled'
-          ),
-        }}
-      />
+      {/* If there is no items being rendered in the toolbar, don't render the toolbar */
+      options.hasFilter ||
+      options.hasSearch ||
+      options.hasRowActions ||
+      options.hasRowCountInHeader ||
+      options.hasColumnSelection ||
+      actions.toolbar.onDownloadCSV ||
+      secondaryTitle ||
+      tooltip ? (
+        <TableToolbar
+          tableId={id}
+          secondaryTitle={secondaryTitle}
+          tooltip={tooltip}
+          i18n={{
+            clearAllFilters: i18n.clearAllFilters,
+            columnSelectionButtonAria: i18n.columnSelectionButtonAria,
+            filterButtonAria: i18n.filterButtonAria,
+            searchLabel: i18n.searchLabel,
+            searchPlaceholder: i18n.searchPlaceholder,
+            batchCancel: i18n.batchCancel,
+            itemsSelected: i18n.itemsSelected,
+            itemSelected: i18n.itemSelected,
+            filterNone: i18n.filterNone,
+            filterAscending: i18n.filterAscending,
+            filterDescending: i18n.filterDescending,
+            downloadIconDescription: i18n.downloadIconDescription,
+            rowCountInHeader: i18n.rowCountInHeader,
+          }}
+          actions={pick(
+            actions.toolbar,
+            'onCancelBatchAction',
+            'onApplyBatchAction',
+            'onClearAllFilters',
+            'onToggleColumnSelection',
+            'onToggleFilter',
+            'onApplySearch',
+            'onDownloadCSV'
+          )}
+          options={pick(
+            options,
+            'hasColumnSelection',
+            'hasFilter',
+            'hasSearch',
+            'hasRowSelection',
+            'hasRowCountInHeader'
+          )}
+          tableState={{
+            totalSelected: view.table.selectedIds.length,
+            totalFilters: view.filters ? view.filters.length : 0,
+            totalItemsCount: view.pagination.totalItems,
+            ...pick(
+              view.toolbar,
+              'batchActions',
+              'search',
+              'activeBar',
+              'customToolbarContent',
+              'isDisabled'
+            ),
+          }}
+        />
+      ) : null}
       <div className="addons-iot-table-container">
         <CarbonTable
           className={classNames({
diff --git a/src/components/Table/Table.story.jsx b/src/components/Table/Table.story.jsx
index ea80e75b49..cc7ab5f0d9 100644
--- a/src/components/Table/Table.story.jsx
+++ b/src/components/Table/Table.story.jsx
@@ -320,12 +320,7 @@ const actions = {
     onColumnResize: action('onColumnResize'),
   },
 };
-// const exampletext = (
-//   <div>
-//     <p>This is text</p>
-//     <Add />
-//   </div>
-// );
+
 /** This would be loaded from your fetch */
 export const initialState = {
   columns: tableColumns.map((i, idx) => ({
@@ -447,6 +442,7 @@ storiesOf('Watson IoT|Table', module)
       <FullWidthWrapper>
         <StatefulTable
           {...initialState}
+          secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
           columns={tableColumnsWithAlignment}
           actions={actions}
           lightweight={boolean('lightweight', false)}
@@ -467,32 +463,12 @@ storiesOf('Watson IoT|Table', module)
       },
     }
   )
-  .add('Stateful Example with Secondary Title', () => (
-    <FullWidthWrapper>
-      <StatefulTable
-        {...initialState}
-        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
-        options={{
-          hasSearch: boolean('Show Search', true),
-          hasPagination: boolean('Show Pagination', true),
-          hasRowSelection: 'multi',
-          hasFilter: boolean('Show Filter', true),
-          hasRowActions: boolean('Show Row Action', true),
-        }}
-        view={{
-          toolbar: { activeBar: null },
-        }}
-      />
-    </FullWidthWrapper>
-  ),
-  {
-    centered: { disable: true },
-  })
   .add(
     'Stateful Example with every third row unselectable',
     () => (
       <StatefulTable
         {...initialState}
+        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
         data={initialState.data.map((eachRow, index) => ({
           ...eachRow,
           isSelectable: index % 3 !== 0,
@@ -521,6 +497,7 @@ storiesOf('Watson IoT|Table', module)
       <FullWidthWrapper>
         <StatefulTable
           {...initialState}
+          secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
           actions={{
             ...actions,
             toolbar: { ...actions.toolbar, onDownloadCSV: csvDownloadHandler },
@@ -598,6 +575,7 @@ storiesOf('Watson IoT|Table', module)
         <div>
           <StatefulTable
             {...initialState}
+            secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
             columns={tableColumnsFixedWidth}
             data={tableData}
             options={{
@@ -719,6 +697,7 @@ storiesOf('Watson IoT|Table', module)
     'minitable',
     () => (
       <StatefulTable
+        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
         style={{ maxWidth: '300px' }}
         columns={tableColumns.slice(0, 2)}
         data={tableData}
@@ -734,6 +713,7 @@ storiesOf('Watson IoT|Table', module)
   )
   .add('with multi select and batch actions', () => (
     <StatefulTable
+      secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
       columns={tableColumns}
       data={tableData}
       actions={actions}
@@ -1543,6 +1523,7 @@ storiesOf('Watson IoT|Table', module)
     () => (
       <StatefulTable
         {...initialState}
+        secondaryTitle={text('Secondary Title', `Row count: ${initialState.data.length}`)}
         actions={actions}
         options={{
           hasRowActions: true,
@@ -1659,7 +1640,6 @@ storiesOf('Watson IoT|Table', module)
             learnMoreText,
             dismissText,
           }
-        ~~~
 
         <br />
 
diff --git a/src/components/Table/__snapshots__/Table.story.storyshot b/src/components/Table/__snapshots__/Table.story.storyshot
index 5c3924800f..81433a5c3b 100644
--- a/src/components/Table/__snapshots__/Table.story.storyshot
+++ b/src/components/Table/__snapshots__/Table.story.storyshot
@@ -2044,8 +2044,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-17"
-                id="bx-pagination-select-17-count-label"
+                htmlFor="bx-pagination-select-16"
+                id="bx-pagination-select-16-count-label"
               >
                 Items per page:
               </label>
@@ -2064,7 +2064,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-17"
+                        id="bx-pagination-select-16"
                         onChange={[Function]}
                         value={10}
                       >
@@ -2133,7 +2133,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-19"
+                    htmlFor="bx-pagination-select-18"
                   >
                     Page number, of 10 pages
                   </label>
@@ -2146,7 +2146,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-19"
+                        id="bx-pagination-select-18"
                         onChange={[Function]}
                         value={1}
                       >
@@ -2791,42 +2791,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
           <div
             className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
           >
-            <section
-              aria-label="data table toolbar"
-              className="bx--table-toolbar"
-            >
-              <div
-                className="bx--batch-actions iot--table-batch-actions"
-              >
-                <div
-                  className="bx--action-list"
-                >
-                  <button
-                    className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </div>
-                <div
-                  className="bx--batch-summary"
-                >
-                  <p
-                    className="bx--batch-summary__para"
-                  >
-                    <span>
-                      0 item selected
-                    </span>
-                  </p>
-                </div>
-              </div>
-              <div
-                className="bx--toolbar-content iot--table-toolbar-content"
-              />
-            </section>
             <div
               className="addons-iot-table-container"
             >
@@ -20621,6 +20585,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   </p>
                 </div>
               </div>
+              <label
+                className="iot--table-toolbar-secondary-title"
+              >
+                Row count: 100
+              </label>
               <div
                 className="bx--toolbar-content iot--table-toolbar-content"
               />
@@ -36452,6 +36421,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 </p>
               </div>
             </div>
+            <label
+              className="iot--table-toolbar-secondary-title"
+            >
+              Row count: 100
+            </label>
             <div
               className="bx--toolbar-content iot--table-toolbar-content"
             />
@@ -58817,7 +58791,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
 </div>
 `;
 
-exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table Stateful Example with Secondary Title 1`] = `
+exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table Stateful Example with every third row unselectable 1`] = `
 <div
   style={
     Object {
@@ -58857,4067 +58831,560 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         }
       >
         <div
-          style={
-            Object {
-              "width": "calc(100vw - 6rem)",
-            }
-          }
+          className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <div
-            className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
+          <section
+            aria-label="data table toolbar"
+            className="bx--table-toolbar"
           >
-            <section
-              aria-label="data table toolbar"
-              className="bx--table-toolbar"
+            <div
+              className="bx--batch-actions iot--table-batch-actions"
             >
               <div
-                className="bx--batch-actions iot--table-batch-actions"
+                className="bx--action-list"
               >
-                <div
-                  className="bx--action-list"
-                >
-                  <button
-                    className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </div>
-                <div
-                  className="bx--batch-summary"
+                <button
+                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
+                  disabled={false}
+                  onClick={[Function]}
+                  tabIndex={0}
+                  type="button"
                 >
-                  <p
-                    className="bx--batch-summary__para"
-                  >
-                    <span>
-                      0 item selected
-                    </span>
-                  </p>
-                </div>
+                  Cancel
+                </button>
               </div>
-              <label
-                className="iot--table-toolbar-secondary-title"
-              >
-                Row count: 100
-              </label>
               <div
-                className="bx--toolbar-content iot--table-toolbar-content"
+                className="bx--batch-summary"
               >
-                <div
-                  className="bx--toolbar-action bx--toolbar-search-container-expandable"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  role="search"
-                  tabIndex="0"
+                <p
+                  className="bx--batch-summary__para"
                 >
-                  <div
-                    className="bx--search bx--search--sm table-toolbar-search"
+                  <span>
+                    0 item selected
+                  </span>
+                </p>
+              </div>
+            </div>
+            <label
+              className="iot--table-toolbar-secondary-title"
+            >
+              Row count: 100
+            </label>
+            <div
+              className="bx--toolbar-content iot--table-toolbar-content"
+            />
+          </section>
+          <div
+            className="addons-iot-table-container"
+          >
+            <table
+              className="bx--data-table bx--data-table--no-border"
+              title={null}
+            >
+              <thead
+                onMouseMove={[Function]}
+                onMouseUp={[Function]}
+              >
+                <tr>
+                  <th
+                    className="iot--table-header-checkbox"
+                    scope="col"
+                    style={Object {}}
                   >
-                    <svg
-                      aria-hidden={true}
-                      className="bx--search-magnifier"
-                      focusable="false"
-                      height={16}
-                      preserveAspectRatio="xMidYMid meet"
-                      style={
-                        Object {
-                          "willChange": "transform",
-                        }
-                      }
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                      />
-                    </svg>
-                    <label
-                      className="bx--label"
-                      htmlFor="Table-toolbar-search"
+                    <span
+                      className="bx--table-header-label"
                     >
-                      Search
-                    </label>
-                    <input
-                      aria-hidden={true}
-                      autoComplete="off"
-                      className="bx--search-input"
-                      id="Table-toolbar-search"
-                      onChange={[Function]}
-                      placeholder="Search"
-                      role="searchbox"
-                      type="text"
-                      value=""
-                    />
+                      <div
+                        className="bx--form-item bx--checkbox-wrapper"
+                      >
+                        <input
+                          checked={false}
+                          className="bx--checkbox"
+                          id="select-all"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <label
+                          className="bx--checkbox-label"
+                          htmlFor="select-all"
+                          title={null}
+                        >
+                          <span
+                            className="bx--checkbox-label-text bx--visually-hidden"
+                          >
+                            Select all items
+                          </span>
+                        </label>
+                      </div>
+                    </span>
+                  </th>
+                  <th
+                    aria-sort="none"
+                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
+                    scope="col"
+                    style={
+                      Object {
+                        "width": undefined,
+                      }
+                    }
+                  >
                     <button
-                      aria-label="Clear search input"
-                      className="bx--search-close bx--search-close--hidden"
+                      align="start"
+                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
+                      data-column="string"
+                      id="column-string"
                       onClick={[Function]}
-                      type="button"
                     >
+                      <span
+                        className="bx--table-header-label"
+                      >
+                        <span
+                          title="String"
+                        >
+                          String
+                        </span>
+                      </span>
                       <svg
-                        aria-hidden={true}
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon"
                         focusable="false"
-                        height={16}
+                        height={20}
                         preserveAspectRatio="xMidYMid meet"
+                        role="img"
                         style={
                           Object {
                             "willChange": "transform",
                           }
                         }
-                        viewBox="0 0 16 16"
-                        width={16}
+                        viewBox="0 0 32 32"
+                        width={20}
                         xmlns="http://www.w3.org/2000/svg"
                       >
                         <path
-                          d="M12 4.7L11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8z"
+                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
+                        />
+                      </svg>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon-unsorted"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
+                          }
+                        }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
                         />
                       </svg>
                     </button>
-                  </div>
-                </div>
-                <div
-                  className="iot--tooltip-svg-wrapper"
-                  data-testid="filter-button"
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  role="button"
-                  tabIndex={0}
-                >
-                  <svg
-                    aria-hidden={true}
-                    description="Filters"
-                    focusable="false"
-                    height={20}
-                    preserveAspectRatio="xMidYMid meet"
+                  </th>
+                  <th
+                    align="start"
+                    className="table-header-label-start TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
+                    data-column="date"
+                    id="column-date"
+                    scope="col"
                     style={
                       Object {
-                        "willChange": "transform",
+                        "width": undefined,
                       }
                     }
-                    viewBox="0 0 32 32"
-                    width={20}
-                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <path
-                      d="M18 28h-4a2 2 0 0 1-2-2v-7.59L4.59 11A2 2 0 0 1 4 9.59V6a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v3.59a2 2 0 0 1-.59 1.41L20 18.41V26a2 2 0 0 1-2 2zM6 6v3.59l8 8V26h4v-8.41l8-8V6z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </section>
-            <div
-              className="addons-iot-table-container"
-            >
-              <table
-                className="bx--data-table bx--data-table--no-border"
-                title={null}
-              >
-                <thead
-                  onMouseMove={[Function]}
-                  onMouseUp={[Function]}
-                >
-                  <tr>
-                    <th
-                      className="iot--table-header-checkbox"
-                      scope="col"
-                      style={Object {}}
+                    <span
+                      className="bx--table-header-label"
                     >
                       <span
-                        className="bx--table-header-label"
+                        title="Date"
                       >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            id="select-all"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-all"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select all items
-                            </span>
-                          </label>
-                        </div>
+                        Date
                       </span>
-                    </th>
-                    <th
-                      aria-sort="none"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
-                        }
+                    </span>
+                  </th>
+                  <th
+                    aria-sort="none"
+                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
+                    scope="col"
+                    style={
+                      Object {
+                        "width": undefined,
                       }
+                    }
+                  >
+                    <button
+                      align="start"
+                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
+                      data-column="select"
+                      id="column-select"
+                      onClick={[Function]}
                     >
-                      <button
-                        align="start"
-                        className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                        data-column="string"
-                        id="column-string"
-                        onClick={[Function]}
+                      <span
+                        className="bx--table-header-label"
                       >
                         <span
-                          className="bx--table-header-label"
+                          title="Select"
                         >
-                          <span
-                            title="String"
-                          >
-                            String
-                          </span>
+                          Select
                         </span>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                      </span>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                          />
-                        </svg>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon-unsorted"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                        }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
+                        />
+                      </svg>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon-unsorted"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </th>
-                    <th
-                      align="start"
-                      className="table-header-label-start TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                      data-column="date"
-                      id="column-date"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
                         }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
+                        />
+                      </svg>
+                    </button>
+                  </th>
+                  <th
+                    aria-sort="none"
+                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
+                    scope="col"
+                    style={
+                      Object {
+                        "width": undefined,
                       }
+                    }
+                  >
+                    <button
+                      align="start"
+                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
+                      data-column="secretField"
+                      id="column-secretField"
+                      onClick={[Function]}
                     >
                       <span
                         className="bx--table-header-label"
                       >
                         <span
-                          title="Date"
+                          title="Secret Information"
                         >
-                          Date
+                          Secret Information
                         </span>
                       </span>
-                    </th>
-                    <th
-                      aria-sort="none"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
+                          }
                         }
-                      }
-                    >
-                      <button
-                        align="start"
-                        className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                        data-column="select"
-                        id="column-select"
-                        onClick={[Function]}
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <span
-                          className="bx--table-header-label"
-                        >
-                          <span
-                            title="Select"
-                          >
-                            Select
-                          </span>
-                        </span>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
-                          }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                          />
-                        </svg>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon-unsorted"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                        <path
+                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
+                        />
+                      </svg>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon-unsorted"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </th>
-                    <th
-                      aria-sort="none"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
                         }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
+                        />
+                      </svg>
+                    </button>
+                  </th>
+                  <th
+                    aria-sort="none"
+                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
+                    scope="col"
+                    style={
+                      Object {
+                        "width": undefined,
                       }
+                    }
+                  >
+                    <button
+                      align="start"
+                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
+                      data-column="status"
+                      id="column-status"
+                      onClick={[Function]}
                     >
-                      <button
-                        align="start"
-                        className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                        data-column="secretField"
-                        id="column-secretField"
-                        onClick={[Function]}
+                      <span
+                        className="bx--table-header-label"
                       >
                         <span
-                          className="bx--table-header-label"
+                          title="Status"
                         >
-                          <span
-                            title="Secret Information"
-                          >
-                            Secret Information
-                          </span>
+                          Status
                         </span>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                      </span>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                          />
-                        </svg>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon-unsorted"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                        }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
+                        />
+                      </svg>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon-unsorted"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </th>
-                    <th
-                      aria-sort="none"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
                         }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
+                        />
+                      </svg>
+                    </button>
+                  </th>
+                  <th
+                    aria-sort="none"
+                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
+                    scope="col"
+                    style={
+                      Object {
+                        "width": undefined,
                       }
+                    }
+                  >
+                    <button
+                      align="start"
+                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
+                      data-column="number"
+                      id="column-number"
+                      onClick={[Function]}
                     >
-                      <button
-                        align="start"
-                        className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                        data-column="status"
-                        id="column-status"
-                        onClick={[Function]}
+                      <span
+                        className="bx--table-header-label"
                       >
                         <span
-                          className="bx--table-header-label"
+                          title="Number"
                         >
-                          <span
-                            title="Status"
-                          >
-                            Status
-                          </span>
+                          Number
                         </span>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                      </span>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                          />
-                        </svg>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon-unsorted"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                        }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
+                        />
+                      </svg>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon-unsorted"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </th>
-                    <th
-                      aria-sort="none"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
                         }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
+                        />
+                      </svg>
+                    </button>
+                  </th>
+                  <th
+                    aria-sort="none"
+                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
+                    scope="col"
+                    style={
+                      Object {
+                        "width": undefined,
                       }
+                    }
+                  >
+                    <button
+                      align="start"
+                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
+                      data-column="boolean"
+                      id="column-boolean"
+                      onClick={[Function]}
                     >
-                      <button
-                        align="start"
-                        className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                        data-column="number"
-                        id="column-number"
-                        onClick={[Function]}
+                      <span
+                        className="bx--table-header-label"
                       >
                         <span
-                          className="bx--table-header-label"
+                          title="Boolean"
                         >
-                          <span
-                            title="Number"
-                          >
-                            Number
-                          </span>
+                          Boolean
                         </span>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                      </span>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                          />
-                        </svg>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon-unsorted"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
+                        }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
+                        />
+                      </svg>
+                      <svg
+                        aria-label="Sort rows by this header in ascending order"
+                        className="bx--table-sort__icon-unsorted"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        role="img"
+                        style={
+                          Object {
+                            "willChange": "transform",
                           }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </th>
-                    <th
-                      aria-sort="none"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                      scope="col"
-                      style={
-                        Object {
-                          "width": undefined,
                         }
-                      }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
+                        />
+                      </svg>
+                    </button>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
+                aria-live="polite"
+              >
+                <tr
+                  className="TableBodyRow__StyledTableRow-sc-103itxu-0 isjrOb"
+                  onClick={[Function]}
+                >
+                  <td
+                    className="bx--checkbox-table-cell"
+                    onChange={null}
+                    onClick={[Function]}
+                  >
+                    <span
+                      className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
                     >
-                      <button
-                        align="start"
-                        className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                        data-column="boolean"
-                        id="column-boolean"
-                        onClick={[Function]}
+                      <div
+                        className="bx--form-item bx--checkbox-wrapper"
                       >
-                        <span
-                          className="bx--table-header-label"
+                        <input
+                          checked={false}
+                          className="bx--checkbox"
+                          disabled={true}
+                          id="select-row-Table-row-0"
+                          onChange={[Function]}
+                          type="checkbox"
+                        />
+                        <label
+                          className="bx--checkbox-label"
+                          htmlFor="select-row-Table-row-0"
+                          title={null}
                         >
                           <span
-                            title="Boolean"
+                            className="bx--checkbox-label-text bx--visually-hidden"
                           >
-                            Boolean
-                          </span>
-                        </span>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
-                          }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                          />
-                        </svg>
-                        <svg
-                          aria-label="Sort rows by this header in ascending order"
-                          className="bx--table-sort__icon-unsorted"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
-                          }
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                          />
-                        </svg>
-                      </button>
-                    </th>
-                    <th
-                      className=""
-                      scope="col"
-                      style={Object {}}
-                    >
-                      <span
-                        className="bx--table-header-label"
-                      >
-                         
-                      </span>
-                    </th>
-                  </tr>
-                </thead>
-                <tbody
-                  aria-live="polite"
-                >
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-0"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-0"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-0-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="toyota toyota toyota 0"
-                        >
-                          toyota toyota toyota 0
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-0-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1973-03-03T09:46:40.000Z"
-                        >
-                          1973-03-03T09:46:40.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-0-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-A"
-                        >
-                          option-A
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-0-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="AAAAAAAAAA"
-                        >
-                          AAAAAAAAAA
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-0-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="green"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-0-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={0}
-                        >
-                          0
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-0-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="true"
-                        >
-                          true
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-0-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-1"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-1"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-1-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="helping whiteboard as 1"
-                        >
-                          helping whiteboard as 1
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-1-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1973-03-14T23:33:20.000Z"
-                        >
-                          1973-03-14T23:33:20.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-1-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-B"
-                        >
-                          option-B
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-1-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="OewGc0QsMs"
-                        >
-                          OewGc0QsMs
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-1-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="gray"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-1-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={1}
-                        >
-                          1
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-1-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="false"
-                        >
-                          false
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          className="bx--btn bx--btn--ghost"
-                          disabled={false}
-                          onClick={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          Drill in
-                          <svg
-                            aria-hidden="true"
-                            aria-label="More actions"
-                            className="bx--btn__icon"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11.8 2.8l-1 1 5.4 5.5H1v1.4h15.2l-5.4 5.5 1 1L19 10z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-1-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-2"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-2"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-2-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="whiteboard can eat 2"
-                        >
-                          whiteboard can eat 2
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-2-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1973-04-18T16:53:20.000Z"
-                        >
-                          1973-04-18T16:53:20.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-2-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-C"
-                        >
-                          option-C
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-2-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="c8iM4qgaYa"
-                        >
-                          c8iM4qgaYa
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-2-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="red"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-2-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={4}
-                        >
-                          4
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-2-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="true"
-                        >
-                          true
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          className="bx--btn bx--btn--ghost"
-                          disabled={false}
-                          onClick={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          Drill in
-                          <svg
-                            aria-hidden="true"
-                            aria-label="More actions"
-                            className="bx--btn__icon"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11.8 2.8l-1 1 5.4 5.5H1v1.4h15.2l-5.4 5.5 1 1L19 10z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-2-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-3"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-3"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-3-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="as eat scott 3"
-                        >
-                          as eat scott 3
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-3-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1973-06-15T13:46:40.000Z"
-                        >
-                          1973-06-15T13:46:40.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-3-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-A"
-                        >
-                          option-A
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-3-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="qcUSWgwIkI"
-                        >
-                          qcUSWgwIkI
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-3-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="green"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-3-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={9}
-                        >
-                          9
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-3-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="false"
-                        >
-                          false
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          className="bx--btn bx--btn--ghost"
-                          disabled={false}
-                          onClick={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          Drill in
-                          <svg
-                            aria-hidden="true"
-                            aria-label="More actions"
-                            className="bx--btn__icon"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11.8 2.8l-1 1 5.4 5.5H1v1.4h15.2l-5.4 5.5 1 1L19 10z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-3-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-4"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-4"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-4-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="can pinocchio whiteboard 4"
-                        >
-                          can pinocchio whiteboard 4
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-4-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1973-09-04T14:13:20.000Z"
-                        >
-                          1973-09-04T14:13:20.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-4-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-B"
-                        >
-                          option-B
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-4-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="46GYyWC0w0"
-                        >
-                          46GYyWC0w0
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-4-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="gray"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-4-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={16}
-                        >
-                          16
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-4-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="true"
-                        >
-                          true
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-4-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-5"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-5"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-5-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="bottle toyota bottle 5"
-                        >
-                          bottle toyota bottle 5
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-5-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1973-12-17T18:13:20.000Z"
-                        >
-                          1973-12-17T18:13:20.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-5-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-C"
-                        >
-                          option-C
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-5-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="Ia2eQMSi8i"
-                        >
-                          Ia2eQMSi8i
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-5-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="red"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-5-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={25}
-                        >
-                          25
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-5-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="false"
-                        >
-                          false
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          className="bx--btn bx--btn--ghost"
-                          disabled={false}
-                          onClick={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          Drill in
-                          <svg
-                            aria-hidden="true"
-                            aria-label="More actions"
-                            className="bx--btn__icon"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11.8 2.8l-1 1 5.4 5.5H1v1.4h15.2l-5.4 5.5 1 1L19 10z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-5-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-6"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-6"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-6-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="eat whiteboard pinocchio 6"
-                        >
-                          eat whiteboard pinocchio 6
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-6-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1974-04-24T01:46:40.000Z"
-                        >
-                          1974-04-24T01:46:40.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-6-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-A"
-                        >
-                          option-A
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-6-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="W4oksCiQKQ"
-                        >
-                          W4oksCiQKQ
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-6-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="green"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-6-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={36}
-                        >
-                          36
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-6-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="true"
-                        >
-                          true
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          className="bx--btn bx--btn--ghost"
-                          disabled={false}
-                          onClick={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          Drill in
-                          <svg
-                            aria-hidden="true"
-                            aria-label="More actions"
-                            className="bx--btn__icon"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11.8 2.8l-1 1 5.4 5.5H1v1.4h15.2l-5.4 5.5 1 1L19 10z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-6-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-7"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-7"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-7-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="chocolate can helping 7"
-                        >
-                          chocolate can helping 7
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-7-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1974-09-21T12:53:20.000Z"
-                        >
-                          1974-09-21T12:53:20.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-7-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-B"
-                        >
-                          option-B
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-7-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="kYaqK2y8W8"
-                        >
-                          kYaqK2y8W8
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-7-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="gray"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-7-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={49}
-                        >
-                          49
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-7-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="false"
-                        >
-                          false
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          className="bx--btn bx--btn--ghost"
-                          disabled={false}
-                          onClick={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          Drill in
-                          <svg
-                            aria-hidden="true"
-                            aria-label="More actions"
-                            className="bx--btn__icon"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11.8 2.8l-1 1 5.4 5.5H1v1.4h15.2l-5.4 5.5 1 1L19 10z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-7-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-8"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-8"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-8-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="pinocchio eat can 8"
-                        >
-                          pinocchio eat can 8
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-8-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1975-03-14T03:33:20.000Z"
-                        >
-                          1975-03-14T03:33:20.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-8-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-C"
-                        >
-                          option-C
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-8-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="y2MwmsEqiq"
-                        >
-                          y2MwmsEqiq
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-8-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="red"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-8-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={64}
-                        >
-                          64
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-8-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="true"
-                        >
-                          true
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-8-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    className="TableBodyRow__StyledTableRow-sc-103itxu-0 hdodpz"
-                    onClick={[Function]}
-                  >
-                    <td
-                      className="bx--checkbox-table-cell"
-                      onChange={[Function]}
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <div
-                          className="bx--form-item bx--checkbox-wrapper"
-                        >
-                          <input
-                            checked={false}
-                            className="bx--checkbox"
-                            disabled={false}
-                            id="select-row-Table-row-9"
-                            onChange={[Function]}
-                            type="checkbox"
-                          />
-                          <label
-                            className="bx--checkbox-label"
-                            htmlFor="select-row-Table-row-9"
-                            title={null}
-                          >
-                            <span
-                              className="bx--checkbox-label-text bx--visually-hidden"
-                            >
-                              Select row
-                            </span>
-                          </label>
-                        </div>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="string"
-                      data-offset={0}
-                      id="cell-Table-row-9-string"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="scott pinocchio chocolate 9"
-                        >
-                          scott pinocchio chocolate 9
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="date"
-                      data-offset={0}
-                      id="cell-Table-row-9-date"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="1975-09-26T21:46:40.000Z"
-                        >
-                          1975-09-26T21:46:40.000Z
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="select"
-                      data-offset={0}
-                      id="cell-Table-row-9-select"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="option-A"
-                        >
-                          option-A
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="secretField"
-                      data-offset={0}
-                      id="cell-Table-row-9-secretField"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="CW82EiUYuY"
-                        >
-                          CW82EiUYuY
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="status"
-                      data-offset={0}
-                      id="cell-Table-row-9-status"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <svg
-                          height="10"
-                          width="10"
-                        >
-                          <circle
-                            cx="5"
-                            cy="5"
-                            fill="green"
-                            r="3"
-                            stroke="none"
-                            strokeWidth="1"
-                          />
-                        </svg>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="number"
-                      data-offset={0}
-                      id="cell-Table-row-9-number"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title={81}
-                        >
-                          81
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      align="start"
-                      className="data-table-start TableBodyRow__StyledTableCellRow-sc-103itxu-5 jsPLxS"
-                      data-column="boolean"
-                      data-offset={0}
-                      id="cell-Table-row-9-boolean"
-                      offset={0}
-                    >
-                      <span
-                        className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                      >
-                        <span
-                          title="false"
-                        >
-                          false
-                        </span>
-                      </span>
-                    </td>
-                    <td
-                      className="RowActionsCell__StyledTableCell-sc-1toqqj7-0 bGkBkT"
-                    >
-                      <div
-                        className="RowActionsCell__RowActionsContainer-sc-1toqqj7-1 hHPyiu"
-                      >
-                        <button
-                          className="bx--btn bx--btn--ghost"
-                          disabled={false}
-                          onClick={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          Drill in
-                          <svg
-                            aria-hidden="true"
-                            aria-label="More actions"
-                            className="bx--btn__icon"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M11.8 2.8l-1 1 5.4 5.5H1v1.4h15.2l-5.4 5.5 1 1L19 10z"
-                            />
-                          </svg>
-                        </button>
-                        <button
-                          aria-expanded={false}
-                          aria-haspopup={true}
-                          aria-label="More actions"
-                          className="RowActionsCell__StyledOverflowMenu-sc-1toqqj7-4 eSvzkA bx--overflow-menu"
-                          id="Table-row-9-row-actions-cell-overflow"
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          tabIndex={0}
-                        >
-                          <svg
-                            aria-label="More actions"
-                            className="bx--overflow-menu__icon"
-                            focusable="false"
-                            height={16}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            style={
-                              Object {
-                                "willChange": "transform",
-                              }
-                            }
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <circle
-                              cx="8"
-                              cy="3"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="8"
-                              r="1"
-                            />
-                            <circle
-                              cx="8"
-                              cy="13"
-                              r="1"
-                            />
-                            <title>
-                              More actions
-                            </title>
-                          </svg>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div
-              className="bx--pagination Table__StyledPagination-sc-1kalfns-1 TTTFd"
-              disabled={false}
-              size={
-                Object {
-                  "height": undefined,
-                  "position": undefined,
-                  "width": undefined,
-                }
-              }
-            >
-              <div
-                className="bx--pagination__left"
-              >
-                <label
-                  className="bx--pagination__text"
-                  htmlFor="bx-pagination-select-2"
-                  id="bx-pagination-select-2-count-label"
-                >
-                  Items per page:
-                </label>
-                <div
-                  className="bx--form-item"
-                >
-                  <div
-                    className="bx--select bx--select--inline bx--select__item-count"
-                  >
-                    <div
-                      className="bx--select-input--inline__wrapper"
-                    >
-                      <div
-                        className="bx--select-input__wrapper"
-                        data-invalid={null}
-                      >
-                        <select
-                          className="bx--select-input"
-                          id="bx-pagination-select-2"
-                          onChange={[Function]}
-                          value={10}
-                        >
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={10}
-                          >
-                            10
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={20}
-                          >
-                            20
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={30}
-                          >
-                            30
-                          </option>
-                        </select>
-                        <svg
-                          aria-hidden={true}
-                          className="bx--select__arrow"
-                          focusable="false"
-                          height={16}
-                          preserveAspectRatio="xMidYMid meet"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
-                          }
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <span
-                  className="bx--pagination__text"
-                >
-                  1–10 of 100 items
-                </span>
-              </div>
-              <div
-                className="bx--pagination__right"
-              >
-                <div
-                  className="bx--form-item"
-                >
-                  <div
-                    className="bx--select bx--select--inline bx--select__page-number"
-                  >
-                    <label
-                      className="bx--label bx--visually-hidden"
-                      htmlFor="bx-pagination-select-4"
-                    >
-                      Page number, of 10 pages
-                    </label>
-                    <div
-                      className="bx--select-input--inline__wrapper"
-                    >
-                      <div
-                        className="bx--select-input__wrapper"
-                        data-invalid={null}
-                      >
-                        <select
-                          className="bx--select-input"
-                          id="bx-pagination-select-4"
-                          onChange={[Function]}
-                          value={1}
-                        >
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={1}
-                          >
-                            1
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={2}
-                          >
-                            2
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={3}
-                          >
-                            3
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={4}
-                          >
-                            4
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={5}
-                          >
-                            5
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={6}
-                          >
-                            6
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={7}
-                          >
-                            7
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={8}
-                          >
-                            8
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={9}
-                          >
-                            9
-                          </option>
-                          <option
-                            className="bx--select-option"
-                            disabled={false}
-                            hidden={false}
-                            value={10}
-                          >
-                            10
-                          </option>
-                        </select>
-                        <svg
-                          aria-hidden={true}
-                          className="bx--select__arrow"
-                          focusable="false"
-                          height={16}
-                          preserveAspectRatio="xMidYMid meet"
-                          style={
-                            Object {
-                              "willChange": "transform",
-                            }
-                          }
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <span
-                  className="bx--pagination__text"
-                >
-                  1 of 10 pages
-                </span>
-                <button
-                  aria-label="Previous page"
-                  className="bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"
-                  disabled={true}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    focusable="false"
-                    height={24}
-                    preserveAspectRatio="xMidYMid meet"
-                    style={
-                      Object {
-                        "willChange": "transform",
-                      }
-                    }
-                    viewBox="0 0 32 32"
-                    width={24}
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M19 23L11 16 19 9 19 23z"
-                    />
-                  </svg>
-                </button>
-                <button
-                  aria-label="Next page"
-                  className="bx--pagination__button bx--pagination__button--forward"
-                  disabled={false}
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <svg
-                    aria-hidden={true}
-                    focusable="false"
-                    height={24}
-                    preserveAspectRatio="xMidYMid meet"
-                    style={
-                      Object {
-                        "willChange": "transform",
-                      }
-                    }
-                    viewBox="0 0 32 32"
-                    width={24}
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M13 9L21 16 13 23 13 9z"
-                    />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <button
-        className="info__show-button"
-        onClick={[Function]}
-        style={
-          Object {
-            "background": "#027ac5",
-            "border": "none",
-            "borderRadius": "0 0 0 5px",
-            "color": "#fff",
-            "cursor": "pointer",
-            "display": "block",
-            "fontFamily": "sans-serif",
-            "fontSize": "12px",
-            "padding": "5px 15px",
-            "position": "fixed",
-            "right": 0,
-            "top": 0,
-          }
-        }
-        type="button"
-      >
-        Show Info
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table Stateful Example with every third row unselectable 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "bottom": "0",
-      "display": "flex",
-      "left": "0",
-      "overflow": "auto",
-      "position": "fixed",
-      "right": "0",
-      "top": "0",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "margin": "auto",
-        "maxHeight": "100%",
-      }
-    }
-  >
-    <div
-      className="storybook-container"
-      style={
-        Object {
-          "padding": "3rem",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "position": "relative",
-            "zIndex": 0,
-          }
-        }
-      >
-        <div
-          className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
-        >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
-          <div
-            className="addons-iot-table-container"
-          >
-            <table
-              className="bx--data-table bx--data-table--no-border"
-              title={null}
-            >
-              <thead
-                onMouseMove={[Function]}
-                onMouseUp={[Function]}
-              >
-                <tr>
-                  <th
-                    className="iot--table-header-checkbox"
-                    scope="col"
-                    style={Object {}}
-                  >
-                    <span
-                      className="bx--table-header-label"
-                    >
-                      <div
-                        className="bx--form-item bx--checkbox-wrapper"
-                      >
-                        <input
-                          checked={false}
-                          className="bx--checkbox"
-                          id="select-all"
-                          onChange={[Function]}
-                          type="checkbox"
-                        />
-                        <label
-                          className="bx--checkbox-label"
-                          htmlFor="select-all"
-                          title={null}
-                        >
-                          <span
-                            className="bx--checkbox-label-text bx--visually-hidden"
-                          >
-                            Select all items
-                          </span>
-                        </label>
-                      </div>
-                    </span>
-                  </th>
-                  <th
-                    aria-sort="none"
-                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                    scope="col"
-                    style={
-                      Object {
-                        "width": undefined,
-                      }
-                    }
-                  >
-                    <button
-                      align="start"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                      data-column="string"
-                      id="column-string"
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="bx--table-header-label"
-                      >
-                        <span
-                          title="String"
-                        >
-                          String
-                        </span>
-                      </span>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                        />
-                      </svg>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon-unsorted"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </th>
-                  <th
-                    align="start"
-                    className="table-header-label-start TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                    data-column="date"
-                    id="column-date"
-                    scope="col"
-                    style={
-                      Object {
-                        "width": undefined,
-                      }
-                    }
-                  >
-                    <span
-                      className="bx--table-header-label"
-                    >
-                      <span
-                        title="Date"
-                      >
-                        Date
-                      </span>
-                    </span>
-                  </th>
-                  <th
-                    aria-sort="none"
-                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                    scope="col"
-                    style={
-                      Object {
-                        "width": undefined,
-                      }
-                    }
-                  >
-                    <button
-                      align="start"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                      data-column="select"
-                      id="column-select"
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="bx--table-header-label"
-                      >
-                        <span
-                          title="Select"
-                        >
-                          Select
-                        </span>
-                      </span>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                        />
-                      </svg>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon-unsorted"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </th>
-                  <th
-                    aria-sort="none"
-                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                    scope="col"
-                    style={
-                      Object {
-                        "width": undefined,
-                      }
-                    }
-                  >
-                    <button
-                      align="start"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                      data-column="secretField"
-                      id="column-secretField"
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="bx--table-header-label"
-                      >
-                        <span
-                          title="Secret Information"
-                        >
-                          Secret Information
-                        </span>
-                      </span>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                        />
-                      </svg>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon-unsorted"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </th>
-                  <th
-                    aria-sort="none"
-                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                    scope="col"
-                    style={
-                      Object {
-                        "width": undefined,
-                      }
-                    }
-                  >
-                    <button
-                      align="start"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                      data-column="status"
-                      id="column-status"
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="bx--table-header-label"
-                      >
-                        <span
-                          title="Status"
-                        >
-                          Status
-                        </span>
-                      </span>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                        />
-                      </svg>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon-unsorted"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </th>
-                  <th
-                    aria-sort="none"
-                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                    scope="col"
-                    style={
-                      Object {
-                        "width": undefined,
-                      }
-                    }
-                  >
-                    <button
-                      align="start"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                      data-column="number"
-                      id="column-number"
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="bx--table-header-label"
-                      >
-                        <span
-                          title="Number"
-                        >
-                          Number
-                        </span>
-                      </span>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                        />
-                      </svg>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon-unsorted"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </th>
-                  <th
-                    aria-sort="none"
-                    className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz"
-                    scope="col"
-                    style={
-                      Object {
-                        "width": undefined,
-                      }
-                    }
-                  >
-                    <button
-                      align="start"
-                      className="table-header-label-start table-header-sortable TableHead__StyledCustomTableHeader-sc-1fviaow-0 dYYJkz bx--table-sort"
-                      data-column="boolean"
-                      id="column-boolean"
-                      onClick={[Function]}
-                    >
-                      <span
-                        className="bx--table-header-label"
-                      >
-                        <span
-                          title="Boolean"
-                        >
-                          Boolean
-                        </span>
-                      </span>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16 4L6 14l1.41 1.41L15 7.83V30h2V7.83l7.59 7.58L26 14 16 4z"
-                        />
-                      </svg>
-                      <svg
-                        aria-label="Sort rows by this header in ascending order"
-                        className="bx--table-sort__icon-unsorted"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        style={
-                          Object {
-                            "willChange": "transform",
-                          }
-                        }
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M26.59 20.59L23 24.17V4h-2v20.17l-3.59-3.58L16 22l6 6 6-6-1.41-1.41zM10 4l-6 6 1.41 1.41L9 7.83V28h2V7.83l3.59 3.58L16 10l-6-6z"
-                        />
-                      </svg>
-                    </button>
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                aria-live="polite"
-              >
-                <tr
-                  className="TableBodyRow__StyledTableRow-sc-103itxu-0 isjrOb"
-                  onClick={[Function]}
-                >
-                  <td
-                    className="bx--checkbox-table-cell"
-                    onChange={null}
-                    onClick={[Function]}
-                  >
-                    <span
-                      className="TableBodyRow__StyledNestedSpan-sc-103itxu-6 NDiCc"
-                    >
-                      <div
-                        className="bx--form-item bx--checkbox-wrapper"
-                      >
-                        <input
-                          checked={false}
-                          className="bx--checkbox"
-                          disabled={true}
-                          id="select-row-Table-row-0"
-                          onChange={[Function]}
-                          type="checkbox"
-                        />
-                        <label
-                          className="bx--checkbox-label"
-                          htmlFor="select-row-Table-row-0"
-                          title={null}
-                        >
-                          <span
-                            className="bx--checkbox-label-text bx--visually-hidden"
-                          >
-                            Select row
+                            Select row
                           </span>
                         </label>
                       </div>
@@ -80233,6 +76700,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   </p>
                 </div>
               </div>
+              <label
+                className="iot--table-toolbar-secondary-title"
+              >
+                Row count: 100
+              </label>
               <div
                 className="bx--toolbar-content iot--table-toolbar-content"
               >
@@ -83868,8 +80340,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
               >
                 <label
                   className="bx--pagination__text"
-                  htmlFor="bx-pagination-select-3"
-                  id="bx-pagination-select-3-count-label"
+                  htmlFor="bx-pagination-select-2"
+                  id="bx-pagination-select-2-count-label"
                 >
                   Items per page:
                 </label>
@@ -83888,7 +80360,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <select
                           className="bx--select-input"
-                          id="bx-pagination-select-3"
+                          id="bx-pagination-select-2"
                           onChange={[Function]}
                           value={10}
                         >
@@ -83957,7 +80429,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--label bx--visually-hidden"
-                      htmlFor="bx-pagination-select-5"
+                      htmlFor="bx-pagination-select-4"
                     >
                       Page number, of 2 pages
                     </label>
@@ -83970,7 +80442,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <select
                           className="bx--select-input"
-                          id="bx-pagination-select-5"
+                          id="bx-pagination-select-4"
                           onChange={[Function]}
                           value={1}
                         >
@@ -84179,6 +80651,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   </p>
                 </div>
               </div>
+              <label
+                className="iot--table-toolbar-secondary-title"
+              >
+                Row count: 100
+              </label>
               <div
                 className="bx--toolbar-content iot--table-toolbar-content"
               >
@@ -87225,8 +83702,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
               >
                 <label
                   className="bx--pagination__text"
-                  htmlFor="bx-pagination-select-4"
-                  id="bx-pagination-select-4-count-label"
+                  htmlFor="bx-pagination-select-3"
+                  id="bx-pagination-select-3-count-label"
                 >
                   Items per page:
                 </label>
@@ -87245,7 +83722,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <select
                           className="bx--select-input"
-                          id="bx-pagination-select-4"
+                          id="bx-pagination-select-3"
                           onChange={[Function]}
                           value={10}
                         >
@@ -87314,7 +83791,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--label bx--visually-hidden"
-                      htmlFor="bx-pagination-select-6"
+                      htmlFor="bx-pagination-select-5"
                     >
                       Page number, of 10 pages
                     </label>
@@ -87327,7 +83804,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <select
                           className="bx--select-input"
-                          id="bx-pagination-select-6"
+                          id="bx-pagination-select-5"
                           onChange={[Function]}
                           value={1}
                         >
@@ -87567,42 +84044,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -104215,8 +100656,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
               >
                 <label
                   className="bx--pagination__text"
-                  htmlFor="bx-pagination-select-15"
-                  id="bx-pagination-select-15-count-label"
+                  htmlFor="bx-pagination-select-14"
+                  id="bx-pagination-select-14-count-label"
                 >
                   Items per page:
                 </label>
@@ -104235,7 +100676,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <select
                           className="bx--select-input"
-                          id="bx-pagination-select-15"
+                          id="bx-pagination-select-14"
                           onChange={[Function]}
                           value={10}
                         >
@@ -104304,7 +100745,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--label bx--visually-hidden"
-                      htmlFor="bx-pagination-select-17"
+                      htmlFor="bx-pagination-select-16"
                     >
                       Page number, of 10 pages
                     </label>
@@ -104317,7 +100758,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <select
                           className="bx--select-input"
-                          id="bx-pagination-select-17"
+                          id="bx-pagination-select-16"
                           onChange={[Function]}
                           value={1}
                         >
@@ -107016,8 +103457,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-16"
-                id="bx-pagination-select-16-count-label"
+                htmlFor="bx-pagination-select-15"
+                id="bx-pagination-select-15-count-label"
               >
                 Items per page:
               </label>
@@ -107036,7 +103477,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-16"
+                        id="bx-pagination-select-15"
                         onChange={[Function]}
                         value={10}
                       >
@@ -107105,7 +103546,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-18"
+                    htmlFor="bx-pagination-select-17"
                   >
                     Page number, of 10 pages
                   </label>
@@ -107118,7 +103559,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-18"
+                        id="bx-pagination-select-17"
                         onChange={[Function]}
                         value={1}
                       >
@@ -107394,6 +103835,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 </p>
               </div>
             </div>
+            <label
+              className="iot--table-toolbar-secondary-title"
+            >
+              Row count: 100
+            </label>
             <div
               className="bx--toolbar-content iot--table-toolbar-content"
             >
@@ -107963,8 +104409,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-5"
-                id="bx-pagination-select-5-count-label"
+                htmlFor="bx-pagination-select-4"
+                id="bx-pagination-select-4-count-label"
               >
                 Items per page:
               </label>
@@ -107983,7 +104429,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-5"
+                        id="bx-pagination-select-4"
                         onChange={[Function]}
                         value={10}
                       >
@@ -108052,7 +104498,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-7"
+                    htmlFor="bx-pagination-select-6"
                   >
                     Page number, of 10 pages
                   </label>
@@ -108065,7 +104511,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-7"
+                        id="bx-pagination-select-6"
                         onChange={[Function]}
                         value={1}
                       >
@@ -110376,8 +106822,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-11"
-                id="bx-pagination-select-11-count-label"
+                htmlFor="bx-pagination-select-10"
+                id="bx-pagination-select-10-count-label"
               >
                 Items per page:
               </label>
@@ -110396,7 +106842,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-11"
+                        id="bx-pagination-select-10"
                         onChange={[Function]}
                         value={10}
                       >
@@ -110465,7 +106911,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-13"
+                    htmlFor="bx-pagination-select-12"
                   >
                     Page number, of 10 pages
                   </label>
@@ -110478,7 +106924,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-13"
+                        id="bx-pagination-select-12"
                         onChange={[Function]}
                         value={1}
                       >
@@ -112662,8 +109108,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-9"
-                id="bx-pagination-select-9-count-label"
+                htmlFor="bx-pagination-select-8"
+                id="bx-pagination-select-8-count-label"
               >
                 Items per page:
               </label>
@@ -112682,7 +109128,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-9"
+                        id="bx-pagination-select-8"
                         onChange={[Function]}
                         value={10}
                       >
@@ -112751,7 +109197,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-11"
+                    htmlFor="bx-pagination-select-10"
                   >
                     Page number, of 10 pages
                   </label>
@@ -112764,7 +109210,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-11"
+                        id="bx-pagination-select-10"
                         onChange={[Function]}
                         value={1}
                       >
@@ -113010,42 +109456,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
           <div
             className="Tablestory__StyledTableCustomRowHeight-ah27yk-0 iJsCip Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
           >
-            <section
-              aria-label="data table toolbar"
-              className="bx--table-toolbar"
-            >
-              <div
-                className="bx--batch-actions iot--table-batch-actions"
-              >
-                <div
-                  className="bx--action-list"
-                >
-                  <button
-                    className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </div>
-                <div
-                  className="bx--batch-summary"
-                >
-                  <p
-                    className="bx--batch-summary__para"
-                  >
-                    <span>
-                      0 item selected
-                    </span>
-                  </p>
-                </div>
-              </div>
-              <div
-                className="bx--toolbar-content iot--table-toolbar-content"
-              />
-            </section>
             <div
               className="addons-iot-table-container"
             >
@@ -129346,8 +125756,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-10"
-                id="bx-pagination-select-10-count-label"
+                htmlFor="bx-pagination-select-9"
+                id="bx-pagination-select-9-count-label"
               >
                 Items per page:
               </label>
@@ -129366,7 +125776,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-10"
+                        id="bx-pagination-select-9"
                         onChange={[Function]}
                         value={10}
                       >
@@ -129435,7 +125845,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-12"
+                    htmlFor="bx-pagination-select-11"
                   >
                     Page number, of 2 pages
                   </label>
@@ -129448,7 +125858,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-12"
+                        id="bx-pagination-select-11"
                         onChange={[Function]}
                         value={1}
                       >
@@ -143849,42 +140259,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -145465,8 +141839,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-14"
-                id="bx-pagination-select-14-count-label"
+                htmlFor="bx-pagination-select-13"
+                id="bx-pagination-select-13-count-label"
               >
                 Items per page:
               </label>
@@ -145485,7 +141859,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-14"
+                        id="bx-pagination-select-13"
                         onChange={[Function]}
                         value={10}
                       >
@@ -145554,7 +141928,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-16"
+                    htmlFor="bx-pagination-select-15"
                   >
                     Page number, of 9754 pages
                   </label>
@@ -145567,7 +141941,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-16"
+                        id="bx-pagination-select-15"
                         onChange={[Function]}
                         value={8267}
                       >
@@ -223758,42 +220132,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -225375,8 +221713,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-13"
-                id="bx-pagination-select-13-count-label"
+                htmlFor="bx-pagination-select-12"
+                id="bx-pagination-select-12-count-label"
               >
                 Items per page:
               </label>
@@ -225395,7 +221733,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-13"
+                        id="bx-pagination-select-12"
                         onChange={[Function]}
                         value={10}
                       >
@@ -225464,7 +221802,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-15"
+                    htmlFor="bx-pagination-select-14"
                   >
                     Page number, of 10 pages
                   </label>
@@ -225477,7 +221815,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-15"
+                        id="bx-pagination-select-14"
                         onChange={[Function]}
                         value={1}
                       >
@@ -225716,42 +222054,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -226165,6 +222467,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 </p>
               </div>
             </div>
+            <label
+              className="iot--table-toolbar-secondary-title"
+            >
+              Row count: 100
+            </label>
             <div
               className="bx--toolbar-content iot--table-toolbar-content"
             >
@@ -227938,8 +224245,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-6"
-                id="bx-pagination-select-6-count-label"
+                htmlFor="bx-pagination-select-5"
+                id="bx-pagination-select-5-count-label"
               >
                 Items per page:
               </label>
@@ -227958,7 +224265,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-6"
+                        id="bx-pagination-select-5"
                         onChange={[Function]}
                         value={10}
                       >
@@ -228027,7 +224334,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-8"
+                    htmlFor="bx-pagination-select-7"
                   >
                     Page number, of 10 pages
                   </label>
@@ -228040,7 +224347,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-8"
+                        id="bx-pagination-select-7"
                         onChange={[Function]}
                         value={1}
                       >
@@ -228279,42 +224586,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -232285,8 +228556,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-12"
-                id="bx-pagination-select-12-count-label"
+                htmlFor="bx-pagination-select-11"
+                id="bx-pagination-select-11-count-label"
               >
                 Items per page:
               </label>
@@ -232305,7 +228576,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-12"
+                        id="bx-pagination-select-11"
                         onChange={[Function]}
                         value={10}
                       >
@@ -232374,7 +228645,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-14"
+                    htmlFor="bx-pagination-select-13"
                   >
                     Page number, of 10 pages
                   </label>
@@ -232387,7 +228658,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-14"
+                        id="bx-pagination-select-13"
                         onChange={[Function]}
                         value={1}
                       >
@@ -232626,42 +228897,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -232929,42 +229164,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -233851,42 +230050,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -248106,42 +244269,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
           <div
             className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
           >
-            <section
-              aria-label="data table toolbar"
-              className="bx--table-toolbar"
-            >
-              <div
-                className="bx--batch-actions iot--table-batch-actions"
-              >
-                <div
-                  className="bx--action-list"
-                >
-                  <button
-                    className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </div>
-                <div
-                  className="bx--batch-summary"
-                >
-                  <p
-                    className="bx--batch-summary__para"
-                  >
-                    <span>
-                      0 item selected
-                    </span>
-                  </p>
-                </div>
-              </div>
-              <div
-                className="bx--toolbar-content iot--table-toolbar-content"
-              />
-            </section>
             <div
               className="addons-iot-table-container"
             >
@@ -260522,42 +256649,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -278102,42 +274193,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -292367,42 +288422,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
           <div
             className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
           >
-            <section
-              aria-label="data table toolbar"
-              className="bx--table-toolbar"
-            >
-              <div
-                className="bx--batch-actions iot--table-batch-actions"
-              >
-                <div
-                  className="bx--action-list"
-                >
-                  <button
-                    className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                    disabled={false}
-                    onClick={[Function]}
-                    tabIndex={0}
-                    type="button"
-                  >
-                    Cancel
-                  </button>
-                </div>
-                <div
-                  className="bx--batch-summary"
-                >
-                  <p
-                    className="bx--batch-summary__para"
-                  >
-                    <span>
-                      0 item selected
-                    </span>
-                  </p>
-                </div>
-              </div>
-              <div
-                className="bx--toolbar-content iot--table-toolbar-content"
-              />
-            </section>
             <div
               className="addons-iot-table-container"
             >
@@ -306616,42 +302635,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -345085,42 +341068,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -375306,42 +371253,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    1 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -389488,42 +385399,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    1 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -392868,8 +388743,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-7"
-                id="bx-pagination-select-7-count-label"
+                htmlFor="bx-pagination-select-6"
+                id="bx-pagination-select-6-count-label"
               >
                 Items per page:
               </label>
@@ -392888,7 +388763,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-7"
+                        id="bx-pagination-select-6"
                         onChange={[Function]}
                         value={10}
                       >
@@ -392957,7 +388832,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-9"
+                    htmlFor="bx-pagination-select-8"
                   >
                     Page number, of 10 pages
                   </label>
@@ -392970,7 +388845,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-9"
+                        id="bx-pagination-select-8"
                         onChange={[Function]}
                         value={1}
                       >
@@ -393209,42 +389084,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
@@ -395215,8 +391054,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
             >
               <label
                 className="bx--pagination__text"
-                htmlFor="bx-pagination-select-8"
-                id="bx-pagination-select-8-count-label"
+                htmlFor="bx-pagination-select-7"
+                id="bx-pagination-select-7-count-label"
               >
                 Items per page:
               </label>
@@ -395235,7 +391074,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-8"
+                        id="bx-pagination-select-7"
                         onChange={[Function]}
                         value={10}
                       >
@@ -395304,7 +391143,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                 >
                   <label
                     className="bx--label bx--visually-hidden"
-                    htmlFor="bx-pagination-select-10"
+                    htmlFor="bx-pagination-select-9"
                   >
                     Page number, of 10 pages
                   </label>
@@ -395317,7 +391156,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                     >
                       <select
                         className="bx--select-input"
-                        id="bx-pagination-select-10"
+                        id="bx-pagination-select-9"
                         onChange={[Function]}
                         value={1}
                       >
@@ -395556,42 +391395,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
         <div
           className="Table__StyledTableContainer-sc-1kalfns-0 buETAI bx--data-table-container"
         >
-          <section
-            aria-label="data table toolbar"
-            className="bx--table-toolbar"
-          >
-            <div
-              className="bx--batch-actions iot--table-batch-actions"
-            >
-              <div
-                className="bx--action-list"
-              >
-                <button
-                  className="bx--batch-summary__cancel bx--btn bx--btn--primary"
-                  disabled={false}
-                  onClick={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  Cancel
-                </button>
-              </div>
-              <div
-                className="bx--batch-summary"
-              >
-                <p
-                  className="bx--batch-summary__para"
-                >
-                  <span>
-                    0 item selected
-                  </span>
-                </p>
-              </div>
-            </div>
-            <div
-              className="bx--toolbar-content iot--table-toolbar-content"
-            />
-          </section>
           <div
             className="addons-iot-table-container"
           >
diff --git a/src/components/TableCard/__snapshots__/TableCard.story.storyshot b/src/components/TableCard/__snapshots__/TableCard.story.storyshot
index 8bbdf285b0..85e0c89f3e 100644
--- a/src/components/TableCard/__snapshots__/TableCard.story.storyshot
+++ b/src/components/TableCard/__snapshots__/TableCard.story.storyshot
@@ -1171,8 +1171,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-29"
-                      id="bx-pagination-select-29-count-label"
+                      htmlFor="bx-pagination-select-28"
+                      id="bx-pagination-select-28-count-label"
                     >
                       Items per page:
                     </label>
@@ -1191,7 +1191,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-29"
+                              id="bx-pagination-select-28"
                               onChange={[Function]}
                               value={10}
                             >
@@ -1260,7 +1260,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-31"
+                          htmlFor="bx-pagination-select-30"
                         >
                           Page number, of 1 pages
                         </label>
@@ -1273,7 +1273,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-31"
+                              id="bx-pagination-select-30"
                               onChange={[Function]}
                               value={1}
                             >
@@ -2936,8 +2936,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-30"
-                      id="bx-pagination-select-30-count-label"
+                      htmlFor="bx-pagination-select-29"
+                      id="bx-pagination-select-29-count-label"
                     >
                       Items per page:
                     </label>
@@ -2956,7 +2956,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-30"
+                              id="bx-pagination-select-29"
                               onChange={[Function]}
                               value={10}
                             >
@@ -3025,7 +3025,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-32"
+                          htmlFor="bx-pagination-select-31"
                         >
                           Page number, of 1 pages
                         </label>
@@ -3038,7 +3038,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-32"
+                              id="bx-pagination-select-31"
                               onChange={[Function]}
                               value={1}
                             >
@@ -6021,8 +6021,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-32"
-                      id="bx-pagination-select-32-count-label"
+                      htmlFor="bx-pagination-select-31"
+                      id="bx-pagination-select-31-count-label"
                     >
                       Items per page:
                     </label>
@@ -6041,7 +6041,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-32"
+                              id="bx-pagination-select-31"
                               onChange={[Function]}
                               value={10}
                             >
@@ -6110,7 +6110,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-34"
+                          htmlFor="bx-pagination-select-33"
                         >
                           Page number, of 2 pages
                         </label>
@@ -6123,7 +6123,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-34"
+                              id="bx-pagination-select-33"
                               onChange={[Function]}
                               value={1}
                             >
@@ -7403,8 +7403,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-28"
-                      id="bx-pagination-select-28-count-label"
+                      htmlFor="bx-pagination-select-27"
+                      id="bx-pagination-select-27-count-label"
                     >
                       Items per page:
                     </label>
@@ -7423,7 +7423,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-28"
+                              id="bx-pagination-select-27"
                               onChange={[Function]}
                               value={10}
                             >
@@ -7492,7 +7492,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-30"
+                          htmlFor="bx-pagination-select-29"
                         >
                           Page number, of 2 pages
                         </label>
@@ -7505,7 +7505,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-30"
+                              id="bx-pagination-select-29"
                               onChange={[Function]}
                               value={1}
                             >
@@ -8785,8 +8785,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-18"
-                      id="bx-pagination-select-18-count-label"
+                      htmlFor="bx-pagination-select-17"
+                      id="bx-pagination-select-17-count-label"
                     >
                       Items per page:
                     </label>
@@ -8805,7 +8805,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-18"
+                              id="bx-pagination-select-17"
                               onChange={[Function]}
                               value={10}
                             >
@@ -8874,7 +8874,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-20"
+                          htmlFor="bx-pagination-select-19"
                         >
                           Page number, of 2 pages
                         </label>
@@ -8887,7 +8887,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-20"
+                              id="bx-pagination-select-19"
                               onChange={[Function]}
                               value={1}
                             >
@@ -10388,8 +10388,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-19"
-                      id="bx-pagination-select-19-count-label"
+                      htmlFor="bx-pagination-select-18"
+                      id="bx-pagination-select-18-count-label"
                     >
                       Items per page:
                     </label>
@@ -10408,7 +10408,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-19"
+                              id="bx-pagination-select-18"
                               onChange={[Function]}
                               value={10}
                             >
@@ -10477,7 +10477,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-21"
+                          htmlFor="bx-pagination-select-20"
                         >
                           Page number, of 2 pages
                         </label>
@@ -10490,7 +10490,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-21"
+                              id="bx-pagination-select-20"
                               onChange={[Function]}
                               value={1}
                             >
@@ -11991,8 +11991,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-25"
-                      id="bx-pagination-select-25-count-label"
+                      htmlFor="bx-pagination-select-24"
+                      id="bx-pagination-select-24-count-label"
                     >
                       Items per page:
                     </label>
@@ -12011,7 +12011,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-25"
+                              id="bx-pagination-select-24"
                               onChange={[Function]}
                               value={10}
                             >
@@ -12080,7 +12080,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-27"
+                          htmlFor="bx-pagination-select-26"
                         >
                           Page number, of 2 pages
                         </label>
@@ -12093,7 +12093,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-27"
+                              id="bx-pagination-select-26"
                               onChange={[Function]}
                               value={1}
                             >
@@ -13373,8 +13373,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-26"
-                      id="bx-pagination-select-26-count-label"
+                      htmlFor="bx-pagination-select-25"
+                      id="bx-pagination-select-25-count-label"
                     >
                       Items per page:
                     </label>
@@ -13393,7 +13393,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-26"
+                              id="bx-pagination-select-25"
                               onChange={[Function]}
                               value={10}
                             >
@@ -13462,7 +13462,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-28"
+                          htmlFor="bx-pagination-select-27"
                         >
                           Page number, of 2 pages
                         </label>
@@ -13475,7 +13475,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-28"
+                              id="bx-pagination-select-27"
                               onChange={[Function]}
                               value={1}
                             >
@@ -15348,8 +15348,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-20"
-                      id="bx-pagination-select-20-count-label"
+                      htmlFor="bx-pagination-select-19"
+                      id="bx-pagination-select-19-count-label"
                     >
                       Items per page:
                     </label>
@@ -15368,7 +15368,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-20"
+                              id="bx-pagination-select-19"
                               onChange={[Function]}
                               value={10}
                             >
@@ -15437,7 +15437,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-22"
+                          htmlFor="bx-pagination-select-21"
                         >
                           Page number, of 2 pages
                         </label>
@@ -15450,7 +15450,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-22"
+                              id="bx-pagination-select-21"
                               onChange={[Function]}
                               value={1}
                             >
@@ -17094,8 +17094,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-27"
-                      id="bx-pagination-select-27-count-label"
+                      htmlFor="bx-pagination-select-26"
+                      id="bx-pagination-select-26-count-label"
                     >
                       Items per page:
                     </label>
@@ -17114,7 +17114,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-27"
+                              id="bx-pagination-select-26"
                               onChange={[Function]}
                               value={10}
                             >
@@ -17183,7 +17183,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-29"
+                          htmlFor="bx-pagination-select-28"
                         >
                           Page number, of 2 pages
                         </label>
@@ -17196,7 +17196,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-29"
+                              id="bx-pagination-select-28"
                               onChange={[Function]}
                               value={1}
                             >
@@ -18799,8 +18799,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-21"
-                      id="bx-pagination-select-21-count-label"
+                      htmlFor="bx-pagination-select-20"
+                      id="bx-pagination-select-20-count-label"
                     >
                       Items per page:
                     </label>
@@ -18819,7 +18819,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-21"
+                              id="bx-pagination-select-20"
                               onChange={[Function]}
                               value={10}
                             >
@@ -18888,7 +18888,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-23"
+                          htmlFor="bx-pagination-select-22"
                         >
                           Page number, of 2 pages
                         </label>
@@ -18901,7 +18901,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-23"
+                              id="bx-pagination-select-22"
                               onChange={[Function]}
                               value={1}
                             >
@@ -21240,8 +21240,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-23"
-                      id="bx-pagination-select-23-count-label"
+                      htmlFor="bx-pagination-select-22"
+                      id="bx-pagination-select-22-count-label"
                     >
                       Items per page:
                     </label>
@@ -21260,7 +21260,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-23"
+                              id="bx-pagination-select-22"
                               onChange={[Function]}
                               value={10}
                             >
@@ -21329,7 +21329,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-25"
+                          htmlFor="bx-pagination-select-24"
                         >
                           Page number, of 2 pages
                         </label>
@@ -21342,7 +21342,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-25"
+                              id="bx-pagination-select-24"
                               onChange={[Function]}
                               value={1}
                             >
@@ -22643,8 +22643,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-24"
-                      id="bx-pagination-select-24-count-label"
+                      htmlFor="bx-pagination-select-23"
+                      id="bx-pagination-select-23-count-label"
                     >
                       Items per page:
                     </label>
@@ -22663,7 +22663,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-24"
+                              id="bx-pagination-select-23"
                               onChange={[Function]}
                               value={10}
                             >
@@ -22732,7 +22732,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-26"
+                          htmlFor="bx-pagination-select-25"
                         >
                           Page number, of 1 pages
                         </label>
@@ -22745,7 +22745,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-26"
+                              id="bx-pagination-select-25"
                               onChange={[Function]}
                               value={1}
                             >
@@ -25440,8 +25440,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-22"
-                      id="bx-pagination-select-22-count-label"
+                      htmlFor="bx-pagination-select-21"
+                      id="bx-pagination-select-21-count-label"
                     >
                       Items per page:
                     </label>
@@ -25460,7 +25460,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-22"
+                              id="bx-pagination-select-21"
                               onChange={[Function]}
                               value={10}
                             >
@@ -25529,7 +25529,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-24"
+                          htmlFor="bx-pagination-select-23"
                         >
                           Page number, of 2 pages
                         </label>
@@ -25542,7 +25542,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-24"
+                              id="bx-pagination-select-23"
                               onChange={[Function]}
                               value={1}
                             >
@@ -27786,8 +27786,8 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                   >
                     <label
                       className="bx--pagination__text"
-                      htmlFor="bx-pagination-select-31"
-                      id="bx-pagination-select-31-count-label"
+                      htmlFor="bx-pagination-select-30"
+                      id="bx-pagination-select-30-count-label"
                     >
                       Items per page:
                     </label>
@@ -27806,7 +27806,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-31"
+                              id="bx-pagination-select-30"
                               onChange={[Function]}
                               value={10}
                             >
@@ -27875,7 +27875,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                       >
                         <label
                           className="bx--label bx--visually-hidden"
-                          htmlFor="bx-pagination-select-33"
+                          htmlFor="bx-pagination-select-32"
                         >
                           Page number, of 2 pages
                         </label>
@@ -27888,7 +27888,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT|Table
                           >
                             <select
                               className="bx--select-input"
-                              id="bx-pagination-select-33"
+                              id="bx-pagination-select-32"
                               onChange={[Function]}
                               value={1}
                             >