chore(Table): Update sticky header demo to use latest Table component (#9185)

Author: jpuzz0

packages/react-table/src/docs/demos/Table.md

@@ -50,7 +50,7 @@ import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { rows, columns } from '../examples/Data.jsx';
+import { rows, columns } from './table-demos/sampleData';
 
 ## Demos
 
@@ -855,7 +855,7 @@ import {
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { rows, columns } from '../../examples/Data.jsx';
+import { rows, columns } from '';
 
 class FilterTableDemo extends React.Component {
   constructor(props) {
@@ -1426,70 +1426,8 @@ class ComplexPaginationTableDemo extends React.Component {
 
 ### Sticky header
 
-```js isFullscreen
-import React from 'react';
-import { Label, PageSection } from '@patternfly/react-core';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
-import { rows } from '../examples/Data.jsx';
-
-class StickyHeaderTableDemo extends React.Component {
-  render() {
-    const renderLabel = (labelText) => {
-      switch (labelText) {
-        case 'Running':
-          return <Label color="green">{labelText}</Label>;
-        case 'Stopped':
-          return <Label color="orange">{labelText}</Label>;
-        case 'Needs maintenance':
-          return <Label color="blue">{labelText}</Label>;
-        case 'Down':
-          return <Label color="red">{labelText}</Label>;
-      }
-    };
+```js isFullscreen file="./table-demos/StickyHeader.jsx"
 
-    return (
-      <DashboardWrapper hasPageTemplateTitle>
-        <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
-          <Card component="div">
-            <TableDeprecated
-              cells={[
-                { title: 'Servers', transforms: [cellWidth(15)] },
-                { title: 'Threads', transforms: [cellWidth(10)] },
-                { title: 'Applications', transforms: [cellWidth(10)] },
-                { title: 'Workspaces', transforms: [cellWidth(10)] },
-                { title: 'Status', transforms: [cellWidth(10)] },
-                { title: 'Location', transforms: [cellWidth(15)] },
-                { title: 'Last Modified', transforms: [cellWidth(15)] },
-                { title: 'URL', transforms: [cellWidth(10)] }
-              ]}
-              rows={rows.map((row) => [
-                row.name,
-                row.threads,
-                row.applications,
-                row.workspaces,
-                { title: renderLabel(row.status) },
-                row.location,
-                row.lastModified,
-                {
-                  title: (
-                    <a href="#">
-                      <TableText wrapModifier="truncate">{row.url} </TableText>
-                    </a>
-                  )
-                }
-              ])}
-              aria-label="Sticky Header Table Demo"
-              isStickyHeader
-            >
-              <TableHeader />
-              <TableBody />
-            </TableDeprecated>
-          </Card>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
 ```
 
 ### Sticky first column

packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   Dropdown,
   DropdownList,
@@ -14,7 +15,8 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import { rows, columns } from '../../examples/Data.jsx';
+
+import { rows, columns } from './sampleData';
 
 export const BulkSelectTableDemo = () => {
   const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);

packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+
 import {
   Button,
   DataList,
@@ -26,10 +27,11 @@ import {
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
-import { rows, columns } from '../../examples/Data.jsx';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper.js';
 import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils';
 
+import { rows, columns } from './sampleData';
+
 export const ColumnManagementAction = () => {
   const defaultColumns = columns;
   const defaultRows = rows;
@@ -389,10 +391,14 @@ export const ColumnManagementAction = () => {
           <ToolbarItem variant="overflow-menu">
             <OverflowMenu breakpoint="md">
               <OverflowMenuItem>
-                <MenuToggle><FilterIcon /> Name</MenuToggle>
+                <MenuToggle>
+                  <FilterIcon /> Name
+                </MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuItem>
-                <MenuToggle variant="plain" aria-label="Sort columns"><SortAmountDownIcon aria-hidden="true" /></MenuToggle>
+                <MenuToggle variant="plain" aria-label="Sort columns">
+                  <SortAmountDownIcon aria-hidden="true" />
+                </MenuToggle>
               </OverflowMenuItem>
               <OverflowMenuGroup groupType="button" isPersistent>
                 <OverflowMenuItem>

packages/react-table/src/docs/demos/table-demos/Compact.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   Button,
   Card,
@@ -14,10 +15,10 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import { rows, columns } from '../../examples/Data.jsx';
+
+import { rows, columns } from './sampleData';
 
 export const CompactTable = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);

packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   Button,
   Card,
@@ -21,7 +22,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { rows, columns } from '../../examples/Data.jsx';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
@@ -32,6 +32,8 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
+import { rows, columns } from './sampleData';
+
 export const ComposableTableSortable = () => {
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
 

packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
   Button,
   Card,
@@ -15,11 +16,11 @@ import {
   SelectOption
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import { rows, columns } from '../../examples/Data.jsx';
-
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
+import { rows, columns } from './sampleData';
+
 export const StaticBottomPagination = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
   const [page, setPage] = React.useState(1);

packages/react-table/src/docs/demos/table-demos/StickyHeader.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { Card, Label, PageSection } from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+
+import { rows, columns } from '../examples/Data';
+
+export const StickyHeader: React.FunctionComponent = () => {
+  const renderLabel = (labelText: string) => {
+    switch (labelText) {
+      case 'Running':
+        return <Label color="green">{labelText}</Label>;
+      case 'Stopped':
+        return <Label color="orange">{labelText}</Label>;
+      case 'Needs Maintenance':
+        return <Label color="blue">{labelText}</Label>;
+      case 'Down':
+        return <Label color="red">{labelText}</Label>;
+    }
+  };
+
+  return (
+    <DashboardWrapper hasPageTemplateTitle>
+      <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+        <Card component="div">
+          <Table aria-label="Sticky Header Table Demo" isStickyHeader>
+            <Thead>
+              <Tr>
+                <Th width={15}>{columns[0]}</Th>
+                <Th width={10}>{columns[1]}</Th>
+                <Th width={10}>{columns[2]}</Th>
+                <Th width={10}>{columns[3]}</Th>
+                <Th width={10}>{columns[4]}</Th>
+                <Th width={15}>{columns[5]}</Th>
+                <Th width={15}>{columns[6]}</Th>
+                <Th width={10}>{columns[7]}</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {rows.map((row) => (
+                <Tr key={row.name}>
+                  <Td dataLabel={columns[0]}>{row.name}</Td>
+                  <Td dataLabel={columns[1]}>{row.threads}</Td>
+                  <Td dataLabel={columns[2]}>{row.applications}</Td>
+                  <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                  <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                  <Td dataLabel={columns[5]}>{row.location}</Td>
+                  <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                  <Td dataLabel={columns[7]}>
+                    <a href="#">
+                      <TableText wrapModifier="truncate">{row.url} </TableText>
+                    </a>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </Card>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

packages/react-table/src/docs/examples/Data.jsx renamed to packages/react-table/src/docs/demos/table-demos/sampleData.js

@@ -1,6 +1,4 @@
-const getRandomInteger = (min, max) => (
-  Math.floor(Math.random() * (max - min + 1)) + min
-);
+const getRandomInteger = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 
 export const columns = [
   'Servers',
@@ -14,7 +12,7 @@ export const columns = [
 ];
 
 export const rows = [
-  {  
+  {
     name: 'US-Node 1',
     threads: getRandomInteger(1, 20),
     applications: getRandomInteger(1, 50),
@@ -24,7 +22,7 @@ export const rows = [
     lastModified: '2 hours ago',
     url: 'http://www.redhat.com/en/office-locations/US-node1'
   },
-  {    
+  {
     name: 'US-Node 2',
     threads: getRandomInteger(1, 20),
     applications: getRandomInteger(1, 50),
@@ -34,7 +32,7 @@ export const rows = [
     lastModified: '5 hours ago',
     url: 'http://www.redhat.com/en/office-locations/US-node2'
   },
-  {    
+  {
     name: 'US-Node 3',
     threads: getRandomInteger(1, 20),
     applications: getRandomInteger(1, 50),
@@ -734,7 +732,7 @@ export const rows = [
     lastModified: '20 minutes ago',
     url: 'http://www.redhat.com/en/office-locations/Bangalore-node13'
   },
-  {    
+  {
     name: 'Bangalore-Node 14',
     threads: getRandomInteger(1, 20),
     applications: getRandomInteger(1, 50),
@@ -744,7 +742,7 @@ export const rows = [
     lastModified: '4 hours ago',
     url: 'http://www.redhat.com/en/office-locations/Bangalore-node14'
   },
-  {    
+  {
     name: 'Bangalore-Node 15',
     threads: getRandomInteger(1, 20),
     applications: getRandomInteger(1, 50),