@patternfly/react-table 6.0.0-alpha.4 → 6.0.0-alpha.40

package/src/demos/DashboardWrapper.tsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Text,
+  TextContent
+} from '@patternfly/react-core';
+import { DashboardHeader } from './DashboardHeader';
+
+interface DashboardWrapperProps {
+  /** Programmatically manage if the sidebar nav is shown */
+  sidebarNavOpen?: boolean;
+  /** Flag to render sample breadcrumb if custom breadcrumb not passed */
+  hasDefaultBreadcrumb?: boolean;
+  /** Flag to render sample page title if custom title not passed */
+  hasPageTemplateTitle?: boolean;
+  /** Content rendered inside the main section of the page layout (e.g. <PageSection />) */
+  children?: React.ReactNode;
+  /** Additional classes added to the page layout */
+  className?: string;
+  /** Header component (e.g. <Masthead />) */
+  header?: React.ReactNode;
+  /** Sidebar component for a side nav (e.g. <PageSidebar />) */
+  sidebar?: React.ReactNode;
+  /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
+  notificationDrawer?: React.ReactNode;
+  /** Flag indicating Notification drawer in expanded */
+  isNotificationDrawerExpanded?: boolean;
+  /** Flag indicating if breadcrumb width should be limited */
+  isBreadcrumbWidthLimited?: boolean;
+  /** Callback when notification drawer panel is finished expanding. */
+  onNotificationDrawerExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+  /** Skip to content component for the page */
+  skipToContent?: React.ReactElement;
+  /** Sets the value for role on the <main> element */
+  role?: string;
+  /** an id to use for the [role="main"] element */
+  mainContainerId?: string;
+  /** tabIndex to use for the [role="main"] element, null to unset it */
+  mainTabIndex?: number | null;
+  /**
+   * If true, manages the sidebar open/close state and there is no need to pass the isSidebarOpen boolean into
+   * the sidebar component or add a callback onSidebarToggle function into the Masthead component
+   */
+  isManagedSidebar?: boolean;
+  /** Flag indicating if tertiary nav width should be limited */
+  isTertiaryNavWidthLimited?: boolean;
+  /**
+   * If true, the managed sidebar is initially open for desktop view
+   */
+  defaultManagedSidebarIsOpen?: boolean;
+  /**
+   * Can add callback to be notified when resize occurs, for example to set the sidebar isSidebarOpen prop to false for a width < 768px
+   * Returns object { mobileView: boolean, windowSize: number }
+   */
+  onPageResize?: ((event: MouseEvent | TouchEvent | React.KeyboardEvent, object: any) => void) | null;
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getBreakpoint?: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getVerticalBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getVerticalBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Breadcrumb component for the page */
+  breadcrumb?: React.ReactNode;
+  /** Tertiary nav component for the page */
+  tertiaryNav?: React.ReactNode;
+  /** Accessible label, can be used to name main section */
+  mainAriaLabel?: string;
+  /** Flag indicating if the tertiaryNav should be in a group */
+  isTertiaryNavGrouped?: boolean;
+  /** Flag indicating if the breadcrumb should be in a group */
+  isBreadcrumbGrouped?: boolean;
+  /** Additional content of the group */
+  additionalGroupedContent?: React.ReactNode;
+  /** HTML component used as main component of the page. Defaults to 'main', only pass in 'div' if another 'main' element already exists. */
+  mainComponent?: 'main' | 'div';
+  /** Additional props of the group */
+  groupProps?: any;
+  /** Additional props of the breadcrumb */
+  breadcrumbProps?: any;
+}
+
+export const DashboardBreadcrumb = (
+  <Breadcrumb>
+    <BreadcrumbItem>Section home</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Section landing
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+const PageTemplateTitle = (
+  <PageSection>
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
+
+export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
+  children,
+  mainContainerId,
+  breadcrumb,
+  header,
+  sidebar,
+  sidebarNavOpen,
+  onPageResize,
+  hasDefaultBreadcrumb,
+  notificationDrawer,
+  isNotificationDrawerExpanded,
+  hasPageTemplateTitle,
+  ...pageProps
+}: DashboardWrapperProps) => {
+  const [activeItem, setActiveItem] = useState(1);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => {
+    setActiveItem(result.itemId);
+  };
+
+  let renderedBreadcrumb;
+  if (!hasDefaultBreadcrumb) {
+    renderedBreadcrumb = breadcrumb ?? DashboardBreadcrumb;
+  }
+
+  const PageNav = (
+    <Nav onSelect={onNavSelect} aria-label="Nav">
+      <NavList>
+        <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+          System panel
+        </NavItem>
+        <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+          Policy
+        </NavItem>
+        <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+          Authentication
+        </NavItem>
+        <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+          Network services
+        </NavItem>
+        <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+          Server
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+
+  const _sidebar = (
+    <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+      <PageSidebarBody>{PageNav}</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  const PageSkipToContent = (
+    <SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
+      Skip to content
+    </SkipToContent>
+  );
+
+  return (
+    <Page
+      header={header ?? <DashboardHeader />}
+      sidebar={sidebar ?? _sidebar}
+      isManagedSidebar
+      skipToContent={PageSkipToContent}
+      breadcrumb={renderedBreadcrumb}
+      mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
+      notificationDrawer={notificationDrawer}
+      isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+      {...(typeof onPageResize === 'function' && {
+        onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent<Element>, resizeObject: any) =>
+          onPageResize(event, resizeObject)
+      })}
+      {...pageProps}
+    >
+      {hasPageTemplateTitle && PageTemplateTitle}
+      {children}
+    </Page>
+  );
+};
+DashboardWrapper.displayName = 'DashboardWrapper';

package/src/demos/Table.md

@@ -23,7 +23,25 @@ Page,
 PageSectionVariants,
 TextContent,
 Text,
-Divider } from '@patternfly/react-core';
+Divider,
+Avatar,
+Brand,
+Button,
+ButtonVariant,
+Dropdown,
+DropdownGroup,
+DropdownItem,
+DropdownList,
+MastheadBrand,
+MenuToggle,
+ToolbarGroup,
+PageToggleButton,
+Nav,
+NavItem,
+NavList,
+PageSidebar,
+PageSidebarBody,
+} from '@patternfly/react-core';
 import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -40,23 +58,23 @@ 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 globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
