From f6e4851d19220950886bbe54a9cb3832816a3c0a Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 4 May 2023 14:36:53 -0400
Subject: [PATCH 1/6] chore(table-demos): update filterable example from legacy
 to new table

---
 packages/react-table/src/docs/demos/Table.md | 124 ++++++++++---------
 1 file changed, 67 insertions(+), 57 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 055d020ca45..d05093994f8 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1076,7 +1076,7 @@ class ColumnManagementAction extends React.Component {
 
 ### Filterable
 
-```js
+```js isFullscreen
 import React from 'react';
 import {
   Button,
@@ -1100,7 +1100,8 @@ import {
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { rows, columns } from '../../examples/Data.jsx';
 
 class FilterTableDemo extends React.Component {
   constructor(props) {
@@ -1115,27 +1116,8 @@ class FilterTableDemo extends React.Component {
       isFilterDropdownOpen: false,
       isCategoryDropdownOpen: false,
       nameInput: '',
-      columns: [
-        { title: 'Servers' },
-        { title: 'Threads' },
-        { title: 'Applications' },
-        { title: 'Workspaces' },
-        { title: 'Status' },
-        { title: 'Location' }
-      ],
-      rows: [
-        { cells: ['US-Node 1', '5', '25', '5', 'Stopped', 'Raleigh'] },
-        { cells: ['US-Node 2', '5', '30', '2', 'Down', 'Westford'] },
-        { cells: ['US-Node 3', '13', '35', '12', 'Degraded', 'Boston'] },
-        { cells: ['US-Node 4', '2', '5', '18', 'Needs Maintainence', 'Raleigh'] },
-        { cells: ['US-Node 5', '7', '30', '5', 'Running', 'Boston'] },
-        { cells: ['US-Node 6', '5', '20', '15', 'Stopped', 'Raleigh'] },
-        { cells: ['CZ-Node 1', '12', '48', '13', 'Down', 'Brno'] },
-        { cells: ['CZ-Node 2', '3', '8', '20', 'Running', 'Brno'] },
-        { cells: ['CZ-Remote-Node 1', '15', '20', '10', 'Down', 'Brno'] },
-        { cells: ['Bangalore-Node 1', '20', '30', '30', 'Running', 'Bangalore'] }
-      ],
-      inputValue: ''
+      inputValue: '',
+      rows: rows.slice(0, 10)
     };
 
     this.onDelete = (type = '', id = '') => {
@@ -1186,22 +1168,6 @@ class FilterTableDemo extends React.Component {
       this.setState({ inputValue: newValue });
     };
 
-    this.onRowSelect = (event, isSelected, rowId) => {
-      let rows;
-      if (rowId === -1) {
-        rows = this.state.rows.map((oneRow) => {
-          oneRow.selected = isSelected;
-          return oneRow;
-        });
-      } else {
-        rows = [...this.state.rows];
-        rows[rowId].selected = isSelected;
-      }
-      this.setState({
-        rows
-      });
-    };
-
     this.onStatusSelect = (event, selection) => {
       const checked = event.target.checked;
       this.setState((prevState) => {
@@ -1291,10 +1257,9 @@ class FilterTableDemo extends React.Component {
 
     const locationMenuItems = [
       <SelectOption key="raleigh" itemId="Raleigh">Raleigh</SelectOption>,
-      <SelectOption key="westford" itemId="Westford">Westford</SelectOption>,
+      <SelectOption key="san francisco" itemId="San Francisco">San Francisco</SelectOption>,
       <SelectOption key="boston" itemId="Boston">Boston</SelectOption>,
-      <SelectOption key="brno" itemId="Brno">Brno</SelectOption>,
-      <SelectOption key="bangalore" itemId="Bangalore">Bangalore</SelectOption>
+      <SelectOption key="atlanta" itemId="Atlanta">Atlanta</SelectOption>,
     ];
 
     const statusMenuItems = [
@@ -1330,13 +1295,13 @@ class FilterTableDemo extends React.Component {
       >
         Degraded
       </SelectOption>,
-      <SelectOption
-        hasCheckbox
-        key="statusMaint"
-        itemId="Needs Maintainence"
-        isSelected={filters.status.includes("Needs Maintainence")}
+      <SelectOption 
+        hasCheckbox 
+        key="statusMaint" 
+        itemId="Needs Maintenance"
+        isSelected={filters.status.includes("Needs Maintenance")}
       >
-        Needs Maintainence
+        Needs Maintenance
       </SelectOption>
     ];
 
@@ -1450,16 +1415,16 @@ class FilterTableDemo extends React.Component {
   }
 
   render() {
-    const { loading, rows, columns, filters } = this.state;
+    const { loading, filters, rows } = this.state;
 
     const filteredRows =
       filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0
         ? rows.filter((row) => {
             return (
               (filters.name.length === 0 ||
-                filters.name.some((name) => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&
-              (filters.location.length === 0 || filters.location.includes(row.cells[5])) &&
-              (filters.status.length === 0 || filters.status.includes(row.cells[4]))
+                filters.name.some((name) => row.name.toLowerCase().includes(name.toLowerCase()))) &&
+              (filters.location.length === 0 || filters.location.includes(row.location)) &&
+              (filters.status.length === 0 || filters.status.includes(row.status))
             );
           })
         : rows;
@@ -1519,14 +1484,59 @@ class FilterTableDemo extends React.Component {
         }
       ];
     }
-    const onSelect = loading || filteredRows.length === 0 ? null : this.onRowSelect; // To remove the select box when there are no rows
+
+  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>
         {this.renderToolbar()}
-        <TableDeprecated cells={columns} rows={tableRows} onSelect={onSelect} aria-label="Filterable Table Demo">
-          <TableHeader />
-          <TableBody />
-        </TableDeprecated>
+         <Table aria-label="Filterable Table Demo">
+              <Thead>
+                <Tr>
+                  <Th key={0}>{columns[0]}</Th>
+                  <Th key={1}>{columns[1]}</Th>
+                  <Th key={2}>{columns[2]}</Th>
+                  <Th key={3}>{columns[3]}</Th>
+                  <Th key={4}>{columns[4]}</Th>
+                  <Th key={5}>{columns[5]}</Th>
+                  <Th key={6}>{columns[6]}</Th>
+                  <Th key={7} width={10}>
+                    {columns[7]}
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {filteredRows.slice(0, 10).map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                    <>
+                      <Td dataLabel={columns[0]}>{row.name}</Td>
+                      <Td dataLabel={columns[1]}>{row.threads}</Td>
+                      <Td dataLabel={columns[2]}>{row.applications}</Td>
+                      <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                      <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                      <Td dataLabel={columns[5]}>{row.location}</Td>
+                      <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                      <Td dataLabel={columns[7]} modifier="truncate">
+                        <TableText>
+                          <a href="#">{row.url}</a>
+                        </TableText>
+                      </Td>
+                    </>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
       </React.Fragment>
     );
   }

From 352508f5b85c8883ceb3fabf3782be9885783460 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 8 May 2023 16:34:40 -0400
Subject: [PATCH 2/6] PR feedback from Nicole

---
 packages/react-table/src/docs/demos/Table.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index d05093994f8..f9a504cbf0f 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1367,7 +1367,6 @@ class FilterTableDemo extends React.Component {
             minWidth="100px"
             onSelect={this.onStatusSelect}
             selected={filters.status}
-            minWidth="200px"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
                 ref={toggleRef}
@@ -1393,7 +1392,6 @@ class FilterTableDemo extends React.Component {
   }
 
   renderToolbar() {
-    const { filters } = this.state;
     return (
       <Toolbar id="toolbar-with-chip-groups" clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint="xl">
         <ToolbarContent>

From 563658f52222753e9e9862e3959f75e978b47f34 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 10 May 2023 09:07:19 -0400
Subject: [PATCH 3/6] add missing imports

---
 packages/react-table/src/docs/demos/Table.md | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index f9a504cbf0f..a64a289e013 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1079,8 +1079,18 @@ class ColumnManagementAction extends React.Component {
 ```js isFullscreen
 import React from 'react';
 import {
+  Badge,
   Button,
   Bullseye,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  Label,
+  MenuToggle,
+  MenuToggleElement,
   Toolbar,
   ToolbarItem,
   ToolbarContent,
@@ -1090,17 +1100,11 @@ import {
   Title,
   Select,
   SelectOption,
-  SearchInput,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
-  EmptyStateFooter
+  SearchInput
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { rows, columns } from '../../examples/Data.jsx';
 
 class FilterTableDemo extends React.Component {

From 9fa515425925bae356dfba2c6fe3c033c8364aaf Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 10 May 2023 15:55:02 -0400
Subject: [PATCH 4/6] sentence case

---
 packages/react-table/src/docs/demos/Table.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index a64a289e013..58cd0a8a5ff 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1302,10 +1302,10 @@ class FilterTableDemo extends React.Component {
       <SelectOption 
         hasCheckbox 
         key="statusMaint" 
-        itemId="Needs Maintenance"
-        isSelected={filters.status.includes("Needs Maintenance")}
+        itemId="Needs maintenance"
+        isSelected={filters.status.includes("Needs maintenance")}
       >
-        Needs Maintenance
+        Needs maintenance
       </SelectOption>
     ];
 
@@ -1493,7 +1493,7 @@ class FilterTableDemo extends React.Component {
         return <Label color="green">{labelText}</Label>;
       case 'Stopped':
         return <Label color="orange">{labelText}</Label>;
-      case 'Needs Maintenance':
+      case 'Needs maintenance':
         return <Label color="blue">{labelText}</Label>;
       case 'Down':
         return <Label color="red">{labelText}</Label>;
@@ -1671,7 +1671,7 @@ class StickyHeaderTableDemo extends React.Component {
           return <Label color="green">{labelText}</Label>;
         case 'Stopped':
           return <Label color="orange">{labelText}</Label>;
-        case 'Needs Maintenance':
+        case 'Needs maintenance':
           return <Label color="blue">{labelText}</Label>;
         case 'Down':
           return <Label color="red">{labelText}</Label>;

From e9268d4809f6776f7856ae69ed1e1667092106f0 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 10 May 2023 15:56:29 -0400
Subject: [PATCH 5/6] remove whitespace

---
 packages/react-table/src/docs/demos/Table.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 58cd0a8a5ff..76a3048a843 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1299,8 +1299,8 @@ class FilterTableDemo extends React.Component {
       >
         Degraded
       </SelectOption>,
-      <SelectOption 
-        hasCheckbox 
+      <SelectOption
+        hasCheckbox
         key="statusMaint" 
         itemId="Needs maintenance"
         isSelected={filters.status.includes("Needs maintenance")}

From 171707e70798dd4cff3481159fa685e9a59d6a6e Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 10 May 2023 15:59:43 -0400
Subject: [PATCH 6/6] remove whitespace

---
 packages/react-table/src/docs/demos/Table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 76a3048a843..5bca5114f60 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1301,7 +1301,7 @@ class FilterTableDemo extends React.Component {
       </SelectOption>,
       <SelectOption
         hasCheckbox
-        key="statusMaint" 
+        key="statusMaint"
         itemId="Needs maintenance"
         isSelected={filters.status.includes("Needs maintenance")}
       >