diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 1c4e2906f2d..e5dbdba7ce1 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -5,6 +5,7 @@ section: components
 
 import {
 Checkbox,
+Label,
 PageSection,
 ToolbarExpandIconWrapper,
 ToolbarContent,
@@ -46,6 +47,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
+import { rows, columns } from '../examples/Data.jsx';
 
 ## Demos
 
@@ -2784,234 +2786,65 @@ class ComplexPaginationTableDemo extends React.Component {
 
 ```js isFullscreen
 import React from 'react';
-import {
-  Avatar,
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  ButtonVariant,
-  Dropdown,
-  DropdownGroup,
-  DropdownToggle,
-  DropdownItem,
-  KebabToggle,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageHeader,
-  PageSection,
-  PageSectionVariants,
-  PageSidebar,
-  SkipToContent,
-  TextContent,
-  Text,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
-} from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import { Label, PageSection } from '@patternfly/react-core';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { rows } from '../examples/Data.jsx';
 
-class PageLayoutDefaultNav extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      res: []
-    };
-    this.onDropdownToggle = isDropdownOpen => {
-      this.setState({
-        isDropdownOpen
-      });
-    };
-
-    this.onDropdownSelect = event => {
-      this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
-      });
-    };
-
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
-      this.setState({
-        isKebabDropdownOpen
-      });
-    };
-
-    this.onKebabDropdownSelect = event => {
-      this.setState({
-        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
-      });
-    };
-
-    this.onNavSelect = result => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  fetch(page, perPage) {
-    this.setState({ loading: true });
-    fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page, total: 100 }))
-      .catch(err => this.setState({ error: err, perPage: 0, page: 0, total: 0 }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page || 1, this.state.perPage || 20);
-  }
-
+class StickyHeaderTableDemo extends React.Component {
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, activeItem, res } = this.state;
-
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0}>
-            System Panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1}>
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2}>
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3}>
-            Network Services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4}>
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-    const kebabDropdownItems = [
-      <DropdownItem>
-        <CogIcon /> Settings
-      </DropdownItem>,
-      <DropdownItem>
-        <HelpIcon /> Help
-      </DropdownItem>
-    ];
-    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 headerTools = (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup
-          visibility={{
-            default: 'hidden',
-            lg: 'visible'
-          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-        >
-          <PageHeaderToolsItem>
-            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-              <CogIcon />
-            </Button>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <QuestionCircleIcon />
-            </Button>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem
-            visibility={{
-              lg: 'hidden'
-            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-          >
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onKebabDropdownSelect}
-              toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
-              isOpen={isKebabDropdownOpen}
-              dropdownItems={kebabDropdownItems}
-            />
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem
-            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-          >
-            <Dropdown
-              isPlain
-              position="right"
-              onSelect={this.onDropdownSelect}
-              isOpen={isDropdownOpen}
-              toggle={<DropdownToggle onToggle={this.onDropdownToggle}>John Smith</DropdownToggle>}
-              dropdownItems={userDropdownItems}
-            />
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <Avatar src={imgAvatar} alt="Avatar image" />
-      </PageHeaderTools>
-    );
-
-    const Header = (
-      <PageHeader logo={<Brand src={imgBrand} alt="Patternfly Logo" />} headerTools={headerTools} showNavToggle />
-    );
-    const Sidebar = <PageSidebar nav={PageNav} />;
-    const pageId = 'main-content-page-layout-default-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-
-    const PageBreadcrumb = (
-      <Breadcrumb>
-        <BreadcrumbItem>Section home</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Section landing
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
+    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>;
+      }
+    };
 
     return (
-      <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">
-                Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-                of its relative line height of 1.5.
-              </Text>
-            </TextContent>
-          </PageSection>
-          <PageSection>
+      <DashboardWrapper hasPageTemplateTitle>
+        <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+          <Card component="div">
             <Table
-              cells={['Title', 'Body']}
-              rows={res.map(post => [post.title, post.body])}
+              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 />
             </Table>
-          </PageSection>
-        </Page>
-      </React.Fragment>
+          </Card>
+        </PageSection>
+      </DashboardWrapper>
     );
   }
 }
diff --git a/packages/react-table/src/docs/examples/Data.jsx b/packages/react-table/src/docs/examples/Data.jsx
index a999a49ab4c..060c4a71857 100644
--- a/packages/react-table/src/docs/examples/Data.jsx
+++ b/packages/react-table/src/docs/examples/Data.jsx
@@ -173,7 +173,7 @@ export const rows = [
     applications: getRandomInteger(1, 50),
     workspaces: getRandomInteger(1, 30),
     status: ['Stopped', 'Running', 'Down', 'Needs Maintenance'][getRandomInteger(0, 3)],
-    status: ['Stopped', 'Running', 'Down', 'Needs Maintenance'][getRandomInteger(0, 3)],
+    location: ['Raleigh', 'Boston', 'Atlanta', 'San Francisco'][getRandomInteger(0, 3)],
     lastModified: '5 minutes ago',
     url: 'http://www.redhat.com/en/office-locations/US-node16'
   },