-import imgBrand from '@patternfly/react-core/src/components/assets/pfLogo.svg';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Demos
 
 ### Bulk select
 
 ```js isFullscreen file="./examples/TableBulkSelect.tsx"
+
 ```
 
 ### Expand/collapse all
@@ -86,11 +104,13 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 ### Column management with draggable
 
 ```js isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx"
+
 ```
 
 ### Filterable
 
 ```js isFullscreen file="./examples/TableFilterable.tsx"
+
 ```
 
 ### Sortable - responsive
@@ -111,6 +131,7 @@ To demonstrate this, navigate to the last page of data below using the `>>` navi
 - The `isLastFullPageShown` prop navigates you back to the previous page which does contain a full page of 5 rows (rows 6 - 10).
 
 ```js isFullscreen file="./examples/TableAutomaticPagination.tsx"
+
 ```
 
 ### Static bottom pagination on mobile
@@ -146,14 +167,17 @@ These examples demonstrate the use of an [Empty State component](/components/emp
 ### Empty
 
 ```js isFullscreen file="./examples/TableEmptyStateDefault.tsx"
+
 ```
 
 ### Loading
 
 ```js isFullscreen file="./examples/TableEmptyStateLoading.tsx"
+
 ```
 
 ### Error
 
 ```js isFullscreen file="./examples/TableEmptyStateError.tsx"
+
 ```

package/src/demos/assets/avatarImg.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F0F0F0;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D2D2D2;}
+	.st2{fill:#B8BBBE;}
+	.st3{fill:#D2D2D2;}
+</style>
+<rect class="st0" width="36" height="36"/>
+<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
+<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
+<path class="st3" d="M10.1,36l0.1-3.2c0.2-2.1,1.1-3.1,3.1-3.5l0,6.7h9.4l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2h4.7
+	c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7c-1.2,0.4-2.4,1.2-3.4,2.6
+	C6.7,27,5.8,32.2,5.4,36H10.1z"/>
+<path class="st2" d="M25.9,36l-0.1-3.2c-0.2-2.1-1.1-3.1-3.1-3.5l0,6.7H25.9z"/>
+</svg>

package/src/demos/assets/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/demos/assets/pf-logo.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
+            <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
+            <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
+            <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
+            <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
+            <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
+            <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
+            <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
+            <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>

package/src/demos/examples/TableBulkSelect.tsx

@@ -17,7 +17,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableBulkSelect: React.FunctionComponent = () => {
   const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);

package/src/demos/examples/TableColumnManagement.tsx

@@ -28,7 +28,7 @@ import {
 import { Table, TableText, 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 { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { capitalize } from '@patternfly/react-table/src/components/Table/utils/utils';
 import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
 

package/src/demos/examples/TableCompact.tsx

@@ -18,7 +18,7 @@ import {
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableCompact: React.FunctionComponent = () => {
   const [isSelectOpen, setIsSelectOpen] = React.useState<boolean>(false);

package/src/demos/examples/TableCompoundExpansion.tsx

@@ -20,7 +20,7 @@ import {
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 

package/src/demos/examples/TableEmptyStateDefault.tsx

@@ -14,7 +14,7 @@ import {
   PageSection
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateDefault: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>

package/src/demos/examples/TableEmptyStateError.tsx

@@ -12,7 +12,7 @@ import {
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>

package/src/demos/examples/TableEmptyStateLoading.tsx

@@ -9,7 +9,7 @@ import {
   PageSection,
   Spinner
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateLoading: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 

package/src/demos/examples/TableSortableResponsive.tsx

@@ -28,7 +28,8 @@ import {
   OverflowMenuContent,
   OverflowMenuControl,
   OverflowMenuGroup,
-  OverflowMenuItem
+  OverflowMenuItem,
+  PageSectionVariants
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -38,7 +39,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
@@ -232,7 +233,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DashboardWrapper>
-        <PageSection isWidthLimited>
+        <PageSection isWidthLimited variant={PageSectionVariants.light}>
           <TextContent>
             <Text component="h1">Table demos</Text>
             <Text component="p">

package/src/demos/examples/TableStaticBottomPagination.tsx

@@ -18,7 +18,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, TableText, 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/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableStaticBottomPagination: React.FunctionComponent = () => {

package/src/demos/examples/TableStickyFirstColumn.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import { Card, PageSection } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 type Direction = 'asc' | 'desc' | undefined;
 

package/src/demos/examples/TableStickyHeader.tsx

@@ -2,7 +2,7 @@ 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/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableStickyHeader: React.FunctionComponent = () => {

package/src/demos/index.ts

@@ -1 +1,3 @@
 export * from './sampleData';
+export * from './DashboardWrapper';
+export * from './DashboardHeader';