diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 71f3b2e1e5d..1539ef97034 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -56,258 +56,8 @@ import { rows, columns } from '../examples/Data.jsx';
 
 ### Bulk select
 
-```js isFullscreen
-import React from 'react';
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggle,
-  MenuToggleCheckbox,
-  PageSection,
-  Pagination,
-  Title,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem
-} from '@patternfly/react-core';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-class BulkSelectTableDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      res: [],
-      perPage: 20,
-      page: 1,
-      error: null,
-      loading: true,
-      selectedItems: [],
-      numSelected: 0,
-      isDropDownOpen: false,
-      isKebabOpen: false,
-      searchValue: ''
-    };
-
-    this.onSelect = (event, isSelected, rowId) => {
-      const { selectedItems } = this.state;
-      const rows = [...this.state.res];
-      const id = rows[rowId].id;
-      rows[rowId].selected = isSelected;
-      this.setState((prevState, props) => {
-        return {
-          res: rows,
-          selectedItems: isSelected
-            ? [...prevState.selectedItems, id]
-            : prevState.selectedItems.filter((itemId) => itemId !== id)
-        };
-      });
-    };
-
-    this.updateSelected = () => {
-      const { res, selectedItems } = this.state;
-      let rows = res.map((post) => {
-        post.selected = selectedItems.includes(post.id);
-        return post;
-      });
-
-      this.setState({
-        res: rows
-      });
-    };
-
-    this.handleSelectClick = (newState) => {
-      if (newState === 'none') {
-        this.setState(
-          {
-            selectedItems: []
-          },
-          this.updateSelected
-        );
-      } else if (newState === 'page') {
-        let newRows = [];
-        let rows = this.state.res.map((post) => {
-          const isSelected = post.selected;
-          newRows = isSelected ? [...newRows] : [...newRows, post.id];
-          post.selected = true;
-          return post;
-        });
-
-        this.setState((prevState, props) => {
-          return {
-            selectedItems: prevState.selectedItems.concat(newRows)
-          };
-        }, this.updateSelected);
-      } else {
-        let newRows = [];
-        for (var i = 1; i <= 100; i++) newRows = [...newRows, i];
-
-        this.setState(
-          {
-            selectedItems: newRows
-          },
-          this.updateSelected
-        );
-      }
-    };
-
-    this.onDropDownToggle = (isOpen) => {
-      this.setState({
-        isDropDownOpen: isOpen
-      });
-    };
-
-    this.onDropDownSelect = (event) => {
-      this.setState((prevState, props) => {
-        return { isDropDownOpen: !prevState.isDropDownOpen };
-      });
-    };
-  }
+```js isFullscreen file="./table-demos/BulkSelect.jsx"
 
