From 5702fb52cbdf805ff90c330d2244f08c3c55436f Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 28 Jul 2022 16:08:09 -0400
Subject: [PATCH] chore(table): implemented sortable demo with new data

---
 packages/react-table/src/docs/demos/Table.md  | 406 +-----------------
 .../demos/table-demos/SortableResponsive.jsx  | 326 ++++++++++++++
 2 files changed, 327 insertions(+), 405 deletions(-)
 create mode 100644 packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index aa3afbf8413..36762b6d47d 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2107,411 +2107,7 @@ class FilterTableDemo extends React.Component {
 
 ### Sortable - responsive
 
-```js isFullscreen
-import React from 'react';
-import {
-  Button,
-  Card,
-  Flex,
-  FlexItem,
-  InputGroup,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem,
-  ToolbarToggleGroup,
-  OptionsMenu,
-  OptionsMenuToggle,
-  Pagination,
-  Text,
-  TextContent,
-  Select,
-  SelectVariant,
-  SelectOption,
-  Nav,
-  NavList,
-  NavItem,
-  Dropdown,
-  DropdownItem,
-  DropdownGroup,
-  DropdownToggle,
-  Divider,
-  KebabToggle,
-  Avatar,
-  OptionsMenuItem,
-  OptionsMenuSeparator,
-  OptionsMenuItemGroup,
-  OverflowMenu,
-  OverflowMenuContent,
-  OverflowMenuControl,
-  OverflowMenuDropdownItem,
-  OverflowMenuGroup,
-  OverflowMenuItem,
-  PageSection
-} from '@patternfly/react-core';
-import { ActionsColumn, TableComposable, 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 CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-ComposableTableSortable = () => {
-  const [navActiveItem, setNavActiveItem] = React.useState(0);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-
-  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last commit'];
-
-  const [rows, setRows] = React.useState([
-    ['Node 1', 10, 25, 5, 2],
-    ['Node 2', 8, 30, 2, 2],
-    ['Node 3', 12, 48, 13, 30],
-    ['Node 4', 10, 25, 5, 8],
-    ['Node 5', 34, 21, 26, 2]
-  ]);
-
-  // index of the currently active column
-  const [activeSortIndex, setActiveSortIndex] = React.useState(0);
-  // sort direction of the currently active column
-  const [activeSortDirection, setActiveSortDirection] = React.useState('asc');
-  // sort dropdown expansion
-  const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
-
-  const [selectedNodeNames, setSelectedNodeNames] = React.useState([]);
-  const setNodeSelected = (node, isSelecting = true) => {
-    if (!selectedNodeNames.includes(node)) {
-      setSelectedNodeNames([...selectedNodeNames, node]);
-    } else {
-      setSelectedNodeNames(selectedNodeNames.filter(n => n !== node));
-    }
-  };
-
-  const selectAllNodes = (isSelecting = true) => setSelectedNodeNames(isSelecting ? rows.map(r => r[0]) : []);
-  const areAllReposSelected = selectedNodeNames.length === rows.length;
-  const isNodeSelected = node => selectedNodeNames.includes(node[0]);
-
-  // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null);
-  const [shifting, setShifting] = React.useState(false);
-
-  const onSelectNode = (node, rowIndex, isSelecting) => {
-    // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
-    if (shifting && recentSelectedRowIndex !== null) {
-      const numberSelected = rowIndex - recentSelectedRowIndex;
-      const intermediateIndexes =
-        numberSelected > 0
-          ? Array.from(new Array(numberSelected + 1), (_x, i) => i + recentSelectedRowIndex)
-          : Array.from(new Array(Math.abs(numberSelected) + 1), (_x, i) => i + rowIndex);
-      intermediateIndexes.forEach(index => setNodeSelected(rows[index], isSelecting));
-    } else {
-      setNodeSelected(node[0], isSelecting);
-    }
-    setRecentSelectedRowIndex(rowIndex);
-  };
-
-  const onSort = (event, index, direction) => {
-    setActiveSortIndex(index);
-    setActiveSortDirection(direction);
-    // sorts the rows
-    const updatedRows = rows.sort((a, b) => {
-      if (typeof a[index] === 'number') {
-        // numeric sort
-        if (direction === 'asc') {
-          return a[index] - b[index];
-        }
-        return b[index] - a[index];
-      } else {
-        // string sort
-        if (direction === 'asc') {
-          return a[index].localeCompare(b[index]);
-        }
-        return b[index].localeCompare(a[index]);
-      }
-    });
-    setRows(updatedRows);
-  };
-
-  const PageNav = (
-    <Nav onSelect={result => setNavActiveItem(result.itemId)} aria-label="Nav">
-      <NavList>
-        <NavItem itemId={0} isActive={navActiveItem === 0} to="#system-panel">
-          System Panel
-        </NavItem>
-        <NavItem itemId={1} isActive={navActiveItem === 1} to="#policy">
-          Policy
-        </NavItem>
-        <NavItem itemId={2} isActive={navActiveItem === 2} to="#auth">
-          Authentication
-        </NavItem>
-        <NavItem itemId={3} isActive={navActiveItem === 3} to="#network">
-          Network Services
-        </NavItem>
-        <NavItem itemId={4} isActive={navActiveItem === 4} to="#server">
-          Server
-        </NavItem>
-      </NavList>
-    </Nav>
-  );
-
-  const kebabDropdownItems = [<OverflowMenuDropdownItem key="kebab-1">Some action</OverflowMenuDropdownItem>];
-
-  const defaultActions = () => [
-    {
-      title: 'Settings',
-      onClick: () => console.log(`clicked on Settings`)
-    },
-    {
-      title: 'Help',
-      onClick: () => console.log(`clicked on Help`)
-    }
-  ];
-
-  const renderPagination = (variant, isCompact) => (
-    <Pagination
-      isCompact={isCompact}
-      itemCount={36}
-      page={1}
-      perPage={10}
-      variant={variant}
-      titles={{
-        paginationTitle: `${variant} pagination`
-      }}
-    />
-  );
-
-  const userDropdownItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
-        User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>
-  ];
-
-  const fullKebabItems = [
-    <DropdownGroup key="group 2">
-      <DropdownItem key="group 2 profile">My profile</DropdownItem>
-      <DropdownItem key="group 2 user" component="button">
-        User management
-      </DropdownItem>
-      <DropdownItem key="group 2 logout">Logout</DropdownItem>
-    </DropdownGroup>,
-    <Divider key="divider" />,
-    <DropdownItem key="kebab-1">
-      <CogIcon /> Settings
-    </DropdownItem>,
-    <DropdownItem key="kebab-2">
-      <HelpIcon /> Help
-    </DropdownItem>
-  ];
-
-  const tableToolbar = (
-    <Toolbar id="sortable-toolbar">
-      <ToolbarContent>
-        <ToolbarItem visibility={{ md: 'hidden' }}>
-          <OptionsMenu
-            id="options-menu-multiple-options-example"
-            menuItems={[
-              <OptionsMenuItemGroup key="first group" aria-label="Sort column">
-                {columns.map((column, columnIndex) => (
-                  <OptionsMenuItem
-                    key={column}
-                    isSelected={activeSortIndex === columnIndex}
-                    onSelect={evt =>
-                      onSort(evt, columnIndex, activeSortDirection !== 'none' ? activeSortDirection : 'asc')
-                    }
-                  >
-                    {column}
-                  </OptionsMenuItem>
-                ))}
-              </OptionsMenuItemGroup>,
-              <OptionsMenuSeparator key="separator" />,
-              <OptionsMenuItemGroup key="second group" aria-label="Sort direction">
-                <OptionsMenuItem
-                  onSelect={evt => onSort(evt, activeSortIndex, 'asc')}
-                  isSelected={activeSortDirection === 'asc'}
-                  id="ascending"
-                  key="ascending"
-                >
-                  Ascending
-                </OptionsMenuItem>
-                <OptionsMenuItem
-                  onSelect={evt => onSort(evt, activeSortIndex, 'desc')}
-                  isSelected={activeSortDirection === 'desc'}
-                  id="descending"
-                  key="descending"
-                >
-                  Descending
-                </OptionsMenuItem>
-              </OptionsMenuItemGroup>
-            ]}
-            isOpen={isSortDropdownOpen}
-            toggle={
-              <OptionsMenuToggle
-                hideCaret
-                onToggle={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
-                toggleTemplate={<SortAmountDownIcon />}
-              />
-            }
-            isPlain
-            isGrouped
-            menuAppendTo="parent"
-            isFlipEnabled
-          />
-        </ToolbarItem>
-        <OverflowMenu breakpoint="lg">
-          <OverflowMenuContent isPersistent>
-            <OverflowMenuGroup isPersistent groupType="button">
-              <OverflowMenuItem>
-                <Button variant="primary">Create instance</Button>
-              </OverflowMenuItem>
-              <OverflowMenuItem>
-                <Button variant="secondary">Action</Button>
-              </OverflowMenuItem>
-            </OverflowMenuGroup>
-          </OverflowMenuContent>
-          <OverflowMenuControl hasAdditionalOptions>
-            <Dropdown
-              isPlain
-              onSelect={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
-              toggle={<KebabToggle onToggle={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)} />}
-              isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-              isFlipEnabled
-              menuAppendTo="parent"
-            />
-          </OverflowMenuControl>
-        </OverflowMenu>
-        <ToolbarGroup variant="icon-button-group">
-          <ToolbarItem>
-            <Button aria-label="Edit" variant="plain" icon={<EditIcon />} />
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button aria-label="Clone" variant="plain" icon={<CloneIcon />} />
-          </ToolbarItem>
-          <ToolbarItem>
-            <Button aria-label="Sync" variant="plain" icon={<SyncIcon />} />
-          </ToolbarItem>
-        </ToolbarGroup>
-        <ToolbarItem variant="pagination">{renderPagination('top', true)}</ToolbarItem>
-      </ToolbarContent>
-    </Toolbar>
-  );
-
-  return (
-    <React.Fragment>
-      <DashboardWrapper>
-        <PageSection isWidthLimited variant={PageSectionVariants.light}>
-          <TextContent>
-            <Text component="h1">Table demos</Text>
-            <Text component="p">
-              Below is an example of a responsive sortable table. When the screen size shrinks the table into a compact
-              form, the toolbar will display a dropdown menu containing sorting options.
-            </Text>
-          </TextContent>
-        </PageSection>
-        <PageSection
-          padding={{
-            default: 'noPadding',
-            xl: 'padding'
-          }}
-        >
-          <Card component="div">
-            {tableToolbar}
-            <TableComposable aria-label="Sortable Table">
-              <Thead>
-                <Tr>
-                  <Th />
-                  {columns.map((column, columnIndex) => {
-                    const sortParams = {
-                      sort: {
-                        sortBy: {
-                          index: activeSortIndex,
-                          direction: activeSortDirection
-                        },
-                        onSort,
-                        columnIndex
-                      }
-                    };
-                    return (
-                      <Th key={columnIndex} {...sortParams}>
-                        {column}
-                      </Th>
-                    );
-                  })}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {rows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      <Td
-                        select={{
-                          rowIndex,
-                          onSelect: (_event, isSelecting) => onSelectNode(row, rowIndex, isSelecting),
-                          isSelected: isNodeSelected(row)
-                        }}
-                      />
-                      <Td dataLabel={columns[0]}>
-                        <div>{row[0]}</div>
-                        <a href="#">siemur/test-space</a>
-                      </Td>
-                      <Td dataLabel={columns[1]}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CodeBranchIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row[1]}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[2]}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CodeIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row[2]}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[3]}>
-                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                          <FlexItem>
-                            <CubeIcon key="icon" />
-                          </FlexItem>
-                          <FlexItem>{row[3]}</FlexItem>
-                        </Flex>
-                      </Td>
-                      <Td dataLabel={columns[4]}>{row[4]} days ago</Td>
-                      <Td dataLabel={'Action'}>
-                        <a href="#">Action link</a>
-                      </Td>
-                      <Td isActionCell>
-                        <ActionsColumn items={defaultActions()} />
-                      </Td>
-                    </>
-                  </Tr>
-                ))}
-              </Tbody>
-            </TableComposable>
-            {renderPagination('bottom', false)}
-          </Card>
-        </PageSection>
-      </DashboardWrapper>
-    </React.Fragment>
-  );
-};
+```js isFullscreen file="./table-demos/SortableResponsive.jsx"
 ```
 
 ### Automatic pagination
diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
new file mode 100644
index 00000000000..9ea4a1d2d97
--- /dev/null
+++ b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
@@ -0,0 +1,326 @@
+import React from 'react';
+import {
+  Button,
+  Card,
+  Flex,
+  FlexItem,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  OptionsMenu,
+  OptionsMenuToggle,
+  Pagination,
+  Text,
+  TextContent,
+  Dropdown,
+  KebabToggle,
+  OptionsMenuItem,
+  OptionsMenuSeparator,
+  OptionsMenuItemGroup,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuDropdownItem,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  PageSection
+} from '@patternfly/react-core';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { rows, columns } from '../../examples/Data.jsx';
+import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
+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';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+
+export const ComposableTableSortable = () => {
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+
+  const sortRows = (r, sortIndex, sortDirection) => {
+    return [...r].sort((a, b) => {
+      let returnValue = 0;
+      if (sortIndex === 0 || sortIndex === 7) {
+        returnValue = 1
+      } else if (typeof Object.values(a)[sortIndex] === 'number') {
+        // numeric sort
+        returnValue = Object.values(a)[sortIndex] - Object.values(b)[sortIndex];
+      } else {
+        // string sort
+        returnValue = Object.values(a)[sortIndex].localeCompare(Object.values(b)[sortIndex]);
+      }
+      if (sortDirection === 'desc') {
+        return returnValue * -1;
+      }
+      return returnValue;
+    })
+  };
+
+const [sortedData, setSortedData] = React.useState([
+   ...sortRows(rows, 0, 'asc')
+  ]);
+const [sortedRows, setSortedRows] = React.useState([
+   ...sortedData
+  ]);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+
+  // index of the currently active column
+  const [activeSortIndex, setActiveSortIndex] = React.useState(0);
+  // sort direction of the currently active column
+  const [activeSortDirection, setActiveSortDirection] = React.useState('asc');
+  // sort dropdown expansion
+  const [isSortDropdownOpen, setIsSortDropdownOpen] = React.useState(false);
+
+  const onSort = (event, index, direction) => {
+    setActiveSortIndex(index);
+    setActiveSortDirection(direction);
+
+    setSortedData(sortRows(rows, index, direction));
+  };
+
+  const kebabDropdownItems = [<OverflowMenuDropdownItem key="kebab-1">Some action</OverflowMenuDropdownItem>];
+
+  React.useEffect(() => {
+    setSortedRows(sortedData.slice((page - 1) * perPage, page * perPage -1));
+  }, [sortedData, page, perPage]);
+
+  const handleSetPage = (_evt, newPage) => {
+    setPage(newPage);
+  }
+
+  const handlePerPageSelect = (_evt, newPerPage) => {
+    setPerPage(newPerPage);
+  }
+
+  renderPagination = (variant) => (
+      <Pagination
+        isCompact
+        itemCount={rows.length}
+        page={page}
+        perPage={perPage}
+        onSetPage={handleSetPage}
+        onPerPageSelect={handlePerPageSelect}
+        perPageOptions={[
+          { title: '10', value: 10 },
+          { title: '20', value: 20 },
+          { title: '50', value: 50 },
+          { title: '100', value: 100 }
+        ]}
+        variant={variant}
+        titles={{
+          paginationTitle: `${variant} pagination`
+        }}
+      />
+    );
+
+    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>;
+      }
+    };
+
+  const tableToolbar = (
+    <Toolbar id="sortable-toolbar">
+      <ToolbarContent>
+        <ToolbarItem visibility={{ md: 'hidden' }}>
+          <OptionsMenu
+            id="options-menu-multiple-options-example"
+            menuItems={[
+              <OptionsMenuItemGroup key="first group" aria-label="Sort column">
+                {columns.map((column, columnIndex) => (
+                  <OptionsMenuItem
+                    key={column}
+                    isSelected={activeSortIndex === columnIndex}
+                    onSelect={evt =>
+                      onSort(evt, columnIndex, activeSortDirection !== 'none' ? activeSortDirection : 'asc')
+                    }
+                  >
+                    {column}
+                  </OptionsMenuItem>
+                ))}
+              </OptionsMenuItemGroup>,
+              <OptionsMenuSeparator key="separator" />,
+              <OptionsMenuItemGroup key="second group" aria-label="Sort direction">
+                <OptionsMenuItem
+                  onSelect={evt => onSort(evt, activeSortIndex, 'asc')}
+                  isSelected={activeSortDirection === 'asc'}
+                  id="ascending"
+                  key="ascending"
+                >
+                  Ascending
+                </OptionsMenuItem>
+                <OptionsMenuItem
+                  onSelect={evt => onSort(evt, activeSortIndex, 'desc')}
+                  isSelected={activeSortDirection === 'desc'}
+                  id="descending"
+                  key="descending"
+                >
+                  Descending
+                </OptionsMenuItem>
+              </OptionsMenuItemGroup>
+            ]}
+            isOpen={isSortDropdownOpen}
+            toggle={
+              <OptionsMenuToggle
+                hideCaret
+                onToggle={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
+                toggleTemplate={<SortAmountDownIcon />}
+              />
+            }
+            isPlain
+            isGrouped
+            menuAppendTo="parent"
+            isFlipEnabled
+          />
+        </ToolbarItem>
+        <OverflowMenu breakpoint="lg">
+          <OverflowMenuContent isPersistent>
+            <OverflowMenuGroup isPersistent groupType="button">
+              <OverflowMenuItem>
+                <Button variant="primary">Create instance</Button>
+              </OverflowMenuItem>
+              <OverflowMenuItem>
+                <Button variant="secondary">Action</Button>
+              </OverflowMenuItem>
+            </OverflowMenuGroup>
+          </OverflowMenuContent>
+          <OverflowMenuControl hasAdditionalOptions>
+            <Dropdown
+              isPlain
+              onSelect={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
+              toggle={<KebabToggle onToggle={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)} />}
+              isOpen={isKebabDropdownOpen}
+              dropdownItems={kebabDropdownItems}
+              isFlipEnabled
+              menuAppendTo="parent"
+            />
+          </OverflowMenuControl>
+        </OverflowMenu>
+        <ToolbarGroup variant="icon-button-group">
+          <ToolbarItem>
+            <Button aria-label="Edit" variant="plain" icon={<EditIcon />} />
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button aria-label="Clone" variant="plain" icon={<CloneIcon />} />
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button aria-label="Sync" variant="plain" icon={<SyncIcon />} />
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem variant="pagination">{renderPagination('top', true)}</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  return (
+    <React.Fragment>
+      <DashboardWrapper>
+        <PageSection isWidthLimited variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Table demos</Text>
+            <Text component="p">
+              Below is an example of a responsive sortable table. When the screen size shrinks the table into a compact
+              form, the toolbar will display a dropdown menu containing sorting options.
+            </Text>
+          </TextContent>
+        </PageSection>
+        <PageSection
+          padding={{
+            default: 'noPadding',
+            xl: 'padding'
+          }}
+        >
+          <Card component="div">
+            {tableToolbar}
+            <TableComposable aria-label="Sortable Table">
+              <Thead>
+                <Tr>
+                  {columns.map((column, columnIndex) => {
+                    const sortParams = {
+                      sort: {
+                        sortBy: {
+                          index: activeSortIndex,
+                          direction: activeSortDirection
+                        },
+                        onSort,
+                        columnIndex
+                      }
+                    };
+                    return (
+                      <Th modifier={columnIndex !== 6 ? "wrap" : undefined} key={columnIndex} {...sortParams}>
+                        {column}
+                      </Th>
+                    );
+                  })}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {sortedRows.map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                    <>
+                      <Td dataLabel={columns[0]} width={15} >
+                        <div>{row.name}</div>
+                      </Td>
+                      <Td dataLabel={columns[1]} width={10}>
+                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                          <FlexItem>
+                            <CodeBranchIcon key="icon" />
+                          </FlexItem>
+                          <FlexItem>{row.threads}</FlexItem>
+                        </Flex>
+                      </Td>
+                      <Td dataLabel={columns[2]} width={10}>
+                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                          <FlexItem>
+                            <CodeIcon key="icon" />
+                          </FlexItem>
+                          <FlexItem>{row.applications}</FlexItem>
+                        </Flex>
+                      </Td>
+                      <Td dataLabel={columns[3]} width={10}>
+                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                          <FlexItem>
+                            <CubeIcon key="icon" />
+                          </FlexItem>
+                          <FlexItem>{row.workspaces}</FlexItem>
+                        </Flex>
+                      </Td>
+                       <Td dataLabel={columns[4]} width={15}>
+                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                          <FlexItem>{renderLabel(row.status)}</FlexItem>
+                        </Flex>
+                      </Td>
+                        <Td dataLabel={columns[5]} width={10}>
+                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                          <FlexItem>{row.location}</FlexItem>
+                        </Flex>
+                      </Td>
+                        <Td dataLabel={columns[6]} width={10}>
+                        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                          <FlexItem>{row.lastModified[0]} days ago</FlexItem>
+                        </Flex>
+                      </Td>
+                      <Td dataLabel={columns[7]} modifier="truncate"><a href="#">{row.url}</a></Td>
+                    </>
+                  </Tr>
+                ))}
+              </Tbody>
+            </TableComposable>
+            {renderPagination('bottom', false)}
+          </Card>
+        </PageSection>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};