text(table): add story for sticky header and tooltip positioning

carbon-design-system · Feb 13, 2020 · b61d0ec · b61d0ec
1 parent cc956c3
commit b61d0ec
Show file tree

Hide file tree

Showing 3 changed files with 27,386 additions and 22,427 deletions.
diff --git a/src/components/Table/Table.story.jsx b/src/components/Table/Table.story.jsx
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import Arrow from '@carbon/icons-react/lib/arrow--right/20';
 import Add from '@carbon/icons-react/lib/add/20';
 import Delete from '@carbon/icons-react/lib/delete/20';
+import { Tooltip } from 'carbon-components-react';
 
 import { getSortedData, csvDownloadHandler } from '../../utils/componentUtilityFunctions';
 import FullWidthWrapper from '../../internal/FullWidthWrapper';
@@ -467,27 +468,30 @@ 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 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',
     () => (
@@ -1668,4 +1672,65 @@ storiesOf('Watson IoT|Table', module)
         propTablesExclude: [StatefulTable],
       },
     }
+  )
+  .add(
+    'with sticky header and cell tooltip calculation',
+    () => {
+      const renderDataFunction = ({ value }) => (
+        <div style={{ position: 'relative' }} data-floating-menu-container>
+          {value}
+          <Tooltip
+            direction="right"
+            tabIndex={0}
+            tooltipId="table-tooltip"
+            triggerId="table-tooltip-trigger"
+            triggerText=""
+            menuOffset={menuBody => {
+              const container = menuBody.closest('[data-floating-menu-container]');
+              return {
+                top: -container.getBoundingClientRect().y - window.pageYOffset + 4,
+                left: -container.getBoundingClientRect().x - window.pageXOffset + 10,
+              };
+            }}
+          >
+            <p>This scroll with the table body</p>
+          </Tooltip>
+        </div>
+      );
+      return (
+        <div>
+          <Table
+            columns={tableColumns.map(i => ({
+              ...i,
+              renderDataFunction,
+            }))}
+            data={tableData}
+            actions={actions}
+            stickyHeader
+            options={{
+              hasFilter: true,
+              hasPagination: true,
+              hasRowSelection: 'multi',
+            }}
+            view={{
+              filters: [],
+              table: {
+                ordering: defaultOrdering,
+                sort: {
+                  columnId: 'string',
+                  direction: 'ASC',
+                },
+              },
+            }}
+          />
+        </div>
+      );
+    },
+    {
+      centered: { disable: true },
+      info: {
+        text: `To properly render a tooltip in a table with sticky headers you need to pass a menuOffset or menuOffsetFlip calculation to <Tooltip>
+          `,
+      },
+    }
   );