-  fetch(page, perPage) {
-    this.setState({ loading: true });
-    fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)
-      .then((resp) => resp.json())
-      .then((resp) => this.setState({ res: resp, perPage, page, loading: false }))
-      .then(() => this.updateSelected())
-      .catch((err) => this.setState({ error: err, loading: false }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page, this.state.perPage);
-  }
-
-  renderPagination(variant) {
-    const { page, perPage } = this.state;
-    return (
-      <Pagination
-        isCompact
-        itemCount={100}
-        page={page}
-        perPage={perPage}
-        onSetPage={(_evt, value) => {
-          this.fetch(value, perPage);
-        }}
-        onPerPageSelect={(_evt, value) => {
-          this.fetch(1, value);
-        }}
-        variant={variant}
-        titles={{
-          paginationAriaLabel: `${variant} pagination`
-        }}
-      />
-    );
-  }
-
-  buildSelectDropdown() {
-    const { isDropDownOpen, selectedItems } = this.state;
-    const numSelected = selectedItems.length;
-    const allSelected = numSelected === 100;
-    const anySelected = numSelected > 0;
-    const someChecked = anySelected ? null : false;
-    const isChecked = allSelected ? true : someChecked;
-
-    const items = (
-      <>
-        <DropdownItem key="item-1" onClick={() => this.handleSelectClick('none')}>
-          Select none (0 items)
-        </DropdownItem>
-        <DropdownItem key="item-2" onClick={() => this.handleSelectClick('page')}>
-          Select page ({this.state.perPage} items)
-        </DropdownItem>
-        <DropdownItem key="item-3" onClick={() => this.handleSelectClick('all')}>
-          Select all (100 items)
-        </DropdownItem>
-      </>
-    );
-    return (
-      <Dropdown
-        onSelect={this.onDropDownSelect}
-        isOpen={isDropDownOpen}
-        onOpenChange={(isOpen) => this.setState({ isDropDownOpen: isOpen })}
-        toggle={(toggleRef) => (
-          <MenuToggle
-            ref={toggleRef}
-            isExpanded={isDropDownOpen}
-            onClick={this.onDropDownToggle}
-            aria-label="Select cards"
-            splitButtonOptions={{
-              items: [
-                <MenuToggleCheckbox
-                  id="split-dropdown-checkbox"
-                  key="split-dropdown-checkbox"
-                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
-                  isChecked={allSelected}
-                  onClick={() => {
-                    anySelected ? this.handleSelectClick('none') : this.handleSelectClick('all');
-                  }}
-                >
-                  {numSelected !== 0 && `${numSelected} selected`}
-                </MenuToggleCheckbox>
-              ]
-            }}
-          ></MenuToggle>
-        )}
-      >
-        <DropdownList>{items}</DropdownList>
-      </Dropdown>
-    );
-  }
-
-  renderToolbar() {
-    return (
-      <React.Fragment>
-        <Toolbar>
-          <ToolbarContent>
-            <ToolbarGroup>
-              <ToolbarItem variant="bulk-select">{this.buildSelectDropdown()}</ToolbarItem>
-            </ToolbarGroup>
-            <ToolbarItem variant="pagination">{this.renderPagination('top')}</ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-      </React.Fragment>
-    );
-  }
-
-  render() {
-    const { loading, res } = this.state;
-    const rows = res.map((post) => ({
-      cells: [post.title, post.body],
-      selected: post.selected
-    }));
-
-    return (
-      <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isWidthLimited>
-          {this.renderToolbar()}
-          {!loading && (
-            <TableDeprecated
-              aria-label="Bulk Select Table Demo"
-              cells={['Title', 'Body']}
-              rows={rows}
-              onSelect={this.onSelect}
-              canSelectAll={false}
-            >
-              <TableHeader />
-              <TableBody />
-            </TableDeprecated>
-          )}
-
-          {loading && (
-            <div className="pf-v5-l-bullseye">
-              <Title headingLevel="h2" size="3xl">
-                Please wait while loading data
-              </Title>
-            </div>
-          )}
-          {this.renderPagination('bottom')}
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
 ```
 
 ### Expand/collapse all
diff --git a/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx b/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx
new file mode 100644
index 00000000000..378dc4cc405
--- /dev/null
+++ b/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx
@@ -0,0 +1,172 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleCheckbox,
+  PageSection,
+  Pagination,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+import { rows, columns } from '../../examples/Data.jsx';
+
+export const BulkSelectTableDemo = () => {
+  const [isBulkSelectDropdownOpen, setIsBulkSelectDropdownOpen] = React.useState(false);
+  const [bulkSelection, setBulkSelection] = React.useState('');
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
+  const [selectedRows, setSelectedRows] = React.useState([]);
+  const handleSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => {
+    setPaginatedRows(rows.slice(startIdx, endIdx));
+    setPage(newPage);
+  };
+  const handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => {
+    setPaginatedRows(rows.slice(startIdx, endIdx));
+    setPage(newPage);
+    setPerPage(newPerPage);
+  };
+
+  const setRowSelected = (row, isSelecting = true) =>
+    setSelectedRows(prevSelected => {
+      const otherSelectedRows = prevSelected.filter(r => r !== row.name);
+      return isSelecting ? [...otherSelectedRows, row.name] : otherSelectedRows;
+    });
+  const selectAllRows = (isSelecting = true) =>
+    setSelectedRows(isSelecting ? rows.map(r => r.name) : []);
+  const selectPageRows = (isSelecting = true) => setSelectedRows(isSelecting ? paginatedRows.map(r => r.name) : []);
+  const isRowSelected = (row) => selectedRows.includes(row.name);
+
+  const buildPagination = (variant, isCompact) => (
+    <Pagination
+      isCompact={isCompact}
+      itemCount={rows.length}
+      page={page}
+      perPage={perPage}
+      onSetPage={handleSetPage}
+      onPerPageSelect={handlePerPageSelect}
+      variant={variant}
+      titles={{
+        paginationAriaLabel: `${variant} pagination`
+      }}
+    />
+  );
+
+  const buildBulkSelectDropdown = () => {
+    const numSelected = selectedRows.length;
+    const allSelected = numSelected === rows.length;
+    const anySelected = numSelected > 0;
+    const someChecked = anySelected ? null : false;
+    const isChecked = allSelected ? true : someChecked;
+
+    const items = (
+      <>
+        <DropdownItem itemId="none">
+          Select none (0 items)
+        </DropdownItem>
+        <DropdownItem itemId="page">
+          Select page ({perPage} items)
+        </DropdownItem>
+        <DropdownItem itemId="all">
+          Select all ({rows.length} items)
+        </DropdownItem>
+      </>
+    );
+    return (
+      <Dropdown
+        role="menu"
+        onSelect={(_ev, itemId) => {
+          if (itemId === "all") {
+            selectAllRows(bulkSelection !== 'all');
+          } else if (itemId === "page") {
+            selectPageRows(bulkSelection !== 'page');
+          } else {
+            setSelectedRows([]);
+          }
+          setBulkSelection(itemId);
+        }}
+        isOpen={isBulkSelectDropdownOpen}
+        onOpenChange={(isOpen) => setIsBulkSelectDropdownOpen(isOpen)}
+        toggle={(toggleRef) => (
+          <MenuToggle
+            ref={toggleRef}
+            isExpanded={isBulkSelectDropdownOpen}
+            onClick={() => setIsBulkSelectDropdownOpen(!isBulkSelectDropdownOpen)}
+            aria-label="Select cards"
+            splitButtonOptions={{
+              items: [
+                <MenuToggleCheckbox
+                  id="split-dropdown-checkbox"
+                  key="split-dropdown-checkbox"
+                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                  isChecked={isChecked}
+                  onClick={() => {
+                    anySelected ? setSelectedRows([]) : selectAllRows(bulkSelection !== 'all');
+                  }}
+                >
+                  {numSelected !== 0 && `${numSelected} selected`}
+                </MenuToggleCheckbox>
+              ]
+            }}
+          ></MenuToggle>
+        )}
+      >
+        <DropdownList>{items}</DropdownList>
+      </Dropdown>
+    );
+  }
+
+  const toolbar=(
+    <Toolbar>
+      <ToolbarContent>
+        <ToolbarGroup>
+          <ToolbarItem variant="bulk-select">{buildBulkSelectDropdown()}</ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem variant="pagination">{buildPagination('top')}</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  return (
+    <DashboardWrapper hasPageTemplateTitle>
+      <PageSection isWidthLimited>
+        {toolbar}
+        <Table aria-label="Selectable table">
+          <Thead>
+            <Tr>
+              <Th/>
+              <Th key={0}>{columns[0]}</Th>
+              <Th key={1}>{columns[1]}</Th>
+              <Th key={2}>{columns[2]}</Th>
+              <Th key={3}>{columns[3]}</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {paginatedRows.map((row, rowIndex) => (
+              <Tr key={row.name}>
+                <Td
+                  select={{
+                    rowIndex,
+                    onSelect: (_event, isSelecting) => setRowSelected(row, isSelecting),
+                    isSelected: isRowSelected(row)
+                  }}
+                />
+                <Td dataLabel={columns[0]}>{row.name}</Td>
+                <Td dataLabel={columns[1]}>{row.threads}</Td>
+                <Td dataLabel={columns[2]}>{row.applications}</Td>
+                <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+        {buildPagination('bottom')}
+      </PageSection>
+    </DashboardWrapper>
+  );
+}