From a6125817866f4913a11a4d97313e22deb0f979a5 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 19 May 2022 13:31:35 -0400
Subject: [PATCH] convert column mgmt demos to fullscreen

---
 packages/react-table/src/demos/Table.md | 94 +++++++++++++++----------
 1 file changed, 56 insertions(+), 38 deletions(-)

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index 5ea15866b44..7344e39e69b 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -293,10 +293,11 @@ class BulkSelectTableDemo extends React.Component {
 
 ### Column management
 
-```js
+```js isFullscreen
 import React from 'react';
 import {
   Button,
+  Card,
   DataList,
   DataListCheck,
   DataListItem,
@@ -312,6 +313,7 @@ import {
   OverflowMenuItem,
   OptionsMenu,
   OptionsMenuToggle,
+  PageSection,
   Pagination,
   PaginationVariant,
   Text,
@@ -325,6 +327,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 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/src/demos/examples/DashboardWrapper';
 
 class ColumnManagementAction extends React.Component {
   constructor(props) {
@@ -898,24 +901,30 @@ class ColumnManagementAction extends React.Component {
 
     return (
       <React.Fragment>
-        <Table
-          gridBreakPoint="grid-xl"
-          header={
-            <React.Fragment>
-              <Toolbar id="page-layout-table-column-management-action-toolbar-top">{toolbarItems}</Toolbar>
-            </React.Fragment>
-          }
-          aria-label="This is a table with checkboxes"
-          id="page-layout-table-column-management-action-table"
-          onSelect={this.onSelect}
-          cells={columns}
-          rows={rows}
-          actions={this.actions}
-          canSelectAll={canSelectAll}
-        >
-          <TableHeader />
-          <TableBody />
-        </Table>
+        <DashboardWrapper hasPageTemplateTitle>
+          <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+            <Card component="div">
+              <Table
+                gridBreakPoint="grid-xl"
+                header={
+                  <React.Fragment>
+                    <Toolbar id="page-layout-table-column-management-action-toolbar-top">{toolbarItems}</Toolbar>
+                  </React.Fragment>
+                }
+                aria-label="This is a table with checkboxes"
+                id="page-layout-table-column-management-action-table"
+                onSelect={this.onSelect}
+                cells={columns}
+                rows={rows}
+                actions={this.actions}
+                canSelectAll={canSelectAll}
+              >
+                <TableHeader />
+                <TableBody />
+              </Table>
+            </Card>
+          </PageSection>
+        </DashboardWrapper>
         <Pagination
           isCompact
           id="page-layout-table-column-management-action-toolbar-bottom"
@@ -933,10 +942,11 @@ class ColumnManagementAction extends React.Component {
 
 ### Column management with draggable
 
-```js
+```js isFullscreen
 import React from 'react';
 import {
   Button,
+  Card,
   DataList,
   DataListCheck,
   DataListControl,
@@ -954,6 +964,7 @@ import {
   OverflowMenuItem,
   OptionsMenu,
   OptionsMenuToggle,
+  PageSection,
   Pagination,
   PaginationVariant,
   Text,
@@ -967,6 +978,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 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/src/demos/examples/DashboardWrapper';
 
 class ColumnManagementAction extends React.Component {
   constructor(props) {
@@ -1661,24 +1673,30 @@ class ColumnManagementAction extends React.Component {
 
     return (
       <React.Fragment>
-        <Table
-          gridBreakPoint="grid-xl"
-          header={
-            <React.Fragment>
-              <Toolbar id="page-layout-table-column-management-action-toolbar-top">{toolbarItems}</Toolbar>
-            </React.Fragment>
-          }
-          aria-label="This is a table with checkboxes"
-          id="page-layout-table-column-management-action-table"
-          onSelect={this.onSelect}
-          cells={columns}
-          rows={rows}
-          actions={this.actions}
-          canSelectAll={canSelectAll}
-        >
-          <TableHeader />
-          <TableBody />
-        </Table>
+        <DashboardWrapper hasPageTemplateTitle>
+          <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+            <Card component="div">
+              <Table
+                gridBreakPoint="grid-xl"
+                header={
+                  <React.Fragment>
+                    <Toolbar id="page-layout-table-column-management-action-toolbar-top">{toolbarItems}</Toolbar>
+                  </React.Fragment>
+                }
+                aria-label="This is a table with checkboxes"
+                id="page-layout-table-column-management-action-table"
+                onSelect={this.onSelect}
+                cells={columns}
+                rows={rows}
+                actions={this.actions}
+                canSelectAll={canSelectAll}
+              >
+                <TableHeader />
+                <TableBody />
+              </Table>
+            </Card>
+          </PageSection>
+        </DashboardWrapper>
         <Pagination
           isCompact
           id="page-layout-table-column-management-action-toolbar-bottom"