fix demos, remove table actions that do not support main purpose of c…

…olumn management demos
patternfly · Nov 6, 2023 · 7253c5b · 7253c5b
1 parent 9a26124
commit 7253c5b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 48 deletions.
diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
@@ -137,14 +137,14 @@ export const TableColumnManagement: React.FunctionComponent = () => {
 
   // Filters columns out of table that are not selected in the column management modal
   const filterData = (checked: boolean, name: string) => {
-    const selectedColumn: string = matchSelectedColumnNameToAttr(name);
+    const selectedColumn = matchSelectedColumnNameToAttr(name);
 
-    const filteredRows: any[] = [];
+    const filteredRows: SampleDataRow[] = [];
     if (checked) {
-      const updatedFilters: string[] = filters.filter((item) => item !== selectedColumn);
+      const updatedFilters = filters.filter((item) => item !== selectedColumn);
 
       // Only show the names of columns that were selected in the modal
-      const filteredColumns: string[] = defaultColumns.filter(
+      const filteredColumns = defaultColumns.filter(
         (column) => !updatedFilters.includes(matchSelectedColumnNameToAttr(column))
       );
 
@@ -155,11 +155,11 @@ export const TableColumnManagement: React.FunctionComponent = () => {
       setFilteredColumns(filteredColumns);
       setFilteredRows(filteredRows);
     } else {
-      const updatedFilters: string[] = [...filters];
+      const updatedFilters = filters;
       updatedFilters.push(selectedColumn);
 
       // Only show the names of columns that were selected in the modal
-      const filteredColumns: string[] = managedColumns.filter(
+      const filteredColumns = managedColumns.filter(
         (column) => !filters.includes(matchSelectedColumnNameToAttr(column))
       );
 

diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
@@ -16,8 +16,6 @@ import {
   OverflowMenu,
   OverflowMenuGroup,
   OverflowMenuItem,
-  Pagination,
-  PaginationVariant,
   Text,
   TextContent,
   TextVariants,
@@ -321,7 +319,6 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
   const [check3, setCheck3] = React.useState(true);
   const [check4, setCheck4] = React.useState(true);
   const [check5, setCheck5] = React.useState(true);
-  const canSelectAll = true;
 
   const matchCheckboxNameToColumn = (name: string) => {
     switch (name) {
@@ -424,19 +421,6 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
     setCheck5(true);
   };
 
-  const onSelect = (event: React.FormEvent<HTMLInputElement>, isSelected: boolean, rowId: number) => {
-    let rows;
-    if (rowId === -1) {
-      rows = rows.map((oneRow) => {
-        oneRow.selected = isSelected;
-        return oneRow;
-      });
-    } else {
-      rows = [...rows];
-      rows[rowId] = { ...rows[rowId], selected: isSelected };
-    }
-  };
-
   const renderModal = () => (
     <Modal
       title="Manage columns"
@@ -630,18 +614,6 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
             </OverflowMenuGroup>
           </OverflowMenu>
         </ToolbarItem>
-        <ToolbarItem variant="pagination">
-          <Pagination
-            itemCount={37}
-            widgetId="pagination-options-menu"
-            page={1}
-            variant={PaginationVariant.top}
-            isCompact
-            titles={{
-              paginationAriaLabel: `Draggable column management top pagination`
-            }}
-          />
-        </ToolbarItem>
       </ToolbarContent>
     </React.Fragment>
   );
@@ -655,27 +627,14 @@ export const TableColumnManagementWithDraggable: React.FunctionComponent = () =>
             <Toolbar id="page-layout-table-draggable-column-management-action-toolbar-top">{toolbarItems}</Toolbar>
           </React.Fragment>
         }
-        aria-label="This is a table with checkboxes"
-        onSelect={onSelect}
+        aria-label="Column Management with Draggable Table"
         cells={columns}
         rows={rows}
         actions={actions}
-        canSelectAll={canSelectAll}
       >
         <TableHeader />
         <TableBody />
       </TableDeprecated>
-      <Pagination
-        isCompact
-        id="page-layout-table-draggable-column-management-action-toolbar-bottom"
-        itemCount={37}
-        widgetId="pagination-options-menu-bottom"
-        page={1}
-        variant={PaginationVariant.bottom}
-        titles={{
-          paginationAriaLabel: `Draggable column management bottom pagination`
-        }}
-      />
       {renderModal()}
     </React.Fragment>
   );