From 1d6241c7ab1b9f8478636885534d41644317f6de Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Thu, 9 Nov 2023 14:30:22 -0500
Subject: [PATCH] upgrade sortable demo to TS and v5 Table

---
 .../content/examples/Sortable.tsx             | 219 +++++++-----------
 .../extensions/virtual-scroll-table/react.js  |  12 +-
 .../virtual-scroll-window-scroller/react.js   |   4 +-
 3 files changed, 93 insertions(+), 142 deletions(-)

diff --git a/packages/module/patternfly-docs/content/examples/Sortable.tsx b/packages/module/patternfly-docs/content/examples/Sortable.tsx
index eb2418d..348e6d6 100644
--- a/packages/module/patternfly-docs/content/examples/Sortable.tsx
+++ b/packages/module/patternfly-docs/content/examples/Sortable.tsx
@@ -1,150 +1,101 @@
 import React from 'react';
-import { debounce } from '@patternfly/react-core';
-import { sortable, SortByDirection, TableGridBreakpoint } from '@patternfly/react-table';
-import { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';
+import { Caption, Table, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table';
 import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
 import { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';
 
-export class SortableExample extends React.Component {
-  constructor(props) {
-    super(props);
-    const rows = [];
-    for (let i = 0; i < 100; i++) {
-      rows.push({
-        id: `sortable-row-${i}`,
-        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]
-      });
-    }
-
-    this.sortableVirtualBody = null;
+export const SortableExample: React.FunctionComponent = () => {
+  const rows: { id: string; cells: string[] }[] = [];
+  for (let i = 0; i < 100; i++) {
+    rows.push({
+      id: `sortable-row-${i}`,
+      cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]
+    });
+  }
 
-    this.state = {
-      columns: [
-        {
-          title: 'Repositories',
-          transforms: [sortable],
-          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
-        },
-        {
-          title: 'Branches',
-          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }
-        },
-        {
-          title: 'Pull requests',
-          transforms: [sortable],
-          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }
-        },
-        {
-          title: 'Workspaces',
-          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }
-        },
-        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }
-      ],
-      rows,
-      sortBy: {}
-    };
+  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];
 
-    this.onSort = this.onSort.bind(this);
-    this._handleResize = debounce(this._handleResize.bind(this), 100);
-  }
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number>(-1);
 
-  componentDidMount() {
-    // re-render after resize
-    window.addEventListener('resize', this._handleResize);
-  }
+  // Sort direction of the currently sorted column
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | undefined>();
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this._handleResize);
-  }
+  const getRowIndex = (str: string) => Number(str?.split('-')[1]);
 
-  _handleResize() {
-    this.forceUpdate();
-  }
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    sortBy: {
+      index: activeSortIndex,
+      direction: activeSortDirection
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction as 'desc' | 'asc');
+    },
+    columnIndex
+  });
 
-  onSort(_event, index, direction) {
-    const sortedRows = this.state.rows.sort((a, b) =>
-      // eslint-disable-next-line no-nested-ternary
-      a.cells[index] < b.cells[index] ? -1 : a.cells[index] > b.cells[index] ? 1 : 0
-    );
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      },
-      rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()
-    });
+  if (activeSortIndex !== null) {
+    rows.sort((a, b) => {
+      const aValue = a.cells[activeSortIndex];
+      const bValue = b.cells[activeSortIndex];
 
-    this.sortableVirtualBody.forceUpdateVirtualGrid();
-  }
+      const aValueIndex = getRowIndex(aValue);
+      const bValueIndex = getRowIndex(bValue);
 
-  render() {
-    const { sortBy, columns, rows } = this.state;
+      if (activeSortDirection === 'asc') {
+        return aValueIndex - bValueIndex;
+      }
 
-    const measurementCache = new CellMeasurerCache({
-      fixedWidth: true,
-      minHeight: 44,
-      keyMapper: (rowIndex) => rowIndex
+      return bValueIndex - aValueIndex;
     });
+  }
 
-    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {
-      const { rows, columns } = this.state;
-
-      return (
-        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
-          <tr style={style} role="row">
-            <td className={columns[0].props.className} role="gridcell">
-              {rows[index].cells[0]}
-            </td>
-            <td className={columns[1].props.className} role="gridcell">
-              {rows[index].cells[1]}
-            </td>
-            <td className={columns[2].props.className} role="gridcell">
-              {rows[index].cells[2]}
-            </td>
-            <td className={columns[3].props.className} role="gridcell">
-              {rows[index].cells[3]}
-            </td>
-            <td className={columns[4].props.className} role="gridcell">
-              {rows[index].cells[4]}
-            </td>
-          </tr>
-        </CellMeasurer>
-      );
-    };
+  const measurementCache = new CellMeasurerCache({
+    fixedWidth: true,
+    minHeight: 44,
+    keyMapper: (rowIndex) => rowIndex
+  });
 
-    return (
-      <div aria-label="Scrollable Table" className="pf-v5-c-scrollablegrid">
-        <TableDeprecated
-          caption="Sortable Virtualized Table"
-          cells={columns}
-          rows={rows}
-          gridBreakPoint={TableGridBreakpoint.none}
-          sortBy={sortBy}
-          onSort={this.onSort}
-          role="grid"
-          aria-rowcount={rows.length}
-        >
-          <TableHeaderDeprecated />
-        </TableDeprecated>
-        <AutoSizer disableHeight>
-          {({ width }) => (
-            <VirtualTableBody
-              ref={(ref) => (this.sortableVirtualBody = ref)}
-              className="pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller"
-              deferredMeasurementCache={measurementCache}
-              rowHeight={measurementCache.rowHeight}
-              height={400}
-              overscanRowCount={2}
-              columnCount={1}
-              rows={rows}
-              rowCount={rows.length}
-              rowRenderer={rowRenderer}
-              width={width}
-              role="grid"
-            />
-          )}
-        </AutoSizer>
-      </div>
-    );
-  }
-}
+  const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (
+    <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}>
+      <Tr style={style}>
+        {columns.map((col, index) => (
+          <Td key={`${rowIndex}-${index + 1}`}>{rows[rowIndex].cells[index]}</Td>
+        ))}
+      </Tr>
+    </CellMeasurer>
+  );
+  return (
+    <div aria-label="Scrollable Table" className="pf-v5-c-scrollablegrid">
+      <Table aria-label="Sortable table" ouiaId="SortableTable">
+        <Caption>Sortable Virtualized Table</Caption>
+        <Thead>
+          <Tr>
+            <Th sort={getSortParams(0)}>{columns[0]}</Th>
+            <Th>{columns[1]}</Th>
+            <Th sort={getSortParams(2)}>{columns[2]}</Th>
+            <Th>{columns[3]}</Th>
+            <Th>{columns[4]}</Th>
+          </Tr>
+        </Thead>
+      </Table>
+      <AutoSizer disableHeight>
+        {({ width }) => (
+          <VirtualTableBody
+            ref={(ref) => ref}
+            className="pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller"
+            deferredMeasurementCache={measurementCache}
+            rowHeight={measurementCache.rowHeight}
+            height={400}
+            overscanRowCount={2}
+            columnCount={1}
+            rows={rows}
+            rowCount={rows.length}
+            rowRenderer={rowRenderer}
+            width={width}
+            role="grid"
+          />
+        )}
+      </AutoSizer>
+    </div>
+  );
+};
diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js
index 3b6a220..d73fdba 100644
--- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js
+++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-table/react.js
@@ -204,27 +204,27 @@ pageData.relativeImports = {
 };
 pageData.examples = {
   'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport class VirtualizedExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      rows.push({\n        id: `basic-row-${i}`,\n        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n      });\n    }\n\n    this.state = {\n      columns: [\n        {\n          title: 'Repositories',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Branches',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Pull requests',\n          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n        },\n        {\n          title: 'Workspaces',\n          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n        },\n        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n      ],\n      rows\n    };\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this.forceUpdate();\n  }\n\n  render() {\n    const { columns, rows } = this.state;\n\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n      const { rows, columns } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr style={style} role=\"row\">\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {rows[index].cells[0]}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {rows[index].cells[1]}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {rows[index].cells[2]}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {rows[index].cells[3]}\n            </td>\n            <td className={columns[4].props.className} role=\"gridcell\">\n              {rows[index].cells[4]}\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n        <TableDeprecated\n          caption=\"Simple Table\"\n          cells={columns}\n          rows={rows}\n          gridBreakPoint={TableGridBreakpoint.none}\n          aria-rowcount={rows.length}\n        >\n          <TableHeaderDeprecated />\n        </TableDeprecated>\n        <AutoSizer disableHeight>\n          {({ width }) => (\n            <VirtualTableBody\n              className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n              deferredMeasurementCache={measurementCache}\n              rowHeight={measurementCache.rowHeight}\n              height={400}\n              overscanRowCount={2}\n              columnCount={1}\n              rows={rows}\n              rowCount={rows.length}\n              rowRenderer={rowRenderer}\n              width={width}\n              role=\"grid\"\n            />\n          )}\n        </AutoSizer>\n      </div>\n    );\n  }\n}\n","title":"Basic","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport class VirtualizedExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      rows.push({\n        id: `basic-row-${i}`,\n        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n      });\n    }\n\n    this.state = {\n      columns: [\n        {\n          title: 'Repositories',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Branches',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Pull requests',\n          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n        },\n        {\n          title: 'Workspaces',\n          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n        },\n        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n      ],\n      rows\n    };\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this.forceUpdate();\n  }\n\n  render() {\n    const { columns, rows } = this.state;\n\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n      const { rows, columns } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr style={style} role=\"row\">\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {rows[index].cells[0]}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {rows[index].cells[1]}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {rows[index].cells[2]}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {rows[index].cells[3]}\n            </td>\n            <td className={columns[4].props.className} role=\"gridcell\">\n              {rows[index].cells[4]}\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n        <TableDeprecated\n          caption=\"Simple Table\"\n          cells={columns}\n          rows={rows}\n          gridBreakPoint={TableGridBreakpoint.none}\n          aria-rowcount={rows.length}\n        >\n          <TableHeaderDeprecated />\n        </TableDeprecated>\n        <AutoSizer disableHeight>\n          {({ width }) => (\n            <VirtualTableBody\n              className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n              deferredMeasurementCache={measurementCache}\n              rowHeight={measurementCache.rowHeight}\n              height={400}\n              overscanRowCount={2}\n              columnCount={1}\n              rows={rows}\n              rowCount={rows.length}\n              rowRenderer={rowRenderer}\n              width={width}\n              role=\"grid\"\n            />\n          )}\n        </AutoSizer>\n      </div>\n    );\n  }\n}\n","title":"Basic","lang":"js"}}>
       
     </Example>,
   'Using composable table components': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\n\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\nimport { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table';\n\nexport const ComposableTableVirtualized = () => {\n  const rows = [];\n  for (let i = 0; i < 100; i++) {\n    rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n  }\n  const [selected, setSelected] = React.useState(rows.map((row) => false));\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n  const onSelect = (event, isSelected, rowId) => {\n    setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n  };\n\n  const measurementCache = new CellMeasurerCache({\n    fixedWidth: true,\n    minHeight: 44,\n    keyMapper: (rowIndex) => rowIndex\n  });\n\n  const rowRenderer = ({ index: rowIndex, isScrolling, key, style, parent }) => (\n    <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}>\n      <Tr style={style}>\n        <Td\n          key={`${rowIndex}_0`}\n          select={{\n            rowIndex,\n            onSelect: onSelect,\n            isSelected: selected[rowIndex]\n          }}\n        />\n        {columns.map((col, index) => (\n          <Td key={`${rowIndex}-${index + 1}`}>{rows[rowIndex][index]}</Td>\n        ))}\n      </Tr>\n    </CellMeasurer>\n  );\n\n  return (\n    <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n      <Table gridBreakPoint={TableGridBreakpoint.none} aria-rowcount={rows.length}>\n        <Caption>Virtualized table with composable table components</Caption>\n        <Thead>\n          <Tr>\n            <Th className=\"pf-v5-c-table__check\" />\n            {columns.map((col, index) => (\n              <Th key={++index}>{col}</Th>\n            ))}\n          </Tr>\n        </Thead>\n      </Table>\n      <AutoSizer disableHeight>\n        {({ width }) => (\n          <VirtualTableBody\n            className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n            deferredMeasurementCache={measurementCache}\n            rowHeight={measurementCache.rowHeight}\n            height={400}\n            overscanRowCount={2}\n            columnCount={1}\n            rows={rows}\n            rowCount={rows.length}\n            rowRenderer={rowRenderer}\n            width={width}\n            role=\"grid\"\n          />\n        )}\n      </AutoSizer>\n    </div>\n  );\n};\n","title":"Using composable table components","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\n\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\nimport { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table';\n\nexport const ComposableTableVirtualized = () => {\n  const rows = [];\n  for (let i = 0; i < 100; i++) {\n    rows.push([`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]);\n  }\n  const [selected, setSelected] = React.useState(rows.map((_row) => false));\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n  const onSelect = (event, isSelected, rowId) => {\n    setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n  };\n\n  const measurementCache = new CellMeasurerCache({\n    fixedWidth: true,\n    minHeight: 44,\n    keyMapper: (rowIndex) => rowIndex\n  });\n\n  const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n    <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}>\n      <Tr style={style}>\n        <Td\n          key={`${rowIndex}_0`}\n          select={{\n            rowIndex,\n            onSelect,\n            isSelected: selected[rowIndex]\n          }}\n        />\n        {columns.map((col, index) => (\n          <Td key={`${rowIndex}-${index + 1}`}>{rows[rowIndex][index]}</Td>\n        ))}\n      </Tr>\n    </CellMeasurer>\n  );\n\n  return (\n    <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n      <Table gridBreakPoint={TableGridBreakpoint.none} aria-rowcount={rows.length}>\n        <Caption>Virtualized table with composable table components</Caption>\n        <Thead>\n          <Tr>\n            <Th className=\"pf-v5-c-table__check\" />\n            {columns.map((col, index) => (\n              <Th key={++index}>{col}</Th>\n            ))}\n          </Tr>\n        </Thead>\n      </Table>\n      <AutoSizer disableHeight>\n        {({ width }) => (\n          <VirtualTableBody\n            className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n            deferredMeasurementCache={measurementCache}\n            rowHeight={measurementCache.rowHeight}\n            height={400}\n            overscanRowCount={2}\n            columnCount={1}\n            rows={rows}\n            rowCount={rows.length}\n            rowRenderer={rowRenderer}\n            width={width}\n            role=\"grid\"\n          />\n        )}\n      </AutoSizer>\n    </div>\n  );\n};\n","title":"Using composable table components","lang":"js"}}>
       
     </Example>,
   'Sortable': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { sortable, SortByDirection, TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport class SortableExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      rows.push({\n        id: `sortable-row-${i}`,\n        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n      });\n    }\n\n    this.sortableVirtualBody = null;\n\n    this.state = {\n      columns: [\n        {\n          title: 'Repositories',\n          transforms: [sortable],\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Branches',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Pull requests',\n          transforms: [sortable],\n          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n        },\n        {\n          title: 'Workspaces',\n          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n        },\n        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n      ],\n      rows,\n      sortBy: {}\n    };\n\n    this.onSort = this.onSort.bind(this);\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this.forceUpdate();\n  }\n\n  onSort(_event, index, direction) {\n    const sortedRows = this.state.rows.sort((a, b) =>\n      a.cells[index] < b.cells[index] ? -1 : a.cells[index] > b.cells[index] ? 1 : 0\n    );\n    this.setState({\n      sortBy: {\n        index,\n        direction\n      },\n      rows: direction === SortByDirection.asc ? sortedRows : sortedRows.reverse()\n    });\n\n    this.sortableVirtualBody.forceUpdateVirtualGrid();\n  }\n\n  render() {\n    const { sortBy, columns, rows } = this.state;\n\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n      const { rows, columns } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr style={style} role=\"row\">\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {rows[index].cells[0]}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {rows[index].cells[1]}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {rows[index].cells[2]}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {rows[index].cells[3]}\n            </td>\n            <td className={columns[4].props.className} role=\"gridcell\">\n              {rows[index].cells[4]}\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n        <TableDeprecated\n          caption=\"Sortable Virtualized Table\"\n          cells={columns}\n          rows={rows}\n          gridBreakPoint={TableGridBreakpoint.none}\n          sortBy={sortBy}\n          onSort={this.onSort}\n          role=\"grid\"\n          aria-rowcount={rows.length}\n        >\n          <TableHeaderDeprecated />\n        </TableDeprecated>\n        <AutoSizer disableHeight>\n          {({ width }) => (\n            <VirtualTableBody\n              ref={(ref) => (this.sortableVirtualBody = ref)}\n              className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n              deferredMeasurementCache={measurementCache}\n              rowHeight={measurementCache.rowHeight}\n              height={400}\n              overscanRowCount={2}\n              columnCount={1}\n              rows={rows}\n              rowCount={rows.length}\n              rowRenderer={rowRenderer}\n              width={width}\n              role=\"grid\"\n            />\n          )}\n        </AutoSizer>\n      </div>\n    );\n  }\n}\n","title":"Sortable","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { Caption, Table, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport const SortableExample: React.FunctionComponent = () => {\n  const rows: { id: string; cells: string[] }[] = [];\n  for (let i = 0; i < 100; i++) {\n    rows.push({\n      id: `sortable-row-${i}`,\n      cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n    });\n  }\n\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n\n  const [activeSortIndex, setActiveSortIndex] = React.useState<number>(-1);\n\n  // Sort direction of the currently sorted column\n  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | undefined>();\n\n  const getRowIndex = (str: string) => Number(str?.split('-')[1]);\n\n  const getSortParams = (columnIndex: number): ThProps['sort'] => ({\n    sortBy: {\n      index: activeSortIndex,\n      direction: activeSortDirection\n    },\n    onSort: (_event, index, direction) => {\n      setActiveSortIndex(index);\n      setActiveSortDirection(direction as 'desc' | 'asc');\n    },\n    columnIndex\n  });\n\n  if (activeSortIndex !== null) {\n    rows.sort((a, b) => {\n      const aValue = a.cells[activeSortIndex];\n      const bValue = b.cells[activeSortIndex];\n\n      const aValueIndex = getRowIndex(aValue);\n      const bValueIndex = getRowIndex(bValue);\n\n      if (activeSortDirection === 'asc') {\n        return aValueIndex - bValueIndex;\n      }\n\n      return bValueIndex - aValueIndex;\n    });\n  }\n\n  const measurementCache = new CellMeasurerCache({\n    fixedWidth: true,\n    minHeight: 44,\n    keyMapper: (rowIndex) => rowIndex\n  });\n\n  const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => (\n    <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}>\n      <Tr style={style}>\n        {columns.map((col, index) => (\n          <Td key={`${rowIndex}-${index + 1}`}>{rows[rowIndex].cells[index]}</Td>\n        ))}\n      </Tr>\n    </CellMeasurer>\n  );\n  return (\n    <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n      <Table aria-label=\"Sortable table\" ouiaId=\"SortableTable\">\n        <Caption>Sortable Virtualized Table</Caption>\n        <Thead>\n          <Tr>\n            <Th sort={getSortParams(0)}>{columns[0]}</Th>\n            <Th>{columns[1]}</Th>\n            <Th sort={getSortParams(2)}>{columns[2]}</Th>\n            <Th>{columns[3]}</Th>\n            <Th>{columns[4]}</Th>\n          </Tr>\n        </Thead>\n      </Table>\n      <AutoSizer disableHeight>\n        {({ width }) => (\n          <VirtualTableBody\n            ref={(ref) => ref}\n            className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n            deferredMeasurementCache={measurementCache}\n            rowHeight={measurementCache.rowHeight}\n            height={400}\n            overscanRowCount={2}\n            columnCount={1}\n            rows={rows}\n            rowCount={rows.length}\n            rowRenderer={rowRenderer}\n            width={width}\n            role=\"grid\"\n          />\n        )}\n      </AutoSizer>\n    </div>\n  );\n};\n","title":"Sortable","lang":"js"}}>
       
     </Example>,
   'Selectable': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { headerCol, TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport class SelectableExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      rows.push({\n        selected: false,\n        id: `selectable-row-${i}`,\n        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n      });\n    }\n\n    this.selectableVirtualBody = null;\n\n    this.state = {\n      columns: [\n        // headerCol transform adds checkbox column with pf-m-2-sm, pf-m-1-md+ column space\n        {\n          title: 'Repositories',\n          cellTransforms: [headerCol()],\n          props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Pull requests',\n          props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl' }\n        },\n        {\n          title: 'Workspaces',\n          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n        },\n        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n      ],\n      rows\n    };\n\n    this.onSelect = this.onSelect.bind(this);\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this.forceUpdate();\n  }\n\n  onSelect(event, isSelected, virtualRowIndex, rowData) {\n    let rows;\n    if (virtualRowIndex === -1) {\n      rows = this.state.rows.map((oneRow) => {\n        oneRow.selected = isSelected;\n        return oneRow;\n      });\n    } else {\n      rows = [...this.state.rows];\n      const rowIndex = rows.findIndex((r) => r.id === rowData.id);\n      rows[rowIndex] = { ...rows[rowIndex], selected: isSelected };\n    }\n    this.setState({\n      rows\n    });\n    this.selectableVirtualBody.forceUpdateVirtualGrid();\n  }\n\n  render() {\n    const { columns, rows } = this.state;\n\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n      const { rows, columns } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr data-id={index} style={style} role=\"row\">\n            <td data-key=\"0\" className=\"pf-v5-c-table__check\" role=\"gridcell\">\n              <input\n                type=\"checkbox\"\n                aria-label={`Select row ${index}`}\n                checked={rows[index].selected}\n                onChange={(e) => {\n                  this.onSelect(e, e.target.checked, 0, { id: rows[index].id });\n                }}\n              />\n            </td>\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {rows[index].cells[0]}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {rows[index].cells[1]}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {rows[index].cells[2]}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {rows[index].cells[3]}\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n        <TableDeprecated\n          caption=\"Selectable Virtualized Table\"\n          cells={columns}\n          rows={rows}\n          gridBreakPoint={TableGridBreakpoint.none}\n          onSelect={this.onSelect}\n          aria-rowcount={rows.length}\n        >\n          <TableHeaderDeprecated />\n        </TableDeprecated>\n        <AutoSizer disableHeight>\n          {({ width }) => (\n            <VirtualTableBody\n              ref={(ref) => (this.selectableVirtualBody = ref)}\n              className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n              deferredMeasurementCache={measurementCache}\n              rowHeight={measurementCache.rowHeight}\n              height={400}\n              overscanRowCount={2}\n              columnCount={1}\n              rows={rows}\n              rowCount={rows.length}\n              rowRenderer={rowRenderer}\n              width={width}\n              role=\"grid\"\n            />\n          )}\n        </AutoSizer>\n      </div>\n    );\n  }\n}\n","title":"Selectable","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { headerCol, TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport class SelectableExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      rows.push({\n        selected: false,\n        id: `selectable-row-${i}`,\n        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n      });\n    }\n\n    this.selectableVirtualBody = null;\n\n    this.state = {\n      columns: [\n        // headerCol transform adds checkbox column with pf-m-2-sm, pf-m-1-md+ column space\n        {\n          title: 'Repositories',\n          cellTransforms: [headerCol()],\n          props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Pull requests',\n          props: { className: 'pf-m-5-col-on-sm pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl' }\n        },\n        {\n          title: 'Workspaces',\n          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n        },\n        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n      ],\n      rows\n    };\n\n    this.onSelect = this.onSelect.bind(this);\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this.forceUpdate();\n  }\n\n  onSelect(event, isSelected, virtualRowIndex, rowData) {\n    let rows;\n    if (virtualRowIndex === -1) {\n      rows = this.state.rows.map((oneRow) => {\n        oneRow.selected = isSelected;\n        return oneRow;\n      });\n    } else {\n      rows = [...this.state.rows];\n      const rowIndex = rows.findIndex((r) => r.id === rowData.id);\n      rows[rowIndex] = { ...rows[rowIndex], selected: isSelected };\n    }\n    this.setState({\n      rows\n    });\n    this.selectableVirtualBody.forceUpdateVirtualGrid();\n  }\n\n  render() {\n    const { columns, rows } = this.state;\n\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n      const { rows, columns } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr data-id={index} style={style} role=\"row\">\n            <td data-key=\"0\" className=\"pf-v5-c-table__check\" role=\"gridcell\">\n              <input\n                type=\"checkbox\"\n                aria-label={`Select row ${index}`}\n                checked={rows[index].selected}\n                onChange={(e) => {\n                  this.onSelect(e, e.target.checked, 0, { id: rows[index].id });\n                }}\n              />\n            </td>\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {rows[index].cells[0]}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {rows[index].cells[1]}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {rows[index].cells[2]}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {rows[index].cells[3]}\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n        <TableDeprecated\n          caption=\"Selectable Virtualized Table\"\n          cells={columns}\n          rows={rows}\n          gridBreakPoint={TableGridBreakpoint.none}\n          onSelect={this.onSelect}\n          aria-rowcount={rows.length}\n        >\n          <TableHeaderDeprecated />\n        </TableDeprecated>\n        <AutoSizer disableHeight>\n          {({ width }) => (\n            <VirtualTableBody\n              ref={(ref) => (this.selectableVirtualBody = ref)}\n              className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n              deferredMeasurementCache={measurementCache}\n              rowHeight={measurementCache.rowHeight}\n              height={400}\n              overscanRowCount={2}\n              columnCount={1}\n              rows={rows}\n              rowCount={rows.length}\n              rowRenderer={rowRenderer}\n              width={width}\n              role=\"grid\"\n            />\n          )}\n        </AutoSizer>\n      </div>\n    );\n  }\n}\n","title":"Selectable","lang":"js"}}>
       
     </Example>,
   'Actions': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { ActionsColumn, TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport class ActionsExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      rows.push({\n        disableActions: i % 3 === 2,\n        id: `actions-row-${i}`,\n        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n      });\n    }\n\n    this.actionsVirtualBody = null;\n\n    this.state = {\n      columns: [\n        { title: 'Name', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } },\n        {\n          title: 'Namespace',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Labels',\n          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n        },\n        { title: 'Status', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } },\n        { title: 'Pod Selector', props: { className: 'pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-xl' } },\n        { title: '', props: { className: 'pf-v5-c-table__action' } }\n      ],\n      rows,\n      actions: [\n        {\n          title: 'Some action',\n          onClick: (event, rowId, rowData, extra) => console.log('clicked on Some action, on row: ', rowId)\n        },\n        {\n          title: <div>Another action</div>,\n          onClick: (event, rowId, rowData, extra) => console.log('clicked on Another action, on row: ', rowId)\n        },\n        {\n          isSeparator: true\n        },\n        {\n          title: 'Third action',\n          onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId)\n        }\n      ]\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this.forceUpdate();\n  }\n\n  render() {\n    const { columns, rows } = this.state;\n\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n      const { rows, columns, actions } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr data-id={index} style={style} role=\"row\">\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {rows[index].cells[0]}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {rows[index].cells[1]}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {rows[index].cells[2]}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {rows[index].cells[3]}\n            </td>\n            <td className={columns[4].props.className} role=\"gridcell\">\n              {rows[index].cells[4]}\n            </td>\n            <td className={columns[5].props.className} role=\"gridcell\">\n              <ActionsColumn\n                items={actions}\n                rowData={rows[index]}\n                extraData={{ rowIndex: index }}\n                isDisabled={rows[index].disableActions}\n              />\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n        <TableDeprecated\n          caption=\"Actions Virtualized Table\"\n          cells={columns}\n          rows={rows}\n          gridBreakPoint={TableGridBreakpoint.none}\n          aria-rowcount={rows.length}\n        >\n          <TableHeaderDeprecated />\n        </TableDeprecated>\n        <AutoSizer disableHeight>\n          {({ width }) => (\n            <VirtualTableBody\n              ref={(ref) => (this.actionsVirtualBody = ref)}\n              className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n              deferredMeasurementCache={measurementCache}\n              rowHeight={measurementCache.rowHeight}\n              height={400}\n              overscanRowCount={2}\n              columnCount={1}\n              rows={rows}\n              rowCount={rows.length}\n              rowRenderer={rowRenderer}\n              width={width}\n              role=\"grid\"\n            />\n          )}\n        </AutoSizer>\n      </div>\n    );\n  }\n}\n","title":"Actions","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"/* eslint-disable no-console */\nimport React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { ActionsColumn, TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody } from '@patternfly/react-virtualized-extension';\n\nexport class ActionsExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      rows.push({\n        disableActions: i % 3 === 2,\n        id: `actions-row-${i}`,\n        cells: [`one-${i}`, `two-${i}`, `three-${i}`, `four-${i}`, `five-${i}`]\n      });\n    }\n\n    this.actionsVirtualBody = null;\n\n    this.state = {\n      columns: [\n        { title: 'Name', props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' } },\n        {\n          title: 'Namespace',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Labels',\n          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n        },\n        { title: 'Status', props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' } },\n        { title: 'Pod Selector', props: { className: 'pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-xl' } },\n        { title: '', props: { className: 'pf-v5-c-table__action' } }\n      ],\n      rows,\n      actions: [\n        {\n          title: 'Some action',\n          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Some action, on row: ', rowId)\n        },\n        {\n          title: <div>Another action</div>,\n          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Another action, on row: ', rowId)\n        },\n        {\n          isSeparator: true\n        },\n        {\n          title: 'Third action',\n          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Third action, on row: ', rowId)\n        }\n      ]\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this.forceUpdate();\n  }\n\n  render() {\n    const { columns, rows } = this.state;\n\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n      const { rows, columns, actions } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr data-id={index} style={style} role=\"row\">\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {rows[index].cells[0]}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {rows[index].cells[1]}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {rows[index].cells[2]}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {rows[index].cells[3]}\n            </td>\n            <td className={columns[4].props.className} role=\"gridcell\">\n              {rows[index].cells[4]}\n            </td>\n            <td className={columns[5].props.className} role=\"gridcell\">\n              <ActionsColumn\n                items={actions}\n                rowData={rows[index]}\n                extraData={{ rowIndex: index }}\n                isDisabled={rows[index].disableActions}\n              />\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n        <TableDeprecated\n          caption=\"Actions Virtualized Table\"\n          cells={columns}\n          rows={rows}\n          gridBreakPoint={TableGridBreakpoint.none}\n          aria-rowcount={rows.length}\n        >\n          <TableHeaderDeprecated />\n        </TableDeprecated>\n        <AutoSizer disableHeight>\n          {({ width }) => (\n            <VirtualTableBody\n              ref={(ref) => (this.actionsVirtualBody = ref)}\n              className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n              deferredMeasurementCache={measurementCache}\n              rowHeight={measurementCache.rowHeight}\n              height={400}\n              overscanRowCount={2}\n              columnCount={1}\n              rows={rows}\n              rowCount={rows.length}\n              rowRenderer={rowRenderer}\n              width={width}\n              role=\"grid\"\n            />\n          )}\n        </AutoSizer>\n      </div>\n    );\n  }\n}\n","title":"Actions","lang":"js"}}>
       
     </Example>,
   'Filterable with WindowScroller': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport {\n  Button,\n  ButtonVariant,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarFilter,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  InputGroup,\n  InputGroupItem,\n  TextInput\n} from '@patternfly/react-core';\nimport { debounce } from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport { ActionsColumn } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport {\n  Dropdown as DropdownDeprecated,\n  DropdownItem as DropdownItemDeprecated,\n  DropdownPosition as DropdownPositionDeprecated,\n  DropdownToggle as DropdownToggleDeprecated,\n  Select as SelectDeprecated,\n  SelectOption as SelectOptionDeprecated,\n  SelectVariant as SelectVariantDeprecated\n} from '@patternfly/react-core/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';\n\nexport class FilterExample extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.actionsVirtualBody = null;\n\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      const data = {};\n      if (i % 2 === 0) {\n        data.cells = [`US-Node ${i}`, i, i, 'Down', 'Brno'];\n      } else if (i % 3 === 0) {\n        data.cells = [`CN-Node ${i}`, i, i, 'Running', 'Westford'];\n      } else {\n        data.cells = [`US-Node ${i}`, i, i, 'Stopped', 'Raleigh'];\n      }\n      rows.push(data);\n    }\n    this.scrollableElement = React.createRef();\n\n    this.state = {\n      scrollableElement: null,\n\n      filters: {\n        location: [],\n        name: [],\n        status: []\n      },\n      currentCategory: 'Name',\n      isFilterDropdownOpen: false,\n      isCategoryDropdownOpen: false,\n      nameInput: '',\n      columns: [\n        { title: 'Servers' },\n        { title: 'Threads' },\n        { title: 'Applications' },\n        { title: 'Status' },\n        { title: 'Location' }\n      ],\n      rows,\n      inputValue: '',\n      actions: [\n        {\n          title: 'Some action',\n          onClick: (event, rowId, rowData, extra) => console.log('clicked on Some action, on row: ', rowId)\n        },\n        {\n          title: <div>Another action</div>,\n          onClick: (event, rowId, rowData, extra) => console.log('clicked on Another action, on row: ', rowId)\n        },\n        {\n          isSeparator: true\n        },\n        {\n          title: 'Third action',\n          onClick: (event, rowId, rowData, extra) => console.log('clicked on Third action, on row: ', rowId)\n        }\n      ]\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n\n    this.onDelete = (type = '', id = '') => {\n      if (type) {\n        this.setState((prevState) => {\n          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);\n          return {\n            filters: prevState.filters\n          };\n        });\n      } else {\n        this.setState({\n          filters: {\n            location: [],\n            name: [],\n            status: []\n          },\n          inputValue: ''\n        });\n      }\n    };\n\n    this.onCategoryToggle = (_event, isOpen) => {\n      this.setState({\n        isCategoryDropdownOpen: isOpen\n      });\n    };\n\n    this.onCategorySelect = (event) => {\n      this.setState({\n        currentCategory: event.target.innerText,\n        isCategoryDropdownOpen: !this.state.isCategoryDropdownOpen\n      });\n    };\n\n    this.onFilterToggle = (_event, isOpen) => {\n      this.setState({\n        isFilterDropdownOpen: isOpen\n      });\n    };\n\n    this.onFilterSelect = (event) => {\n      this.setState({\n        isFilterDropdownOpen: !this.state.isFilterDropdownOpen\n      });\n    };\n\n    this.onInputChange = (_event, newValue) => {\n      // this.setState({ inputValue: newValue });\n      if (newValue === '') {\n        this.onDelete();\n        this.setState({\n          inputValue: newValue\n        });\n      } else {\n        this.setState((prevState) => {\n          return {\n            filters: {\n              ...prevState.filters,\n              ['name']: [newValue]\n            },\n            inputValue: newValue\n          };\n        });\n      }\n    };\n\n    this.onRowSelect = (event, isSelected, rowId) => {\n      let rows;\n      if (rowId === -1) {\n        rows = this.state.rows.map((oneRow) => {\n          oneRow.selected = isSelected;\n          return oneRow;\n        });\n      } else {\n        rows = [...this.state.rows];\n        rows[rowId].selected = isSelected;\n      }\n      this.setState({\n        rows\n      });\n    };\n\n    this.onStatusSelect = (event, selection) => {\n      const checked = event.target.checked;\n      this.setState((prevState) => {\n        const prevSelections = prevState.filters['status'];\n        return {\n          filters: {\n            ...prevState.filters,\n            status: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)\n          }\n        };\n      });\n    };\n\n    this.onNameInput = (event) => {\n      if (event.key && event.key !== 'Enter') {\n        return;\n      }\n\n      const { inputValue } = this.state;\n      this.setState((prevState) => {\n        const prevFilters = prevState.filters['name'];\n        return {\n          filters: {\n            ...prevState.filters,\n            ['name']: prevFilters.includes(inputValue) ? prevFilters : [...prevFilters, inputValue]\n          },\n          inputValue: ''\n        };\n      });\n    };\n\n    this.onLocationSelect = (event, selection) => {\n      this.setState((prevState) => {\n        return {\n          filters: {\n            ...prevState.filters,\n            ['location']: [selection]\n          }\n        };\n      });\n      this.onFilterSelect();\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n    this._bindBodyRef = this._bindBodyRef.bind(this);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n\n    setTimeout(() => {\n      const scollableElement = document.getElementById('content-scrollable-1');\n      this.setState({ scollableElement });\n    });\n\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this._cellMeasurementCache.clearAll();\n    this._bodyRef.recomputeVirtualGridSize();\n  }\n\n  _bindBodyRef(ref) {\n    this._bodyRef = ref;\n  }\n\n  buildCategoryDropdown() {\n    const { isCategoryDropdownOpen, currentCategory } = this.state;\n\n    return (\n      <ToolbarItem>\n        <DropdownDeprecated\n          onSelect={this.onCategorySelect}\n          position={DropdownPositionDeprecated.left}\n          toggle={\n            <DropdownToggleDeprecated onToggle={this.onCategoryToggle} style={{ width: '100%' }}>\n              <FilterIcon /> {currentCategory}\n            </DropdownToggleDeprecated>\n          }\n          isOpen={isCategoryDropdownOpen}\n          dropdownItems={[\n            <DropdownItemDeprecated key=\"cat1\">Location</DropdownItemDeprecated>,\n            <DropdownItemDeprecated key=\"cat2\">Name</DropdownItemDeprecated>,\n            <DropdownItemDeprecated key=\"cat3\">Status</DropdownItemDeprecated>\n          ]}\n          style={{ width: '100%' }}\n        ></DropdownDeprecated>\n      </ToolbarItem>\n    );\n  }\n\n  buildFilterDropdown() {\n    const { currentCategory, isFilterDropdownOpen, inputValue, filters } = this.state;\n\n    const locationMenuItems = [\n      <SelectOptionDeprecated key=\"raleigh\" value=\"Raleigh\" />,\n      <SelectOptionDeprecated key=\"westford\" value=\"Westford\" />,\n      <SelectOptionDeprecated key=\"boston\" value=\"Boston\" />,\n      <SelectOptionDeprecated key=\"brno\" value=\"Brno\" />,\n      <SelectOptionDeprecated key=\"bangalore\" value=\"Bangalore\" />\n    ];\n\n    const statusMenuItems = [\n      <SelectOptionDeprecated key=\"statusRunning\" value=\"Running\" />,\n      <SelectOptionDeprecated key=\"statusStopped\" value=\"Stopped\" />,\n      <SelectOptionDeprecated key=\"statusDown\" value=\"Down\" />,\n      <SelectOptionDeprecated key=\"statusDegraded\" value=\"Degraded\" />,\n      <SelectOptionDeprecated key=\"statusMaint\" value=\"Needs Maintainence\" />\n    ];\n\n    return (\n      <React.Fragment>\n        <ToolbarFilter\n          chips={filters.location}\n          deleteChip={this.onDelete}\n          categoryName=\"Location\"\n          showToolbarItem={currentCategory === 'Location'}\n        >\n          <SelectDeprecated\n            aria-label=\"Location\"\n            onToggle={this.onFilterToggle}\n            onSelect={this.onLocationSelect}\n            selections={filters.location[0]}\n            isOpen={isFilterDropdownOpen}\n            placeholderText=\"Any\"\n          >\n            {locationMenuItems}\n          </SelectDeprecated>\n        </ToolbarFilter>\n        <ToolbarFilter\n          chips={filters.name}\n          deleteChip={this.onDelete}\n          categoryName=\"Name\"\n          showToolbarItem={currentCategory === 'Name'}\n        >\n          <InputGroup>\n            <InputGroupItem isFill>\n              <TextInput\n                name=\"nameInput\"\n                id=\"nameInput1\"\n                type=\"search\"\n                aria-label=\"name filter\"\n                onChange={this.onInputChange}\n                value={inputValue}\n                placeholder=\"Filter by name...\"\n                // onKeyDown={this.onNameInput}\n              />\n            </InputGroupItem>\n            <InputGroupItem>\n              <Button\n                variant={ButtonVariant.control}\n                aria-label=\"search button for search input\"\n                // onClick={this.onNameInput}\n              >\n                <SearchIcon />\n              </Button>\n            </InputGroupItem>\n          </InputGroup>\n        </ToolbarFilter>\n        <ToolbarFilter\n          chips={filters.status}\n          deleteChip={this.onDelete}\n          categoryName=\"Status\"\n          showToolbarItem={currentCategory === 'Status'}\n        >\n          <SelectDeprecated\n            variant={SelectVariantDeprecated.checkbox}\n            aria-label=\"Status\"\n            onToggle={this.onFilterToggle}\n            onSelect={this.onStatusSelect}\n            selections={filters.status}\n            isOpen={isFilterDropdownOpen}\n            placeholderText=\"Filter by status\"\n          >\n            {statusMenuItems}\n          </SelectDeprecated>\n        </ToolbarFilter>\n      </React.Fragment>\n    );\n  }\n\n  renderToolbar() {\n    const { filters } = this.state;\n    return (\n      <Toolbar id=\"toolbar-with-chip-groups\" clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint=\"xl\">\n        <ToolbarContent>\n          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n            <ToolbarGroup variant=\"filter-group\">\n              {this.buildCategoryDropdown()}\n              {this.buildFilterDropdown()}\n            </ToolbarGroup>\n          </ToolbarToggleGroup>\n        </ToolbarContent>\n      </Toolbar>\n    );\n  }\n\n  render() {\n    const { loading, rows, columns, actions, filters, scollableElement } = this.state;\n\n    const filteredRows =\n      filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0\n        ? rows.filter((row) => {\n            return (\n              (filters.name.length === 0 ||\n                filters.name.some((name) => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&\n              (filters.location.length === 0 || filters.location.includes(row.cells[4])) &&\n              (filters.status.length === 0 || filters.status.includes(row.cells[3]))\n            );\n          })\n        : rows;\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n      const { columns, actions } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr data-id={index} style={style} role=\"row\">\n            <td role=\"gridcell\">{filteredRows[index].cells[0]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[1]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[2]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[3]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[4]}</td>\n            <td role=\"gridcell\">\n              <ActionsColumn\n                items={actions}\n                rowData={rows[index]}\n                extraData={{ rowIndex: index }}\n                isDisabled={rows[index].disableActions}\n              />\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <React.Fragment>\n        {this.renderToolbar()}\n\n        <div\n          id=\"content-scrollable-1\"\n          aria-label=\"Scrollable Table\"\n          className=\"pf-v5-c-scrollablegrid\"\n          style={{\n            height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n            overflowX: 'auto',\n            overflowY: 'scroll',\n            scrollBehavior: 'smooth',\n            WebkitOverflowScrolling: 'touch',\n            position: 'relative'\n          }}\n        >\n          <div style={{ padding: 15 }}>\n            {!loading && filteredRows.length > 0 && (\n              <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n                <TableDeprecated\n                  cells={columns}\n                  rows={filteredRows}\n                  actions={actions}\n                  aria-label=\"Filterable Table Demo\"\n                  aria-rowcount={rows.length}\n                >\n                  <TableHeaderDeprecated />\n                </TableDeprecated>\n                <WindowScroller scrollElement={scollableElement}>\n                  {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n                    <AutoSizer disableHeight>\n                      {({ width }) => (\n                        <div ref={registerChild}>\n                          <VirtualTableBody\n                            ref={(ref) => (this.actionsVirtualBody = ref)}\n                            autoHeight\n                            className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n                            deferredMeasurementCache={measurementCache}\n                            rowHeight={measurementCache.rowHeight}\n                            height={height || 0}\n                            overscanRowCount={10}\n                            columnCount={6}\n                            rows={filteredRows}\n                            rowCount={filteredRows.length}\n                            rowRenderer={rowRenderer}\n                            scrollTop={scrollTop}\n                            width={width}\n                            role=\"grid\"\n                          />\n                        </div>\n                      )}\n                    </AutoSizer>\n                  )}\n                </WindowScroller>\n              </div>\n            )}\n          </div>\n        </div>\n      </React.Fragment>\n    );\n  }\n}\n","title":"Filterable with WindowScroller","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"/* eslint-disable no-console */\nimport React from 'react';\nimport {\n  Button,\n  ButtonVariant,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarFilter,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  InputGroup,\n  InputGroupItem,\n  TextInput\n} from '@patternfly/react-core';\nimport { debounce } from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport { ActionsColumn } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport {\n  Dropdown as DropdownDeprecated,\n  DropdownItem as DropdownItemDeprecated,\n  DropdownPosition as DropdownPositionDeprecated,\n  DropdownToggle as DropdownToggleDeprecated,\n  Select as SelectDeprecated,\n  SelectOption as SelectOptionDeprecated,\n  SelectVariant as SelectVariantDeprecated\n} from '@patternfly/react-core/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';\n\nexport class FilterExample extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.actionsVirtualBody = null;\n\n    const rows = [];\n    for (let i = 0; i < 100; i++) {\n      const data = {};\n      if (i % 2 === 0) {\n        data.cells = [`US-Node ${i}`, i, i, 'Down', 'Brno'];\n      } else if (i % 3 === 0) {\n        data.cells = [`CN-Node ${i}`, i, i, 'Running', 'Westford'];\n      } else {\n        data.cells = [`US-Node ${i}`, i, i, 'Stopped', 'Raleigh'];\n      }\n      rows.push(data);\n    }\n    this.scrollableElement = React.createRef();\n\n    this.state = {\n      scrollableElement: null,\n\n      filters: {\n        location: [],\n        name: [],\n        status: []\n      },\n      currentCategory: 'Name',\n      isFilterDropdownOpen: false,\n      isCategoryDropdownOpen: false,\n      nameInput: '',\n      columns: [\n        { title: 'Servers' },\n        { title: 'Threads' },\n        { title: 'Applications' },\n        { title: 'Status' },\n        { title: 'Location' }\n      ],\n      rows,\n      inputValue: '',\n      actions: [\n        {\n          title: 'Some action',\n          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Some action, on row: ', rowId)\n        },\n        {\n          title: <div>Another action</div>,\n          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Another action, on row: ', rowId)\n        },\n        {\n          isSeparator: true\n        },\n        {\n          title: 'Third action',\n          onClick: (_event, rowId, _rowData, _extra) => console.log('clicked on Third action, on row: ', rowId)\n        }\n      ]\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n\n    this.onDelete = (type = '', id = '') => {\n      if (type) {\n        this.setState((prevState) => {\n          prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter((s) => s !== id);\n          return {\n            filters: prevState.filters\n          };\n        });\n      } else {\n        this.setState({\n          filters: {\n            location: [],\n            name: [],\n            status: []\n          },\n          inputValue: ''\n        });\n      }\n    };\n\n    this.onCategoryToggle = (_event, isOpen) => {\n      this.setState({\n        isCategoryDropdownOpen: isOpen\n      });\n    };\n\n    this.onCategorySelect = (event) => {\n      this.setState({\n        currentCategory: event.target.innerText,\n        isCategoryDropdownOpen: !this.state.isCategoryDropdownOpen\n      });\n    };\n\n    this.onFilterToggle = (_event, isOpen) => {\n      this.setState({\n        isFilterDropdownOpen: isOpen\n      });\n    };\n\n    this.onFilterSelect = (_event) => {\n      this.setState({\n        isFilterDropdownOpen: !this.state.isFilterDropdownOpen\n      });\n    };\n\n    this.onInputChange = (_event, newValue) => {\n      // this.setState({ inputValue: newValue });\n      if (newValue === '') {\n        this.onDelete();\n        this.setState({\n          inputValue: newValue\n        });\n      } else {\n        this.setState((prevState) => ({\n            filters: {\n              ...prevState.filters,\n              ['name']: [newValue]\n            },\n            inputValue: newValue\n          }));\n      }\n    };\n\n    this.onRowSelect = (event, isSelected, rowId) => {\n      let rows;\n      if (rowId === -1) {\n        rows = this.state.rows.map((oneRow) => {\n          oneRow.selected = isSelected;\n          return oneRow;\n        });\n      } else {\n        rows = [...this.state.rows];\n        rows[rowId].selected = isSelected;\n      }\n      this.setState({\n        rows\n      });\n    };\n\n    this.onStatusSelect = (event, selection) => {\n      const checked = event.target.checked;\n      this.setState((prevState) => {\n        const prevSelections = prevState.filters.status;\n        return {\n          filters: {\n            ...prevState.filters,\n            status: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)\n          }\n        };\n      });\n    };\n\n    this.onNameInput = (event) => {\n      if (event.key && event.key !== 'Enter') {\n        return;\n      }\n\n      const { inputValue } = this.state;\n      this.setState((prevState) => {\n        const prevFilters = prevState.filters.name;\n        return {\n          filters: {\n            ...prevState.filters,\n            ['name']: prevFilters.includes(inputValue) ? prevFilters : [...prevFilters, inputValue]\n          },\n          inputValue: ''\n        };\n      });\n    };\n\n    this.onLocationSelect = (event, selection) => {\n      this.setState((prevState) => ({\n          filters: {\n            ...prevState.filters,\n            ['location']: [selection]\n          }\n        }));\n      this.onFilterSelect();\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n    this._bindBodyRef = this._bindBodyRef.bind(this);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n\n    setTimeout(() => {\n      const scollableElement = document.getElementById('content-scrollable-1');\n      this.setState({ scollableElement });\n    });\n\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this._cellMeasurementCache.clearAll();\n    this._bodyRef.recomputeVirtualGridSize();\n  }\n\n  _bindBodyRef(ref) {\n    this._bodyRef = ref;\n  }\n\n  buildCategoryDropdown() {\n    const { isCategoryDropdownOpen, currentCategory } = this.state;\n\n    return (\n      <ToolbarItem>\n        <DropdownDeprecated\n          onSelect={this.onCategorySelect}\n          position={DropdownPositionDeprecated.left}\n          toggle={\n            <DropdownToggleDeprecated onToggle={this.onCategoryToggle} style={{ width: '100%' }}>\n              <FilterIcon /> {currentCategory}\n            </DropdownToggleDeprecated>\n          }\n          isOpen={isCategoryDropdownOpen}\n          dropdownItems={[\n            <DropdownItemDeprecated key=\"cat1\">Location</DropdownItemDeprecated>,\n            <DropdownItemDeprecated key=\"cat2\">Name</DropdownItemDeprecated>,\n            <DropdownItemDeprecated key=\"cat3\">Status</DropdownItemDeprecated>\n          ]}\n          style={{ width: '100%' }}\n        ></DropdownDeprecated>\n      </ToolbarItem>\n    );\n  }\n\n  buildFilterDropdown() {\n    const { currentCategory, isFilterDropdownOpen, inputValue, filters } = this.state;\n\n    const locationMenuItems = [\n      <SelectOptionDeprecated key=\"raleigh\" value=\"Raleigh\" />,\n      <SelectOptionDeprecated key=\"westford\" value=\"Westford\" />,\n      <SelectOptionDeprecated key=\"boston\" value=\"Boston\" />,\n      <SelectOptionDeprecated key=\"brno\" value=\"Brno\" />,\n      <SelectOptionDeprecated key=\"bangalore\" value=\"Bangalore\" />\n    ];\n\n    const statusMenuItems = [\n      <SelectOptionDeprecated key=\"statusRunning\" value=\"Running\" />,\n      <SelectOptionDeprecated key=\"statusStopped\" value=\"Stopped\" />,\n      <SelectOptionDeprecated key=\"statusDown\" value=\"Down\" />,\n      <SelectOptionDeprecated key=\"statusDegraded\" value=\"Degraded\" />,\n      <SelectOptionDeprecated key=\"statusMaint\" value=\"Needs Maintainence\" />\n    ];\n\n    return (\n      <React.Fragment>\n        <ToolbarFilter\n          chips={filters.location}\n          deleteChip={this.onDelete}\n          categoryName=\"Location\"\n          showToolbarItem={currentCategory === 'Location'}\n        >\n          <SelectDeprecated\n            aria-label=\"Location\"\n            onToggle={this.onFilterToggle}\n            onSelect={this.onLocationSelect}\n            selections={filters.location[0]}\n            isOpen={isFilterDropdownOpen}\n            placeholderText=\"Any\"\n          >\n            {locationMenuItems}\n          </SelectDeprecated>\n        </ToolbarFilter>\n        <ToolbarFilter\n          chips={filters.name}\n          deleteChip={this.onDelete}\n          categoryName=\"Name\"\n          showToolbarItem={currentCategory === 'Name'}\n        >\n          <InputGroup>\n            <InputGroupItem isFill>\n              <TextInput\n                name=\"nameInput\"\n                id=\"nameInput1\"\n                type=\"search\"\n                aria-label=\"name filter\"\n                onChange={this.onInputChange}\n                value={inputValue}\n                placeholder=\"Filter by name...\"\n                // onKeyDown={this.onNameInput}\n              />\n            </InputGroupItem>\n            <InputGroupItem>\n              <Button\n                variant={ButtonVariant.control}\n                aria-label=\"search button for search input\"\n                // onClick={this.onNameInput}\n              >\n                <SearchIcon />\n              </Button>\n            </InputGroupItem>\n          </InputGroup>\n        </ToolbarFilter>\n        <ToolbarFilter\n          chips={filters.status}\n          deleteChip={this.onDelete}\n          categoryName=\"Status\"\n          showToolbarItem={currentCategory === 'Status'}\n        >\n          <SelectDeprecated\n            variant={SelectVariantDeprecated.checkbox}\n            aria-label=\"Status\"\n            onToggle={this.onFilterToggle}\n            onSelect={this.onStatusSelect}\n            selections={filters.status}\n            isOpen={isFilterDropdownOpen}\n            placeholderText=\"Filter by status\"\n          >\n            {statusMenuItems}\n          </SelectDeprecated>\n        </ToolbarFilter>\n      </React.Fragment>\n    );\n  }\n\n  renderToolbar() {\n    return (\n      <Toolbar id=\"toolbar-with-chip-groups\" clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint=\"xl\">\n        <ToolbarContent>\n          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n            <ToolbarGroup variant=\"filter-group\">\n              {this.buildCategoryDropdown()}\n              {this.buildFilterDropdown()}\n            </ToolbarGroup>\n          </ToolbarToggleGroup>\n        </ToolbarContent>\n      </Toolbar>\n    );\n  }\n\n  render() {\n    const { loading, rows, columns, actions, filters, scollableElement } = this.state;\n\n    const filteredRows =\n      filters.name.length > 0 || filters.location.length > 0 || filters.status.length > 0\n        ? rows.filter((row) => (\n              (filters.name.length === 0 ||\n                filters.name.some((name) => row.cells[0].toLowerCase().includes(name.toLowerCase()))) &&\n              (filters.location.length === 0 || filters.location.includes(row.cells[4])) &&\n              (filters.status.length === 0 || filters.status.includes(row.cells[3]))\n            ))\n        : rows;\n    const measurementCache = new CellMeasurerCache({\n      fixedWidth: true,\n      minHeight: 44,\n      keyMapper: (rowIndex) => rowIndex\n    });\n\n    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n      const { actions } = this.state;\n\n      return (\n        <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr data-id={index} style={style} role=\"row\">\n            <td role=\"gridcell\">{filteredRows[index].cells[0]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[1]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[2]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[3]}</td>\n            <td role=\"gridcell\">{filteredRows[index].cells[4]}</td>\n            <td role=\"gridcell\">\n              <ActionsColumn\n                items={actions}\n                rowData={rows[index]}\n                extraData={{ rowIndex: index }}\n                isDisabled={rows[index].disableActions}\n              />\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <React.Fragment>\n        {this.renderToolbar()}\n\n        <div\n          id=\"content-scrollable-1\"\n          aria-label=\"Scrollable Table\"\n          className=\"pf-v5-c-scrollablegrid\"\n          style={{\n            height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n            overflowX: 'auto',\n            overflowY: 'scroll',\n            scrollBehavior: 'smooth',\n            WebkitOverflowScrolling: 'touch',\n            position: 'relative'\n          }}\n        >\n          <div style={{ padding: 15 }}>\n            {!loading && filteredRows.length > 0 && (\n              <div aria-label=\"Scrollable Table\" className=\"pf-v5-c-scrollablegrid\">\n                <TableDeprecated\n                  cells={columns}\n                  rows={filteredRows}\n                  actions={actions}\n                  aria-label=\"Filterable Table Demo\"\n                  aria-rowcount={rows.length}\n                >\n                  <TableHeaderDeprecated />\n                </TableDeprecated>\n                <WindowScroller scrollElement={scollableElement}>\n                  {({ height, _isScrolling, registerChild, _onChildScroll, scrollTop }) => (\n                    <AutoSizer disableHeight>\n                      {({ width }) => (\n                        <div ref={registerChild}>\n                          <VirtualTableBody\n                            ref={(ref) => (this.actionsVirtualBody = ref)}\n                            autoHeight\n                            className=\"pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller\"\n                            deferredMeasurementCache={measurementCache}\n                            rowHeight={measurementCache.rowHeight}\n                            height={height || 0}\n                            overscanRowCount={10}\n                            columnCount={6}\n                            rows={filteredRows}\n                            rowCount={filteredRows.length}\n                            rowRenderer={rowRenderer}\n                            scrollTop={scrollTop}\n                            width={width}\n                            role=\"grid\"\n                          />\n                        </div>\n                      )}\n                    </AutoSizer>\n                  )}\n                </WindowScroller>\n              </div>\n            )}\n          </div>\n        </div>\n      </React.Fragment>\n    );\n  }\n}\n","title":"Filterable with WindowScroller","lang":"js"}}>
       
     </Example>
 };
diff --git a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js
index 8b338e7..24607e3 100644
--- a/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js
+++ b/packages/module/patternfly-docs/generated/extensions/virtual-scroll-window-scroller/react.js
@@ -181,11 +181,11 @@ pageData.relativeImports = {
 };
 pageData.examples = {
   'Window scroller': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';\n\nexport class WindowScrollerExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100000; i++) {\n      const cells = [];\n      const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n      for (let j = 0; j < 5; j++) {\n        const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n        cells.push(cellValue);\n      }\n      rows.push({\n        id: `window-scroller-row-${i}`,\n        cells\n      });\n\n      this._cellMeasurementCache = new CellMeasurerCache({\n        fixedWidth: true,\n        minHeight: 44,\n        keyMapper: (rowIndex) => rowIndex\n      });\n    }\n\n    this.state = {\n      scrollToIndex: -1, // can be used to programmatically set current index\n      scrollableElement: null,\n      columns: [\n        {\n          title: 'Repositories',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Branches',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Pull requests',\n          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n        },\n        {\n          title: 'Workspaces',\n          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n        },\n        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n      ],\n      rows\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n    this._bindBodyRef = this._bindBodyRef.bind(this);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n\n    this.setState({ scrollableElement: document.getElementById('content-scrollable-1') });\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this._cellMeasurementCache.clearAll();\n    this._bodyRef.recomputeVirtualGridSize();\n  }\n\n  _bindBodyRef(ref) {\n    this._bodyRef = ref;\n  }\n\n  render() {\n    const { scrollToIndex, columns, rows, scrollableElement } = this.state;\n\n    const rowRenderer = ({ index, isScrolling, key, style, parent }) => {\n      const { rows, columns } = this.state;\n      const text = rows[index].cells[0];\n\n      return (\n        <CellMeasurer cache={this._cellMeasurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr style={style} role=\"row\">\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[4].props.className} role=\"gridcell\">\n              {text}\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div\n        id=\"content-scrollable-1\"\n        aria-label=\"Scrollable Table\"\n        className=\"pf-v5-c-scrollablegrid\"\n        style={{\n          height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n          overflowX: 'auto',\n          overflowY: 'scroll',\n          scrollBehavior: 'smooth',\n          WebkitOverflowScrolling: 'touch',\n          position: 'relative'\n        }}\n      >\n        <div style={{ padding: 15 }}>\n          <TableDeprecated\n            caption=\"WindowScoller allows scrolling of a parent container or the window instead of tbody. It also can be used to dynamically size the table to the size of the scroll element.\"\n            cells={columns}\n            rows={rows}\n            gridBreakPoint={TableGridBreakpoint.none}\n            aria-rowcount={rows.length}\n          >\n            <TableHeaderDeprecated />\n          </TableDeprecated>\n          {scrollableElement && (\n            <WindowScroller scrollElement={scrollableElement}>\n              {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n                <AutoSizer disableHeight>\n                  {({ width }) => (\n                    <div ref={registerChild}>\n                      <VirtualTableBody\n                        ref={this._bindBodyRef}\n                        autoHeight\n                        className={'pf-v5-c-virtualized pf-v5-c-window-scroller'}\n                        deferredMeasurementCache={this._cellMeasurementCache}\n                        rowHeight={this._cellMeasurementCache.rowHeight}\n                        height={height || 0}\n                        isScrolling={isScrolling}\n                        isScrollingOptOut={true}\n                        onScroll={onChildScroll}\n                        overscanRowCount={2}\n                        columnCount={1}\n                        rows={rows}\n                        rowCount={rows.length}\n                        rowRenderer={rowRenderer}\n                        scrollToIndex={scrollToIndex}\n                        scrollTop={scrollTop}\n                        width={width}\n                        role=\"grid\"\n                      />\n                    </div>\n                  )}\n                </AutoSizer>\n              )}\n            </WindowScroller>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n","title":"Window scroller","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { debounce } from '@patternfly/react-core';\nimport { TableGridBreakpoint } from '@patternfly/react-table';\nimport { Table as TableDeprecated, TableHeader as TableHeaderDeprecated } from '@patternfly/react-table/deprecated';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';\n\nexport class WindowScrollerExample extends React.Component {\n  constructor(props) {\n    super(props);\n    const rows = [];\n    for (let i = 0; i < 100000; i++) {\n      const cells = [];\n      const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n      for (let j = 0; j < 5; j++) {\n        const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n        cells.push(cellValue);\n      }\n      rows.push({\n        id: `window-scroller-row-${i}`,\n        cells\n      });\n\n      this._cellMeasurementCache = new CellMeasurerCache({\n        fixedWidth: true,\n        minHeight: 44,\n        keyMapper: (rowIndex) => rowIndex\n      });\n    }\n\n    this.state = {\n      scrollToIndex: -1, // can be used to programmatically set current index\n      scrollableElement: null,\n      columns: [\n        {\n          title: 'Repositories',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Branches',\n          props: { className: 'pf-m-6-col-on-sm pf-m-4-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl' }\n        },\n        {\n          title: 'Pull requests',\n          props: { className: 'pf-m-4-col-on-md pf-m-4-col-on-lg pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-md' }\n        },\n        {\n          title: 'Workspaces',\n          props: { className: 'pf-m-2-col-on-lg pf-m-2-col-on-xl pf-m-hidden pf-m-visible-on-lg' }\n        },\n        { title: 'Last Commit', props: { className: 'pf-m-3-col-on-xl pf-m-hidden pf-m-visible-on-xl' } }\n      ],\n      rows\n    };\n\n    this._handleResize = debounce(this._handleResize.bind(this), 100);\n    this._bindBodyRef = this._bindBodyRef.bind(this);\n  }\n\n  componentDidMount() {\n    // re-render after resize\n    window.addEventListener('resize', this._handleResize);\n\n    this.setState({ scrollableElement: document.getElementById('content-scrollable-1') });\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this._handleResize);\n  }\n\n  _handleResize() {\n    this._cellMeasurementCache.clearAll();\n    this._bodyRef.recomputeVirtualGridSize();\n  }\n\n  _bindBodyRef(ref) {\n    this._bodyRef = ref;\n  }\n\n  render() {\n    const { scrollToIndex, columns, rows, scrollableElement } = this.state;\n\n    const rowRenderer = ({ index, _isScrolling, key, style, parent }) => {\n      const { rows, columns } = this.state;\n      const text = rows[index].cells[0];\n\n      return (\n        <CellMeasurer cache={this._cellMeasurementCache} columnIndex={0} key={key} parent={parent} rowIndex={index}>\n          <tr style={style} role=\"row\">\n            <td className={columns[0].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[1].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[2].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[3].props.className} role=\"gridcell\">\n              {text}\n            </td>\n            <td className={columns[4].props.className} role=\"gridcell\">\n              {text}\n            </td>\n          </tr>\n        </CellMeasurer>\n      );\n    };\n\n    return (\n      <div\n        id=\"content-scrollable-1\"\n        aria-label=\"Scrollable Table\"\n        className=\"pf-v5-c-scrollablegrid\"\n        style={{\n          height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n          overflowX: 'auto',\n          overflowY: 'scroll',\n          scrollBehavior: 'smooth',\n          WebkitOverflowScrolling: 'touch',\n          position: 'relative'\n        }}\n      >\n        <div style={{ padding: 15 }}>\n          <TableDeprecated\n            caption=\"WindowScoller allows scrolling of a parent container or the window instead of tbody. It also can be used to dynamically size the table to the size of the scroll element.\"\n            cells={columns}\n            rows={rows}\n            gridBreakPoint={TableGridBreakpoint.none}\n            aria-rowcount={rows.length}\n          >\n            <TableHeaderDeprecated />\n          </TableDeprecated>\n          {scrollableElement && (\n            <WindowScroller scrollElement={scrollableElement}>\n              {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n                <AutoSizer disableHeight>\n                  {({ width }) => (\n                    <div ref={registerChild}>\n                      <VirtualTableBody\n                        ref={this._bindBodyRef}\n                        autoHeight\n                        className={'pf-v5-c-virtualized pf-v5-c-window-scroller'}\n                        deferredMeasurementCache={this._cellMeasurementCache}\n                        rowHeight={this._cellMeasurementCache.rowHeight}\n                        height={height || 0}\n                        isScrolling={isScrolling}\n                        isScrollingOptOut={true}\n                        onScroll={onChildScroll}\n                        overscanRowCount={2}\n                        columnCount={1}\n                        rows={rows}\n                        rowCount={rows.length}\n                        rowRenderer={rowRenderer}\n                        scrollToIndex={scrollToIndex}\n                        scrollTop={scrollTop}\n                        width={width}\n                        role=\"grid\"\n                      />\n                    </div>\n                  )}\n                </AutoSizer>\n              )}\n            </WindowScroller>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n","title":"Window scroller","lang":"js"}}>
       
     </Example>,
   'Using composable table components': props => 
-    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';\nimport { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table';\n\nexport const ComposableTableWindowScroller = () => {\n  const [scrollableElement, setScrollableElement] = React.useState();\n  React.useEffect(() => {\n    const scrollableElement = document.getElementById('content-scrollable-2');\n    setScrollableElement(scrollableElement);\n  });\n  const rows = [];\n  for (let i = 0; i < 100000; i++) {\n    const cells = [];\n    const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n    for (let j = 0; j < 5; j++) {\n      const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n      cells.push(cellValue);\n    }\n    rows.push(cells);\n  }\n  const [selected, setSelected] = React.useState(rows.map((row) => false));\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n  const scrollToIndex = -1; // can be used to programmatically set current index\n\n  const onSelect = (event, isSelected, rowId) => {\n    setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n  };\n\n  const measurementCache = new CellMeasurerCache({\n    fixedWidth: true,\n    minHeight: 44,\n    keyMapper: (rowIndex) => rowIndex\n  });\n\n  const rowRenderer = ({ index: rowIndex, isScrolling, key, style, parent }) => {\n    const text = rows[rowIndex][0];\n\n    return (\n      <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}>\n        <Tr style={style}>\n          <Td\n            key={`${rowIndex}_0`}\n            select={{\n              rowIndex,\n              onSelect: onSelect,\n              isSelected: selected[rowIndex]\n            }}\n          />\n          {columns.map((col, index) => (\n            <Td key={`${rowIndex}-${++index}`}>{text}</Td>\n          ))}\n        </Tr>\n      </CellMeasurer>\n    );\n  };\n\n  const scrollableContainerStyle = {\n    height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n    overflowX: 'auto',\n    overflowY: 'scroll',\n    scrollBehavior: 'smooth',\n    WebkitOverflowScrolling: 'touch',\n    position: 'relative'\n  };\n\n  return (\n    <div\n      id=\"content-scrollable-2\"\n      aria-label=\"Scrollable Table\"\n      className=\"pf-v5-c-scrollablegrid\"\n      style={scrollableContainerStyle}\n    >\n      <Table gridBreakPoint={TableGridBreakpoint.none} aria-rowcount={rows.length}>\n        <Caption>Virtualized table with composable table components</Caption>\n        <Thead>\n          <Tr>\n            <Th className=\"pf-v5-c-table__check\" />\n            {columns.map((col, index) => (\n              <Th key={++index}>{col}</Th>\n            ))}\n          </Tr>\n        </Thead>\n      </Table>\n      <WindowScroller scrollElement={scrollableElement}>\n        {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n          <AutoSizer disableHeight>\n            {({ width }) => (\n              <div ref={registerChild}>\n                <VirtualTableBody\n                  autoHeight\n                  className={'pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller'}\n                  deferredMeasurementCache={measurementCache}\n                  rowHeight={measurementCache.rowHeight}\n                  height={height || 0}\n                  isScrolling={isScrolling}\n                  isScrollingOptOut={true}\n                  onScroll={onChildScroll}\n                  overscanRowCount={2}\n                  columnCount={1}\n                  rows={rows}\n                  rowCount={rows.length}\n                  rowRenderer={rowRenderer}\n                  scrollToIndex={scrollToIndex}\n                  scrollTop={scrollTop}\n                  width={width}\n                  role=\"grid\"\n                />\n              </div>\n            )}\n          </AutoSizer>\n        )}\n      </WindowScroller>\n    </div>\n  );\n};\n","title":"Using composable table components","lang":"js"}}>
+    <Example {...pageData} {...props} {...{"code":"import React from 'react';\nimport { CellMeasurerCache, CellMeasurer } from 'react-virtualized';\nimport { AutoSizer, VirtualTableBody, WindowScroller } from '@patternfly/react-virtualized-extension';\nimport { Table, Thead, Tr, Th, Td, Caption, TableGridBreakpoint } from '@patternfly/react-table';\n\nexport const ComposableTableWindowScroller = () => {\n  const [scrollableElement, setScrollableElement] = React.useState();\n  React.useEffect(() => {\n    const scrollableElement = document.getElementById('content-scrollable-2');\n    setScrollableElement(scrollableElement);\n  });\n  const rows = [];\n  for (let i = 0; i < 100000; i++) {\n    const cells = [];\n    const num = Math.floor(Math.random() * Math.floor(2)) + 1;\n    for (let j = 0; j < 5; j++) {\n      const cellValue = i.toString() + ' Arma virumque cano Troiae qui primus ab oris. '.repeat(num);\n      cells.push(cellValue);\n    }\n    rows.push(cells);\n  }\n  const [selected, setSelected] = React.useState(rows.map((_row) => false));\n  const columns = ['Repositories', 'Branches', 'Pull requests', 'Workspaces', 'Last Commit'];\n  const scrollToIndex = -1; // can be used to programmatically set current index\n\n  const onSelect = (event, isSelected, rowId) => {\n    setSelected(selected.map((sel, index) => (index === rowId ? isSelected : sel)));\n  };\n\n  const measurementCache = new CellMeasurerCache({\n    fixedWidth: true,\n    minHeight: 44,\n    keyMapper: (rowIndex) => rowIndex\n  });\n\n  const rowRenderer = ({ index: rowIndex, _isScrolling, key, style, parent }) => {\n    const text = rows[rowIndex][0];\n\n    return (\n      <CellMeasurer cache={measurementCache} columnIndex={0} key={key} parent={parent} rowIndex={rowIndex}>\n        <Tr style={style}>\n          <Td\n            key={`${rowIndex}_0`}\n            select={{\n              rowIndex,\n              onSelect,\n              isSelected: selected[rowIndex]\n            }}\n          />\n          {columns.map((col, index) => (\n            <Td key={`${rowIndex}-${++index}`}>{text}</Td>\n          ))}\n        </Tr>\n      </CellMeasurer>\n    );\n  };\n\n  const scrollableContainerStyle = {\n    height: 500 /* important note: the scrollable container should have some sort of fixed height, or it should be wrapped in container that is smaller than ReactVirtualized__VirtualGrid container and has overflow visible if using the Window Scroller. See WindowScroller.example.css */,\n    overflowX: 'auto',\n    overflowY: 'scroll',\n    scrollBehavior: 'smooth',\n    WebkitOverflowScrolling: 'touch',\n    position: 'relative'\n  };\n\n  return (\n    <div\n      id=\"content-scrollable-2\"\n      aria-label=\"Scrollable Table\"\n      className=\"pf-v5-c-scrollablegrid\"\n      style={scrollableContainerStyle}\n    >\n      <Table gridBreakPoint={TableGridBreakpoint.none} aria-rowcount={rows.length}>\n        <Caption>Virtualized table with composable table components</Caption>\n        <Thead>\n          <Tr>\n            <Th className=\"pf-v5-c-table__check\" />\n            {columns.map((col, index) => (\n              <Th key={++index}>{col}</Th>\n            ))}\n          </Tr>\n        </Thead>\n      </Table>\n      <WindowScroller scrollElement={scrollableElement}>\n        {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (\n          <AutoSizer disableHeight>\n            {({ width }) => (\n              <div ref={registerChild}>\n                <VirtualTableBody\n                  autoHeight\n                  className={'pf-v5-c-table pf-v5-c-virtualized pf-v5-c-window-scroller'}\n                  deferredMeasurementCache={measurementCache}\n                  rowHeight={measurementCache.rowHeight}\n                  height={height || 0}\n                  isScrolling={isScrolling}\n                  isScrollingOptOut={true}\n                  onScroll={onChildScroll}\n                  overscanRowCount={2}\n                  columnCount={1}\n                  rows={rows}\n                  rowCount={rows.length}\n                  rowRenderer={rowRenderer}\n                  scrollToIndex={scrollToIndex}\n                  scrollTop={scrollTop}\n                  width={width}\n                  role=\"grid\"\n                />\n              </div>\n            )}\n          </AutoSizer>\n        )}\n      </WindowScroller>\n    </div>\n  );\n};\n","title":"Using composable table components","lang":"js"}}>
       
     </Example>
 };