diff --git a/frontend/packages/ceph-storage-plugin/src/utils/table-filters.ts b/frontend/packages/ceph-storage-plugin/src/utils/table-filters.ts
index b46f5555612..5b20a820060 100644
--- a/frontend/packages/ceph-storage-plugin/src/utils/table-filters.ts
+++ b/frontend/packages/ceph-storage-plugin/src/utils/table-filters.ts
@@ -1,11 +1,12 @@
 import * as _ from 'lodash';
 import { TFunction } from 'i18next';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
+import { K8sResourceKind } from '@console/internal/module/k8s';
 import { getPhase } from './noobaa-utils';
 
 const allPhases = ['Pending', 'Bound', 'Lost'];
 
-export const obcStatusFilter = (t: TFunction): RowFilter => ({
+export const obcStatusFilter = (t: TFunction): RowFilter<K8sResourceKind> => ({
   type: 'obc-status',
   filterGroupName: t('ceph-storage-plugin~Status'),
   reducer: getPhase,
@@ -19,12 +20,14 @@ export const obcStatusFilter = (t: TFunction): RowFilter => ({
     }
     const phase = getPhase(obc);
     return (
-      phases.selected.has(phase) || !_.includes(phases.all, phase) || _.isEmpty(phases.selected)
+      phases.selected.includes(phase) ||
+      !_.includes(phases.all, phase) ||
+      _.isEmpty(phases.selected)
     );
   },
 });
 
-export const obStatusFilter = (t: TFunction): RowFilter => ({
+export const obStatusFilter = (t: TFunction): RowFilter<K8sResourceKind> => ({
   type: 'ob-status',
   filterGroupName: t('ceph-storage-plugin~Status'),
   reducer: getPhase,
@@ -38,7 +41,9 @@ export const obStatusFilter = (t: TFunction): RowFilter => ({
     }
     const phase = getPhase(ob);
     return (
-      phases.selected.has(phase) || !_.includes(phases.all, phase) || _.isEmpty(phases.selected)
+      phases.selected.includes(phase) ||
+      !_.includes(phases.all, phase) ||
+      _.isEmpty(phases.selected)
     );
   },
 });
diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx
index 84373cc2ad2..ba37cdd04e5 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx
@@ -33,7 +33,7 @@ const NodeDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (pro
         <PodsPage
           showTitle={false}
           fieldSelector={`spec.nodeName=${obj.metadata.name}`}
-          customData={{ showNamespaceOverride: true }}
+          showNamespaceOverride
         />
       )),
       events(ResourceEventStream),
diff --git a/frontend/packages/console-shared/src/hooks/useK8sModel.ts b/frontend/packages/console-shared/src/hooks/useK8sModel.ts
index 7190f234665..0698ea8243b 100644
--- a/frontend/packages/console-shared/src/hooks/useK8sModel.ts
+++ b/frontend/packages/console-shared/src/hooks/useK8sModel.ts
@@ -7,10 +7,11 @@ import { RootState } from '@console/internal/redux';
 // Hook that retrieves the k8s model for provided groupVersionKind reference. Hook version of
 // `connectToModel`.
 export const useK8sModel = (groupVersionKind: GroupVersionKind): [K8sKind, boolean] => [
-  useSelector<RootState, K8sKind>(
-    ({ k8s }) =>
-      k8s.getIn(['RESOURCES', 'models', groupVersionKind]) ??
-      k8s.getIn(['RESOURCES', 'models', kindForReference(groupVersionKind)]),
+  useSelector<RootState, K8sKind>(({ k8s }) =>
+    groupVersionKind
+      ? k8s.getIn(['RESOURCES', 'models', groupVersionKind]) ??
+        k8s.getIn(['RESOURCES', 'models', kindForReference(groupVersionKind)])
+      : undefined,
   ),
   useSelector<RootState, boolean>(({ k8s }) => k8s.getIn(['RESOURCES', 'inFlight']) ?? false),
 ];
diff --git a/frontend/packages/container-security/src/components/ImageVulnerabilitiesList.tsx b/frontend/packages/container-security/src/components/ImageVulnerabilitiesList.tsx
index b07d5550b69..9d95157ac70 100644
--- a/frontend/packages/container-security/src/components/ImageVulnerabilitiesList.tsx
+++ b/frontend/packages/container-security/src/components/ImageVulnerabilitiesList.tsx
@@ -32,7 +32,7 @@ const ImageVulnerabilitiesList: React.FC<ImageVulnerabilitiesListProps> = (props
     },
   } = props;
 
-  const imageVulnerabilitiesRowFilters: RowFilter[] = [
+  const imageVulnerabilitiesRowFilters: RowFilter<ImageVuln>[] = [
     {
       filterGroupName: t('container-security~Severity'),
       items: [
@@ -47,7 +47,7 @@ const ImageVulnerabilitiesList: React.FC<ImageVulnerabilitiesListProps> = (props
       type: 'vulnerability-severity',
       reducer: (v) => v.vulnerability.severity,
       filter: (filter, vuln) =>
-        filter.selected.has(vuln.vulnerability.severity) || _.isEmpty(filter.selected),
+        filter.selected?.includes(vuln.vulnerability.severity) || _.isEmpty(filter.selected),
     },
   ];
 
diff --git a/frontend/packages/knative-plugin/src/components/eventing/channels-list/ChannelListPage.tsx b/frontend/packages/knative-plugin/src/components/eventing/channels-list/ChannelListPage.tsx
index 9f9bf958910..86d79016483 100644
--- a/frontend/packages/knative-plugin/src/components/eventing/channels-list/ChannelListPage.tsx
+++ b/frontend/packages/knative-plugin/src/components/eventing/channels-list/ChannelListPage.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MultiListPage } from '@console/internal/components/factory';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
-import { K8sResourceKind, referenceFor, referenceForModel } from '@console/internal/module/k8s';
+import { K8sResourceCommon, referenceFor, referenceForModel } from '@console/internal/module/k8s';
 import {
   getDynamicChannelModel,
   useChannelModels,
@@ -34,29 +34,24 @@ const ChannelListPage: React.FC<React.ComponentProps<typeof MultiListPage>> = (p
     [eventSourceChannels, modelsLoaded],
   );
 
-  const getModelId = React.useCallback((obj: K8sResourceKind) => {
+  const getModelId = React.useCallback((obj: K8sResourceCommon) => {
     const reference = referenceFor(obj);
     const model = getDynamicChannelModel(reference);
     return model.id;
   }, []);
 
-  const rowFilterReducer = React.useCallback(
-    ({ selected }: { selected: Set<string>; all: string[] }, obj: K8sResourceKind) =>
-      selected.size === 0 || selected.has(getModelId(obj)),
-    [getModelId],
-  );
-
-  const channelRowFilter: RowFilter[] = React.useMemo(
+  const channelRowFilter = React.useMemo<RowFilter<K8sResourceCommon>[]>(
     () => [
       {
         filterGroupName: 'Type',
         type: 'event-source-type',
         items: eventSourceChannels.map(({ id, label }) => ({ id, title: label })),
         reducer: getModelId,
-        filter: rowFilterReducer,
+        filter: (filter, obj) =>
+          !filter.selected?.length || filter.selected?.includes(getModelId(obj)),
       },
     ],
-    [eventSourceChannels, getModelId, rowFilterReducer],
+    [eventSourceChannels, getModelId],
   );
   return (
     <MultiListPage
diff --git a/frontend/packages/knative-plugin/src/components/eventing/eventsource-list/EventSourceListPage.tsx b/frontend/packages/knative-plugin/src/components/eventing/eventsource-list/EventSourceListPage.tsx
index 0bfbdefb551..6846cb89755 100644
--- a/frontend/packages/knative-plugin/src/components/eventing/eventsource-list/EventSourceListPage.tsx
+++ b/frontend/packages/knative-plugin/src/components/eventing/eventsource-list/EventSourceListPage.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { MultiListPage } from '@console/internal/components/factory';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
 import {
-  K8sResourceKind,
+  K8sResourceCommon,
   modelFor,
   referenceFor,
   referenceForModel,
@@ -45,29 +45,24 @@ const EventSourceListPage: React.FC<React.ComponentProps<typeof MultiListPage>>
         : [],
     [sourcesModel, modelsLoaded],
   );
-  const getModelId = React.useCallback((obj: K8sResourceKind) => {
+  const getModelId = React.useCallback((obj: K8sResourceCommon) => {
     const reference = referenceFor(obj);
     const model = getDynamicEventSourceModel(reference) || modelFor(reference);
     return model.id;
   }, []);
 
-  const rowFilterReducer = React.useCallback(
-    ({ selected }: { selected: Set<string>; all: string[] }, obj: K8sResourceKind) =>
-      selected.size === 0 || selected.has(getModelId(obj)),
-    [getModelId],
-  );
-
-  const eventSourceRowFilters: RowFilter[] = React.useMemo(
+  const eventSourceRowFilters = React.useMemo<RowFilter<K8sResourceCommon>[]>(
     () => [
       {
         filterGroupName: 'Type',
         type: 'event-source-type',
         items: sourcesModel.map(({ id, label }) => ({ id, title: label })),
         reducer: getModelId,
-        filter: rowFilterReducer,
+        filter: (filter, obj) =>
+          !filter.selected?.length || filter.selected?.includes(getModelId(obj)),
       },
     ],
-    [sourcesModel, getModelId, rowFilterReducer],
+    [sourcesModel, getModelId],
   );
   return (
     <MultiListPage
diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-disks/table-filters.ts b/frontend/packages/kubevirt-plugin/src/components/vm-disks/table-filters.ts
index 2397047bbc1..7abf3ec66df 100644
--- a/frontend/packages/kubevirt-plugin/src/components/vm-disks/table-filters.ts
+++ b/frontend/packages/kubevirt-plugin/src/components/vm-disks/table-filters.ts
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import { RowFilter } from '@console/internal/components/filter-toolbar';
 import { DiskType } from '../../constants/vm/storage';
 
@@ -18,7 +17,7 @@ export const diskSourceFilter: RowFilter = {
   filter: (disks, obj) => {
     const diskType = typeReducer(obj);
     return (
-      disks.selected.size === 0 || disks.selected.has(diskType) || !_.includes(disks.all, diskType)
+      !disks.selected.length || disks.selected.includes(diskType) || disks.all?.includes(diskType)
     );
   },
 };
diff --git a/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx b/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx
index c93bd72c3a8..88d3371c5e2 100644
--- a/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx
+++ b/frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx
@@ -38,16 +38,16 @@ const filters = (t: TFunction): RowFilter<VirtualMachineTemplateBundle>[] => [
       return 'user';
     },
     items: templateProviders(t),
-    filter: (types, obj: VirtualMachineTemplateBundle) => {
+    filter: (types, obj) => {
       let providerFilter = true;
-      if (types.selected.size > 0) {
-        if (templateProviders(t).length === types.selected.size) {
+      if (types.selected?.length > 0) {
+        if (templateProviders(t).length === types.selected.length) {
           providerFilter = true;
         } else if (obj.template) {
           const type = getTemplateProviderType(obj.template);
-          providerFilter = types.selected.has(type);
+          providerFilter = types.selected.includes(type);
         } else {
-          providerFilter = types.selected.has('user');
+          providerFilter = types.selected.includes('user');
         }
       }
       return providerFilter;
diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/table-filters.ts b/frontend/packages/kubevirt-plugin/src/components/vms/table-filters.ts
index 071b399b4c5..2360a2c1165 100644
--- a/frontend/packages/kubevirt-plugin/src/components/vms/table-filters.ts
+++ b/frontend/packages/kubevirt-plugin/src/components/vms/table-filters.ts
@@ -17,8 +17,8 @@ export const vmStatusFilter: RowFilter = {
     const status = ((obj?.metadata as any)
       ?.vmStatusBundle as VMStatusBundle)?.status.getSimpleLabel();
     return (
-      statuses.selected.size === 0 ||
-      statuses.selected.has(status) ||
+      statuses.selected?.length === 0 ||
+      statuses.selected?.includes(status) ||
       !_.includes(statuses.all, status)
     );
   },
@@ -35,9 +35,9 @@ export const vmStatusFilterNew: RowFilter = {
   filter: (statuses, obj) => {
     const status = obj?.metadata?.status;
     return (
-      statuses.selected.size === 0 ||
-      statuses.selected.has(status) ||
-      !_.includes(statuses.all, status)
+      statuses.selected?.length === 0 ||
+      statuses.selected?.includes(status) ||
+      !_.includes(statuses?.all, status)
     );
   },
 };
diff --git a/frontend/packages/kubevirt-plugin/src/components/vms/types.ts b/frontend/packages/kubevirt-plugin/src/components/vms/types.ts
index 2ea5bd7d5f7..002a3189c57 100644
--- a/frontend/packages/kubevirt-plugin/src/components/vms/types.ts
+++ b/frontend/packages/kubevirt-plugin/src/components/vms/types.ts
@@ -4,6 +4,8 @@ import {
   PersistentVolumeClaimKind,
   PodKind,
 } from '@console/internal/module/k8s';
+import { V2VVMImportStatus } from '../../constants/v2v-import/ovirt/v2v-vm-import-status';
+import { VMStatusBundle } from '../../statuses/vm/types';
 import { V1alpha1DataVolume } from '../../types/api';
 import { VMIKind, VMKind } from '../../types/vm';
 import { VMImportKind } from '../../types/vm-import/ovirt/vm-import';
@@ -71,3 +73,23 @@ export enum VMTabEnum {
   nics = 'Network Interfaces',
   disks = 'Disks',
 }
+
+export type ObjectBundle = {
+  vm: VMKind;
+  vmi: VMIKind;
+  vmImport: VMImportKind;
+};
+
+export type VMRowObjType = {
+  metadata: {
+    name: string;
+    namespace: string;
+    status: string;
+    node: string;
+    creationTimestamp: string;
+    uid: string;
+    lookupID: string;
+    vmStatusBundle: VMStatusBundle;
+    vmImportStatus?: V2VVMImportStatus;
+  };
+} & ObjectBundle;
diff --git a/frontend/packages/local-storage-operator-plugin/src/components/disks-list/disks-list-page.tsx b/frontend/packages/local-storage-operator-plugin/src/components/disks-list/disks-list-page.tsx
index b7dbb2dce26..e3d8cbed4bd 100644
--- a/frontend/packages/local-storage-operator-plugin/src/components/disks-list/disks-list-page.tsx
+++ b/frontend/packages/local-storage-operator-plugin/src/components/disks-list/disks-list-page.tsx
@@ -175,11 +175,11 @@ export const NodesDisksListPage: React.FC<NodesDisksListPageProps> = ({
     </EmptyState>
   );
 
-  const diskFilters: RowFilter[] = [
+  const diskFilters: RowFilter<DiskMetadata>[] = [
     {
       type: 'disk-state',
       filterGroupName: t('lso-plugin~Disk State'),
-      reducer: (disk: DiskMetadata) => {
+      reducer: (disk) => {
         return disk?.status?.state;
       },
       items: [
@@ -187,15 +187,12 @@ export const NodesDisksListPage: React.FC<NodesDisksListPageProps> = ({
         { id: DiskStates.NotAvailable, title: t('lso-plugin~NotAvailable') },
         { id: DiskStates.Unknown, title: t('lso-plugin~Unknown') },
       ],
-      filter: (
-        states: { all: (keyof typeof DiskStates)[]; selected: Set<keyof typeof DiskStates> },
-        disk: DiskMetadata,
-      ) => {
+      filter: (states, disk) => {
         if (!states || !states.selected || _.isEmpty(states.selected)) {
           return true;
         }
         const diskState = disk?.status.state;
-        return states.selected.has(diskState) || !_.includes(states.all, diskState);
+        return states.selected.includes(diskState) || !_.includes(states.all, diskState);
       },
     },
   ];
diff --git a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/table-filters.ts b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/table-filters.ts
index 956aa306d8a..7b021d53696 100644
--- a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/table-filters.ts
+++ b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/table-filters.ts
@@ -64,15 +64,17 @@ export const getHostFilterStatus = (bundle: BareMetalHostBundle): string => {
   return _.findKey(hostStatesToFilterMap, ({ states }) => states.includes(bundle.status.status));
 };
 
-export const hostStatusFilter = (t: TFunction): RowFilter => ({
+export const hostStatusFilter = (t: TFunction): RowFilter<BareMetalHostBundle> => ({
   filterGroupName: 'Status',
   type: 'host-status',
   reducer: getHostFilterStatus,
   items: _.map(hostStatesToFilterMap, ({ title }, id) => ({ id, title: t(title) })),
-  filter: (groups, bundle: BareMetalHostBundle) => {
+  filter: (groups, bundle) => {
     const status = getHostFilterStatus(bundle);
     return (
-      groups.selected.has(status) || !_.includes(groups.all, status) || _.isEmpty(groups.selected)
+      groups.selected?.includes(status) ||
+      !_.includes(groups.all, status) ||
+      _.isEmpty(groups.selected)
     );
   },
 });
diff --git a/frontend/packages/metal3-plugin/src/components/baremetal-nodes/table-filters.ts b/frontend/packages/metal3-plugin/src/components/baremetal-nodes/table-filters.ts
index 1423ac1f3df..b630be1922e 100644
--- a/frontend/packages/metal3-plugin/src/components/baremetal-nodes/table-filters.ts
+++ b/frontend/packages/metal3-plugin/src/components/baremetal-nodes/table-filters.ts
@@ -37,10 +37,12 @@ export const bareMetalNodeStatusFilter = (t: TFunction): RowFilter<BareMetalNode
   type: 'bare-metal-node-status',
   reducer: getBareMetalNodeFilterStatus,
   items: _.map(statesToFilterMap, ({ titleKey }, id) => ({ id, title: t(titleKey) })),
-  filter: (groups, bundle: BareMetalNodeListBundle) => {
+  filter: (groups, bundle) => {
     const status = isCSRBundle(bundle) ? 'approval' : getBareMetalNodeFilterStatus(bundle);
     return (
-      groups.selected.has(status) || !_.includes(groups.all, status) || _.isEmpty(groups.selected)
+      groups.selected?.includes(status) ||
+      !_.includes(groups.all, status) ||
+      _.isEmpty(groups.selected)
     );
   },
 });
diff --git a/frontend/packages/pipelines-plugin/src/utils/pipeline-filter-reducer.ts b/frontend/packages/pipelines-plugin/src/utils/pipeline-filter-reducer.ts
index 4c13628de0c..cef1b503cc4 100644
--- a/frontend/packages/pipelines-plugin/src/utils/pipeline-filter-reducer.ts
+++ b/frontend/packages/pipelines-plugin/src/utils/pipeline-filter-reducer.ts
@@ -65,20 +65,20 @@ export const pipelineRunFilterReducer = (pipelineRun): string => {
 };
 
 export const pipelineStatusFilter = (filters, pipeline) => {
-  if (!filters || !filters.selected || !filters.selected.size) {
+  if (!filters || !filters.selected || !filters.selected.length) {
     return true;
   }
   const status = pipelineFilterReducer(pipeline);
-  return filters.selected.has(status) || !_.includes(filters.all, status);
+  return filters.selected?.includes(status) || !_.includes(filters.all, status);
 };
 
 export const pipelineRunStatusFilter = (phases, pipeline) => {
-  if (!phases || !phases.selected || !phases.selected.size) {
+  if (!phases || !phases.selected || !phases.selected.length) {
     return true;
   }
 
   const status = pipelineRunFilterReducer(pipeline);
-  return phases.selected.has(status) || !_.includes(phases.all, status);
+  return phases.selected?.includes(status) || !_.includes(phases.all, status);
 };
 
 export const pipelineResourceFilterReducer = (pipelineResource): string => {
@@ -86,11 +86,11 @@ export const pipelineResourceFilterReducer = (pipelineResource): string => {
 };
 
 export const pipelineResourceTypeFilter = (filters, pipelineResource): boolean => {
-  if (!filters || !filters.selected || !filters.selected.size) {
+  if (!filters || !filters.selected || !filters.selected.length) {
     return true;
   }
   const type = pipelineResourceFilterReducer(pipelineResource);
-  return filters.selected.has(type) || !_.includes(filters.all, type);
+  return filters.selected?.includes(type) || !_.includes(filters.all, type);
 };
 
 export const taskRunFilterReducer = (taskRun): string => {
diff --git a/frontend/public/actions/k8s.ts b/frontend/public/actions/k8s.ts
index 6775982af34..d39b3416f23 100644
--- a/frontend/public/actions/k8s.ts
+++ b/frontend/public/actions/k8s.ts
@@ -12,6 +12,7 @@ import { makeReduxID } from '../components/utils/k8s-watcher';
 import { APIServiceModel } from '../models';
 import { coFetchJSON } from '../co-fetch';
 import { referenceForModel, K8sResourceKind, K8sKind, fetchSwagger } from '../module/k8s';
+import { FilterValue } from '../components/factory/table-filters';
 
 export enum ActionType {
   ReceivedResources = 'resources',
@@ -71,7 +72,7 @@ export const getResources = () => (dispatch: Dispatch) => {
     });
 };
 
-export const filterList = (id: string, name: string, value: string) =>
+export const filterList = (id: string, name: string, value: FilterValue) =>
   action(ActionType.FilterList, { id, name, value });
 
 export const startWatchK8sObject = (id: string) => action(ActionType.StartWatchK8sObject, { id });
diff --git a/frontend/public/components/RBAC/bindings.jsx b/frontend/public/components/RBAC/bindings.jsx
index a261896ce06..aba3eff7ce5 100644
--- a/frontend/public/components/RBAC/bindings.jsx
+++ b/frontend/public/components/RBAC/bindings.jsx
@@ -10,7 +10,12 @@ import { useActiveNamespace } from '@console/shared';
 import { ClusterRoleBindingModel } from '../../models';
 import { getQN, k8sCreate, k8sPatch, referenceFor } from '../../module/k8s';
 import * as UIActions from '../../actions/ui';
-import { MultiListPage, Table, TableData } from '../factory';
+import { Table, TableData } from '../factory';
+import ListPageFilter from '../factory/ListPage/ListPageFilter';
+import ListPageHeader from '../factory/ListPage/ListPageHeader';
+import ListPageBody from '../factory/ListPage/ListPageBody';
+import { useListPageFilter } from '../factory/ListPage/filter-hook';
+import { ListPageCreateLink } from '../factory/ListPage/ListPageCreate';
 import { RadioGroup } from '../radio';
 import { confirmModal } from '../modals';
 import {
@@ -34,6 +39,7 @@ import { connectToFlags } from '../../reducers/connectToFlags';
 import { flagPending } from '../../reducers/features';
 import { useTranslation, withTranslation } from 'react-i18next';
 import i18next from 'i18next';
+import { useK8sWatchResources } from '../utils/k8s-watch-hook';
 
 const bindingKind = (binding) =>
   binding.metadata.namespace ? 'RoleBinding' : 'ClusterRoleBinding';
@@ -280,63 +286,101 @@ export const bindingType = (binding) => {
   return binding.metadata.namespace ? 'namespace' : 'cluster';
 };
 
-const roleResources = [
-  { kind: 'RoleBinding', namespaced: true },
-  { kind: 'ClusterRoleBinding', namespaced: false, optional: true },
-];
-
 export const RoleBindingsPage = ({
   namespace = undefined,
   showTitle = true,
   mock = false,
-  staticFilters = undefined,
+  staticFilters,
   name,
   kind,
   createPath = `/k8s/cluster/rolebindings/~new${
     name && kind ? `?subjectName=${name}&subjectKind=${kind}` : ''
   }`,
+  hideLabelFilter = false,
+  hideNameLabelFilters = false,
+  hideColumnManagement = false,
 }) => {
   const { t } = useTranslation();
-  const rowFilters = [
-    {
-      filterGroupName: t('public~Kind'),
-      type: 'role-binding-kind',
-      reducer: bindingType,
-      itemsGenerator: ({ ClusterRoleBinding: data }) => {
-        const items = [
-          { id: 'namespace', title: t('public~Namespace RoleBindings') },
-          { id: 'system', title: t('public~System RoleBindings') },
-        ];
-        if (data && data.loaded && !data.loadError) {
-          items.unshift({
-            id: 'cluster',
-            title: t('public~Cluster-wide RoleBindings'),
-          });
-        }
-        return items;
-      },
+  const resources = useK8sWatchResources({
+    RoleBinding: {
+      kind: 'RoleBinding',
+      namespaced: true,
+      namespace,
+      isList: true,
     },
-  ];
+    ClusterRoleBinding: {
+      kind: 'ClusterRoleBinding',
+      namespaced: false,
+      isList: true,
+    },
+  });
+
+  const data = React.useMemo(() => flatten(resources), [resources]);
+
+  const loaded = Object.values(resources).every((r) => r.loaded);
+
+  const hasCRBindings =
+    resources.ClusterRoleBinding.data?.length > 0 &&
+    resources.ClusterRoleBinding.loaded &&
+    !resources.ClusterRoleBinding.loadError;
+
+  const rowFilters = React.useMemo(
+    () => [
+      {
+        filterGroupName: t('public~Kind'),
+        type: 'role-binding-kind',
+        reducer: bindingType,
+        filter: (filter, binding) =>
+          filter.selected?.includes(bindingType(binding)) || !filter.selected?.size,
+        items: hasCRBindings
+          ? [
+              {
+                id: 'cluster',
+                title: t('public~Cluster-wide RoleBindings'),
+              },
+              { id: 'namespace', title: t('public~Namespace RoleBindings') },
+              { id: 'system', title: t('public~System RoleBindings') },
+            ]
+          : [
+              { id: 'namespace', title: t('public~Namespace RoleBindings') },
+              { id: 'system', title: t('public~System RoleBindings') },
+            ],
+      },
+    ],
+    [hasCRBindings, t],
+  );
+
+  const [staticData, filteredData, onFilterChange] = useListPageFilter(
+    data,
+    rowFilters,
+    staticFilters,
+  );
+
   return (
-    <MultiListPage
-      canCreate={!mock}
-      createButtonText={t('public~Create binding')}
-      createProps={{
-        to: createPath,
-      }}
-      mock={mock}
-      filterLabel={t('public~by role or subject')}
-      flatten={flatten}
-      label={t('public~RoleBindings')}
-      ListComponent={BindingsList}
-      namespace={namespace}
-      resources={roleResources}
-      rowFilters={staticFilters ? [] : rowFilters}
-      staticFilters={staticFilters}
-      showTitle={showTitle}
-      textFilter="role-binding"
-      title={t('public~RoleBindings')}
-    />
+    <>
+      <ListPageHeader title={showTitle ? t('public~RoleBindings') : undefined}>
+        {!mock && (
+          <ListPageCreateLink to={createPath}>{t('public~Create binding')}</ListPageCreateLink>
+        )}
+      </ListPageHeader>
+      <ListPageBody>
+        <ListPageFilter
+          data={staticData}
+          loaded={loaded}
+          rowFilters={rowFilters}
+          onFilterChange={onFilterChange}
+          hideNameLabelFilters={hideNameLabelFilters}
+          hideLabelFilter={hideLabelFilter}
+          hideColumnManagement={hideColumnManagement}
+        />
+        <BindingsList
+          data={filteredData}
+          loaded={loaded}
+          loadError={resources.RoleBinding.loadError}
+          mock={mock}
+        />
+      </ListPageBody>
+    </>
   );
 };
 
diff --git a/frontend/public/components/cron-job.tsx b/frontend/public/components/cron-job.tsx
index 3d892fb3951..5f52f40e8e7 100644
--- a/frontend/public/components/cron-job.tsx
+++ b/frontend/public/components/cron-job.tsx
@@ -183,37 +183,41 @@ const getPodsWatcher = (namespace: string) => {
   ];
 };
 
-export const CronJobPodsComponent: React.FC<CronJobPodsComponentProps> = ({ obj }) => (
-  <div className="co-m-pane__body">
-    <Firehose resources={getPodsWatcher(obj.metadata.namespace)}>
-      <ListPageWrapper
-        flatten={(
-          _resources: FirehoseResourcesResult<{
-            jobs: K8sResourceCommon[];
-            pods: K8sResourceCommon[];
-          }>,
-        ) => {
-          if (!_resources.jobs.loaded || !_resources.pods.loaded) {
-            return [];
-          }
-          const jobs = _resources.jobs.data.filter((job) =>
-            job.metadata?.ownerReferences?.find((ref) => ref.uid === obj.metadata.uid),
-          );
-          return (
-            jobs &&
-            jobs.reduce((acc, job) => {
-              acc.push(...getPodsForResource(job, _resources));
-              return acc;
-            }, [])
-          );
-        }}
-        kinds={['Pods']}
-        ListComponent={PodList}
-        rowFilters={getPodFilters()}
-      />
-    </Firehose>
-  </div>
-);
+export const CronJobPodsComponent: React.FC<CronJobPodsComponentProps> = ({ obj }) => {
+  const { t } = useTranslation();
+  const podFilters = React.useMemo(() => getPodFilters(t), [t]);
+  return (
+    <div className="co-m-pane__body">
+      <Firehose resources={getPodsWatcher(obj.metadata.namespace)}>
+        <ListPageWrapper
+          flatten={(
+            _resources: FirehoseResourcesResult<{
+              jobs: K8sResourceCommon[];
+              pods: K8sResourceCommon[];
+            }>,
+          ) => {
+            if (!_resources.jobs.loaded || !_resources.pods.loaded) {
+              return [];
+            }
+            const jobs = _resources.jobs.data.filter((job) =>
+              job.metadata?.ownerReferences?.find((ref) => ref.uid === obj.metadata.uid),
+            );
+            return (
+              jobs &&
+              jobs.reduce((acc, job) => {
+                acc.push(...getPodsForResource(job, _resources));
+                return acc;
+              }, [])
+            );
+          }}
+          kinds={['Pods']}
+          ListComponent={PodList}
+          rowFilters={podFilters}
+        />
+      </Firehose>
+    </div>
+  );
+};
 
 export type CronJobJobsComponentProps = {
   obj: K8sResourceKind;
diff --git a/frontend/public/components/daemon-set.tsx b/frontend/public/components/daemon-set.tsx
index 24b4de89f99..c494755bc63 100644
--- a/frontend/public/components/daemon-set.tsx
+++ b/frontend/public/components/daemon-set.tsx
@@ -231,7 +231,7 @@ export const DaemonSetsPage: React.FC<DaemonSetsPageProps> = (props) => (
 );
 
 const DaemonSetPods: React.FC<DaemonSetPodsProps> = (props) => (
-  <PodsComponent {...props} customData={{ showNodes: true }} />
+  <PodsComponent {...props} showNodes />
 );
 
 export const DaemonSetsDetailsPage: React.FC<DaemonSetsDetailsPageProps> = (props) => {
diff --git a/frontend/public/components/factory/ListPage/ListPageBody.tsx b/frontend/public/components/factory/ListPage/ListPageBody.tsx
new file mode 100644
index 00000000000..df3d21644fd
--- /dev/null
+++ b/frontend/public/components/factory/ListPage/ListPageBody.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export const ListPageBody: React.FC = ({ children }) => {
+  return <div className="co-m-pane__body co-m-pane__body--no-top-margin">{children}</div>;
+};
+
+export default ListPageBody;
diff --git a/frontend/public/components/factory/ListPage/ListPageCreate.tsx b/frontend/public/components/factory/ListPage/ListPageCreate.tsx
new file mode 100644
index 00000000000..ebed207382d
--- /dev/null
+++ b/frontend/public/components/factory/ListPage/ListPageCreate.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { Link } from 'react-router-dom';
+import {
+  Button,
+  ButtonProps,
+  DropdownToggle,
+  Dropdown,
+  DropdownItem,
+} from '@patternfly/react-core';
+import { CaretDownIcon } from '@patternfly/react-icons';
+import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
+import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace';
+import { ALL_NAMESPACES_KEY } from '@console/shared/src/constants/common';
+
+import { RequireCreatePermission } from '../../utils';
+import { K8sKind, GroupVersionKind } from '../../../module/k8s/types';
+
+type CreateWithPermissionsProps = {
+  createAccessReview?: {
+    model: K8sKind;
+    namespace?: string;
+  };
+};
+
+const CreateWithPermissions: React.FC<CreateWithPermissionsProps> = ({
+  createAccessReview,
+  children,
+}) =>
+  !_.isEmpty(createAccessReview) ? (
+    <RequireCreatePermission
+      model={createAccessReview.model}
+      namespace={createAccessReview.namespace}
+    >
+      {children}
+    </RequireCreatePermission>
+  ) : (
+    <>{children}</>
+  );
+
+type ListPageCreateLinkProps = CreateWithPermissionsProps & {
+  to: string;
+};
+
+export const ListPageCreateLink: React.FC<ListPageCreateLinkProps> = ({
+  to,
+  createAccessReview,
+  children,
+}) => (
+  <CreateWithPermissions createAccessReview={createAccessReview}>
+    <Link className="co-m-primary-action" to={to}>
+      <Button variant="primary" id="yaml-create" data-test="item-create">
+        {children}
+      </Button>
+    </Link>
+  </CreateWithPermissions>
+);
+
+type ListPageCreateButtonProps = CreateWithPermissionsProps & ButtonProps;
+
+export const ListPageCreateButton: React.FC<ListPageCreateButtonProps> = ({
+  createAccessReview,
+  ...rest
+}) => (
+  <CreateWithPermissions createAccessReview={createAccessReview}>
+    <Button variant="primary" id="yaml-create" data-test="item-create" {...rest} />
+  </CreateWithPermissions>
+);
+
+type ListPageCreateDropdownProps = CreateWithPermissionsProps & {
+  items: {
+    [key: string]: React.ReactNode;
+  };
+  onClick: (item: string) => void;
+};
+
+export const ListPageCreateDropdown: React.FC<ListPageCreateDropdownProps> = ({
+  items,
+  createAccessReview,
+  children,
+  onClick,
+}) => {
+  const [isOpen, setOpen] = React.useState(false);
+  return (
+    <CreateWithPermissions createAccessReview={createAccessReview}>
+      <Dropdown
+        toggle={
+          <DropdownToggle onToggle={setOpen} toggleIndicator={CaretDownIcon} isPrimary>
+            {children}
+          </DropdownToggle>
+        }
+        dropdownItems={Object.keys(items).map((key) => (
+          <DropdownItem key={key} component="button" onClick={() => onClick(key)}>
+            {items[key]}
+          </DropdownItem>
+        ))}
+        isOpen={isOpen}
+        data-test="item-create"
+      />
+    </CreateWithPermissions>
+  );
+};
+
+type ListPageCreateProps = CreateWithPermissionsProps & {
+  groupVersionKind: GroupVersionKind;
+};
+
+const ListPageCreate: React.FC<ListPageCreateProps> = ({
+  createAccessReview,
+  groupVersionKind,
+  children,
+}) => {
+  const [k8sModel] = useK8sModel(groupVersionKind);
+  const [namespace] = useActiveNamespace();
+  let to: string;
+  if (k8sModel) {
+    const usedNamespace = k8sModel.namespaced
+      ? namespace === ALL_NAMESPACES_KEY
+        ? undefined
+        : namespace
+      : undefined;
+    to = usedNamespace
+      ? `/k8s/ns/${usedNamespace || 'default'}/${k8sModel.plural}/~new`
+      : `/k8s/cluster/${k8sModel.plural}/~new`;
+    if (k8sModel.crd) {
+      to = usedNamespace
+        ? `/k8s/ns/${usedNamespace || 'default'}/${groupVersionKind}/~new`
+        : `/k8s/cluster/${groupVersionKind}/~new`;
+    }
+  }
+
+  return (
+    !!to && (
+      <ListPageCreateLink createAccessReview={createAccessReview} to={to}>
+        {children}
+      </ListPageCreateLink>
+    )
+  );
+};
+
+export default ListPageCreate;
diff --git a/frontend/public/components/factory/ListPage/ListPageFilter.tsx b/frontend/public/components/factory/ListPage/ListPageFilter.tsx
new file mode 100644
index 00000000000..7e62735f793
--- /dev/null
+++ b/frontend/public/components/factory/ListPage/ListPageFilter.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+
+import { FilterToolbar, RowFilter } from '../../filter-toolbar';
+import { ColumnLayout } from '../../modals/column-management-modal';
+import { OnFilterChange } from './filter-hook';
+
+type ListPageFilterProps<D = any> = {
+  data: D;
+  loaded: boolean;
+  rowFilters?: RowFilter[];
+  nameFilterPlaceholder?: string;
+  labelFilterPlaceholder?: string;
+  textFilter?: string;
+  hideNameLabelFilters?: boolean;
+  hideLabelFilter?: boolean;
+  columnLayout?: ColumnLayout;
+  onFilterChange: OnFilterChange;
+  hideColumnManagement?: boolean;
+};
+
+const ListPageFilter: React.FC<ListPageFilterProps> = ({
+  data,
+  loaded,
+  rowFilters,
+  nameFilterPlaceholder,
+  labelFilterPlaceholder,
+  textFilter,
+  hideNameLabelFilters,
+  hideLabelFilter,
+  columnLayout,
+  onFilterChange,
+  hideColumnManagement,
+}) =>
+  loaded &&
+  !_.isEmpty(data) && (
+    <FilterToolbar
+      rowFilters={rowFilters}
+      data={data}
+      nameFilterPlaceholder={nameFilterPlaceholder}
+      labelFilterPlaceholder={labelFilterPlaceholder}
+      onFilterChange={onFilterChange}
+      textFilter={textFilter}
+      hideNameLabelFilters={hideNameLabelFilters}
+      hideLabelFilter={hideLabelFilter}
+      columnLayout={columnLayout}
+      hideColumnManagement={hideColumnManagement}
+    />
+  );
+
+export default ListPageFilter;
diff --git a/frontend/public/components/factory/ListPage/ListPageHeader.tsx b/frontend/public/components/factory/ListPage/ListPageHeader.tsx
new file mode 100644
index 00000000000..4035601de56
--- /dev/null
+++ b/frontend/public/components/factory/ListPage/ListPageHeader.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as classNames from 'classnames';
+
+import { PageHeading } from '../../utils';
+
+type ListPageHeaderProps = {
+  title: string;
+  helpText?: React.ReactNode;
+  badge?: React.ReactNode;
+};
+
+const ListPageHeader: React.FC<ListPageHeaderProps> = ({ helpText, title, children, badge }) => (
+  <>
+    {/* Badge rendered from PageHeading only when title is present */}
+    <PageHeading title={title} badge={title ? badge : null} className="co-m-nav-title--row">
+      <div className={classNames({ 'co-m-pane__createLink--no-title': !title })}>{children}</div>
+      {!title && badge && <div>{badge}</div>}
+    </PageHeading>
+    {helpText && <p className="co-m-pane__help-text co-help-text">{helpText}</p>}
+  </>
+);
+
+export default ListPageHeader;
diff --git a/frontend/public/components/factory/ListPage/filter-hook.ts b/frontend/public/components/factory/ListPage/filter-hook.ts
new file mode 100644
index 00000000000..8df739015ac
--- /dev/null
+++ b/frontend/public/components/factory/ListPage/filter-hook.ts
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { useLocation } from 'react-router-dom';
+
+import { getAllTableFilters, FilterValue, FilterMap } from '../table-filters';
+import { RowFilter } from '../../filter-toolbar';
+
+export type OnFilterChange = (type: string, value: FilterValue) => void;
+
+const filterData = <D>(
+  data: D[],
+  filter: { [key: string]: FilterValue } = {},
+  rowFilters?: FilterMap,
+) => {
+  const filterTypes = Object.keys(filter);
+  return data?.filter((d) =>
+    filterTypes.every((type) =>
+      rowFilters[type] && !_.isEmpty(filter?.[type]) ? rowFilters[type](filter[type], d) : true,
+    ),
+  );
+};
+
+export const useListPageFilter = <D>(
+  data: D[],
+  rowFilters?: RowFilter[],
+  staticFilters?: { [key: string]: FilterValue },
+): [D[], D[], OnFilterChange] => {
+  const [filter, setFilter] = React.useState<{ [key: string]: FilterValue }>();
+
+  const location = useLocation();
+
+  React.useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const name = params.get('name');
+    if (name && name !== filter?.name?.selected?.[0]) {
+      setFilter((state) => ({ ...state, name: { selected: [name] } }));
+    }
+  }, [filter, location]);
+
+  const onFilterChange = React.useCallback(
+    (type, value) => setFilter((state) => ({ ...state, [type]: value })),
+    [],
+  );
+
+  return React.useMemo(() => {
+    const tableFilters = getAllTableFilters(rowFilters);
+
+    const staticData = filterData(data, staticFilters, tableFilters);
+    const filteredData = filterData(staticData, filter, tableFilters);
+
+    return [staticData, filteredData, onFilterChange];
+  }, [data, filter, onFilterChange, rowFilters, staticFilters]);
+};
diff --git a/frontend/public/components/factory/Table/VirtualizedTable.tsx b/frontend/public/components/factory/Table/VirtualizedTable.tsx
new file mode 100644
index 00000000000..a16aedb356c
--- /dev/null
+++ b/frontend/public/components/factory/Table/VirtualizedTable.tsx
@@ -0,0 +1,238 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import {
+  Table as PfTable,
+  TableHeader,
+  TableGridBreakpoint,
+  OnSelect,
+  SortByDirection,
+  ICell,
+} from '@patternfly/react-table';
+import { AutoSizer, WindowScroller } from '@patternfly/react-virtualized-extension';
+
+import VirtualizedTableBody from './VirtualizedTableBody';
+import { history, StatusBox, WithScrollContainer } from '../../utils';
+import { sortResourceByValue } from './sort';
+
+const BREAKPOINT_SM = 576;
+const BREAKPOINT_MD = 768;
+const BREAKPOINT_LG = 992;
+const BREAKPOINT_XL = 1200;
+const BREAKPOINT_XXL = 1400;
+const MAX_COL_XS = 2;
+const MAX_COL_SM = 4;
+const MAX_COL_MD = 4;
+const MAX_COL_LG = 6;
+const MAX_COL_XL = 8;
+
+const isColumnVisible = <D extends any>(
+  widthInPixels: number,
+  column: TableColumn<D>,
+  columnIDs: string[],
+): boolean => {
+  if (column.title === '') {
+    return true;
+  }
+  const columnIndex = columnIDs.indexOf(column.id);
+  if (widthInPixels < BREAKPOINT_SM) {
+    return columnIndex < MAX_COL_XS;
+  }
+  if (widthInPixels < BREAKPOINT_MD) {
+    return columnIndex < MAX_COL_SM;
+  }
+  if (widthInPixels < BREAKPOINT_LG) {
+    return columnIndex < MAX_COL_MD;
+  }
+  if (widthInPixels < BREAKPOINT_XL) {
+    return columnIndex < MAX_COL_LG;
+  }
+  if (widthInPixels < BREAKPOINT_XXL) {
+    return columnIndex < MAX_COL_XL;
+  }
+  return true;
+};
+
+export type TableColumn<D> = ICell & {
+  title: string;
+  id?: string;
+  additional?: boolean;
+  sort?: ((data: D[], sortDirection: SortByDirection) => D[]) | string;
+};
+
+export type RowProps<D, R extends any = {}> = {
+  obj: D;
+  rowData: R;
+  activeColumnIDs: Set<string>;
+};
+
+type VirtualizedTableProps<D, R extends any = {}> = {
+  data: D[];
+  unfilteredData: D[];
+  loaded: boolean;
+  loadError: any;
+  columns: TableColumn<D>[];
+  Row: React.ComponentType<RowProps<D, R>>;
+  NoDataEmptyMsg?: React.ComponentType<{}>;
+  EmptyMsg?: React.ComponentType<{}>;
+  scrollNode?: () => HTMLElement;
+  onSelect?: OnSelect;
+  label?: string;
+  'aria-label'?: string;
+  gridBreakPoint?: TableGridBreakpoint;
+  rowData?: R;
+};
+
+const VirtualizedTable = <D, R extends any = {}>({
+  data,
+  loaded,
+  loadError,
+  columns: allColumns,
+  NoDataEmptyMsg,
+  EmptyMsg,
+  scrollNode,
+  label,
+  'aria-label': ariaLabel,
+  gridBreakPoint = TableGridBreakpoint.none,
+  onSelect,
+  Row,
+  rowData,
+  unfilteredData,
+}: VirtualizedTableProps<D, R>) => {
+  const columnShift = onSelect ? 1 : 0; //shift indexes by 1 if select provided
+  const [sortBy, setSortBy] = React.useState<{
+    index: number;
+    direction: SortByDirection;
+  }>({ index: columnShift, direction: SortByDirection.asc });
+
+  const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
+
+  const columns = React.useMemo(() => {
+    const colIDs = allColumns.map((c) => c.id);
+    return allColumns.filter((col) => isColumnVisible(windowWidth, col, colIDs));
+  }, [windowWidth, allColumns]);
+
+  const applySort = React.useCallback(
+    (index, direction) => {
+      const url = new URL(window.location.href);
+      const sp = new URLSearchParams(window.location.search);
+
+      const sortColumn = columns[index - columnShift];
+      if (sortColumn) {
+        sp.set('orderBy', direction);
+        sp.set('sortBy', sortColumn.title);
+        history.replace(`${url.pathname}?${sp.toString()}${url.hash}`);
+        setSortBy({
+          index,
+          direction,
+        });
+      }
+    },
+    [columnShift, columns],
+  );
+
+  data = React.useMemo(() => {
+    const sortColumn = columns[sortBy.index - columnShift];
+    if (!sortColumn.sort) {
+      return data;
+    } else if (typeof sortColumn.sort === 'string') {
+      return data.sort(
+        sortResourceByValue(sortBy.direction, (obj) => _.get(obj, sortColumn.sort as string, '')),
+      );
+    }
+    return sortColumn.sort(data, sortBy.direction);
+  }, [columnShift, columns, data, sortBy.direction, sortBy.index]);
+
+  React.useEffect(() => {
+    const handleResize = _.debounce(() => setWindowWidth(window.innerWidth), 100);
+
+    const sp = new URLSearchParams(window.location.search);
+    const columnIndex = _.findIndex(columns, { title: sp.get('sortBy') });
+
+    if (columnIndex > -1) {
+      const sortOrder =
+        sp.get('orderBy') === SortByDirection.desc.valueOf()
+          ? SortByDirection.desc
+          : SortByDirection.asc;
+      setSortBy({
+        index: columnIndex + columnShift,
+        direction: sortOrder,
+      });
+    }
+
+    // re-render after resize
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onSort = React.useCallback(
+    (event, index, direction) => {
+      event.preventDefault();
+      applySort(index, direction);
+    },
+    [applySort],
+  );
+
+  const renderVirtualizedTable = (scrollContainer) => (
+    <WindowScroller scrollElement={scrollContainer}>
+      {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
+        <AutoSizer disableHeight>
+          {({ width }) => (
+            <div ref={registerChild}>
+              <VirtualizedTableBody<D, R>
+                Row={Row}
+                height={height}
+                isScrolling={isScrolling}
+                onChildScroll={onChildScroll}
+                data={data}
+                columns={columns}
+                scrollTop={scrollTop}
+                width={width}
+                rowData={rowData}
+              />
+            </div>
+          )}
+        </AutoSizer>
+      )}
+    </WindowScroller>
+  );
+
+  return (
+    <div className="co-m-table-grid co-m-table-grid--bordered">
+      <StatusBox
+        skeleton={<div className="loading-skeleton--table" />}
+        data={data}
+        loaded={loaded}
+        loadError={loadError}
+        unfilteredData={unfilteredData}
+        label={label}
+        NoDataEmptyMsg={NoDataEmptyMsg}
+        EmptyMsg={EmptyMsg}
+      >
+        <div role="grid" aria-label={ariaLabel} aria-rowcount={data?.length}>
+          <PfTable
+            cells={columns}
+            rows={[]}
+            gridBreakPoint={gridBreakPoint}
+            onSort={onSort}
+            onSelect={onSelect}
+            sortBy={sortBy}
+            className="pf-m-compact pf-m-border-rows"
+            role="presentation"
+          >
+            <TableHeader />
+          </PfTable>
+          {scrollNode ? (
+            renderVirtualizedTable(scrollNode)
+          ) : (
+            <WithScrollContainer>{renderVirtualizedTable}</WithScrollContainer>
+          )}
+        </div>
+      </StatusBox>
+    </div>
+  );
+};
+
+export default VirtualizedTable;
diff --git a/frontend/public/components/factory/Table/VirtualizedTableBody.tsx b/frontend/public/components/factory/Table/VirtualizedTableBody.tsx
new file mode 100644
index 00000000000..2e84c604fa6
--- /dev/null
+++ b/frontend/public/components/factory/Table/VirtualizedTableBody.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { VirtualTableBody } from '@patternfly/react-virtualized-extension';
+import { CellMeasurerCache, CellMeasurer } from 'react-virtualized';
+import { Scroll } from '@patternfly/react-virtualized-extension/dist/js/components/Virtualized/types';
+import { K8sResourceCommon } from '@console/dynamic-plugin-sdk';
+import { TableColumn, RowProps } from './VirtualizedTable';
+import { TableRow } from '../table';
+
+type VirtualizedTableBodyProps<D, R = {}> = {
+  Row: React.ComponentType<RowProps<D, R>>;
+  data: D[];
+  height: number;
+  isScrolling: boolean;
+  onChildScroll: (params: Scroll) => void;
+  columns: TableColumn<D>[];
+  scrollTop: number;
+  width: number;
+  rowData?: R;
+  getRowId?: (obj: D) => string;
+  getRowTitle?: (obj: D) => string;
+  getRowClassName?: (obj: D) => string;
+};
+
+const RowMemo = React.memo<RowProps<any, any> & { Row: React.ComponentType<RowProps<any, any>> }>(
+  ({ Row, ...props }) => <Row {...props} />,
+);
+
+const VirtualizedTableBody = <D extends any, R extends any = {}>({
+  Row,
+  height,
+  isScrolling,
+  onChildScroll,
+  data,
+  columns,
+  scrollTop,
+  width,
+  rowData,
+  getRowId,
+  getRowTitle,
+  getRowClassName,
+}: VirtualizedTableBodyProps<D, R>) => {
+  const cellMeasurementCache = new CellMeasurerCache({
+    fixedWidth: true,
+    minHeight: 44,
+    keyMapper: (rowIndex) => (data?.[rowIndex] as K8sResourceCommon)?.metadata?.uid || rowIndex, // TODO custom keyMapper ?
+  });
+
+  const activeColumnIDs = React.useMemo(() => new Set(columns.map((c) => c.id)), [columns]);
+
+  const rowRenderer = ({ index, isVisible, key, style, parent }) => {
+    const rowArgs: RowProps<D, R> = {
+      obj: data[index],
+      activeColumnIDs,
+      rowData,
+    };
+
+    // do not render non visible elements (this excludes overscan)
+    if (!isVisible) {
+      return null;
+    }
+    return (
+      <CellMeasurer
+        cache={cellMeasurementCache}
+        columnIndex={0}
+        key={key}
+        parent={parent}
+        rowIndex={index}
+      >
+        <TableRow
+          id={getRowId?.(rowArgs.obj) ?? key}
+          index={index}
+          trKey={key}
+          style={style}
+          title={getRowTitle?.(rowArgs.obj)}
+          className={getRowClassName?.(rowArgs.obj)}
+        >
+          <RowMemo Row={Row} {...rowArgs} />
+        </TableRow>
+      </CellMeasurer>
+    );
+  };
+
+  return (
+    <VirtualTableBody
+      autoHeight
+      className="pf-c-table pf-m-compact pf-m-border-rows pf-c-virtualized pf-c-window-scroller"
+      deferredMeasurementCache={cellMeasurementCache}
+      rowHeight={cellMeasurementCache.rowHeight}
+      height={height || 0}
+      isScrolling={isScrolling}
+      onScroll={onChildScroll}
+      overscanRowCount={10}
+      columns={columns}
+      rows={data}
+      rowCount={data.length}
+      rowRenderer={rowRenderer}
+      scrollTop={scrollTop}
+      width={width}
+    />
+  );
+};
+
+export default VirtualizedTableBody;
diff --git a/frontend/public/components/factory/Table/active-columns-hook.ts b/frontend/public/components/factory/Table/active-columns-hook.ts
new file mode 100644
index 00000000000..9d6980fe4bc
--- /dev/null
+++ b/frontend/public/components/factory/Table/active-columns-hook.ts
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  ALL_NAMESPACES_KEY,
+  COLUMN_MANAGEMENT_CONFIGMAP_KEY,
+  COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
+  useActiveNamespace,
+  useUserSettingsCompatibility,
+} from '@console/shared';
+import { TableColumn } from './VirtualizedTable';
+
+export const useActiveColumns = <D = any>({
+  columns,
+  showNamespaceOverride,
+  columnManagementID,
+}: {
+  columns: TableColumn<D>[];
+  showNamespaceOverride: boolean;
+  columnManagementID: string;
+}): [TableColumn<D>[], boolean] => {
+  const [tableColumns, , userSettingsLoaded] = useUserSettingsCompatibility(
+    COLUMN_MANAGEMENT_CONFIGMAP_KEY,
+    COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
+    undefined,
+    true,
+  );
+  const [namespace] = useActiveNamespace();
+
+  return React.useMemo(() => {
+    const activeColumnIDs: Set<string> =
+      tableColumns?.[columnManagementID]?.length > 0
+        ? new Set(tableColumns[columnManagementID])
+        : new Set(
+            columns.map((col) => {
+              if (col.id && !col.additional) {
+                return col.id;
+              }
+            }),
+          );
+
+    if (showNamespaceOverride && !activeColumnIDs.has('namespace')) {
+      activeColumnIDs.add('namespace');
+    }
+
+    let activeColumns = columns.filter((c) => activeColumnIDs.has(c.id) || c.title === '');
+    if (namespace && namespace !== ALL_NAMESPACES_KEY && !showNamespaceOverride) {
+      activeColumns = activeColumns.filter((column) => column.id !== 'namespace');
+    }
+    return [activeColumns, userSettingsLoaded];
+  }, [
+    tableColumns,
+    columnManagementID,
+    columns,
+    namespace,
+    showNamespaceOverride,
+    userSettingsLoaded,
+  ]);
+};
diff --git a/frontend/public/components/factory/Table/sort.ts b/frontend/public/components/factory/Table/sort.ts
new file mode 100644
index 00000000000..223e5caaa39
--- /dev/null
+++ b/frontend/public/components/factory/Table/sort.ts
@@ -0,0 +1,28 @@
+import { SortByDirection } from '@patternfly/react-table';
+
+import { K8sResourceCommon } from '../../../module/k8s';
+
+const isNumber = (value): value is number => Number.isFinite(value);
+
+export const sortResourceByValue = <D = any, V = any>(
+  sortDirection: SortByDirection,
+  valueGetter: (obj: D) => V,
+) => (a: D, b: D): number => {
+  const lang = navigator.languages[0] || navigator.language;
+  // Use `localCompare` with `numeric: true` for a natural sort order (e.g., pv-1, pv-9, pv-10)
+  const compareOpts = { numeric: true, ignorePunctuation: true };
+  const aValue = valueGetter(a);
+  const bValue = valueGetter(b);
+  const result: number =
+    isNumber(aValue) && isNumber(bValue)
+      ? aValue - bValue
+      : `${aValue}`.localeCompare(`${bValue}`, lang, compareOpts);
+  if (result !== 0) {
+    return sortDirection === SortByDirection.asc ? result : result * -1;
+  }
+
+  // Use name as a secondary sort for a stable sort.
+  const aName = (a as K8sResourceCommon)?.metadata?.name || '';
+  const bName = (b as K8sResourceCommon)?.metadata?.name || '';
+  return aName.localeCompare(bName, lang, compareOpts);
+};
diff --git a/frontend/public/components/factory/table-filters.ts b/frontend/public/components/factory/table-filters.ts
index 75fdbac4ad9..a6cc252ad46 100644
--- a/frontend/public/components/factory/table-filters.ts
+++ b/frontend/public/components/factory/table-filters.ts
@@ -4,7 +4,7 @@ import { nodeStatus, volumeSnapshotStatus } from '@console/app/src/status';
 import { getNodeRole, getLabelsAsString } from '@console/shared';
 import { routeStatus } from '../routes';
 import { secretTypeFilterReducer } from '../secret';
-import { bindingType, roleType } from '../RBAC';
+import { roleType } from '../RBAC';
 import {
   K8sResourceKind,
   MachineKind,
@@ -24,7 +24,8 @@ import {
   alertState,
   silenceState,
 } from '../monitoring/utils';
-import { Alert, Rule, Silence } from '../monitoring/types';
+import { Alert, AlertStates, Rule, Silence } from '../monitoring/types';
+import { RowFilter } from '../filter-toolbar';
 
 export const fuzzyCaseInsensitive = (a: string, b: string): boolean =>
   fuzzy(_.toLower(a), _.toLower(b));
@@ -33,19 +34,24 @@ const clusterServiceVersionDisplayName = (csv: K8sResourceKind): string =>
   csv?.spec?.displayName || csv?.metadata?.name;
 
 // TODO: Table filters are undocumented, stringly-typed, and non-obvious. We can change that.
-export const tableFilters: TableFilterMap = {
-  name: (filter, obj) => fuzzyCaseInsensitive(filter, obj.metadata.name),
+export const tableFilters: FilterMap = {
+  name: (filter, obj) => fuzzyCaseInsensitive(filter.selected?.[0], obj.metadata.name),
 
-  'catalog-source-name': (filter, obj) => fuzzyCaseInsensitive(filter, obj.name),
+  'catalog-source-name': (filter, obj) => fuzzyCaseInsensitive(filter.selected?.[0], obj.name),
 
   'resource-list-text': (filter, resource: Rule | Alert) => {
-    if (fuzzyCaseInsensitive(filter, resource.labels?.alertname || (resource as Rule)?.name)) {
+    if (
+      fuzzyCaseInsensitive(
+        filter.selected?.[0],
+        resource.labels?.alertname || (resource as Rule)?.name,
+      )
+    ) {
       return true;
     }
 
     // Search in alert description. Ignore case and whitespace, but don't use fuzzy since the
     // description can be long and will often match fuzzy searches that are not really relevant.
-    const needle = _.toLower(filter.replace(/\s/g, ''));
+    const needle = _.toLower(filter.selected?.[0]?.replace(/\s/g, ''));
     const haystack = _.toLower(alertDescription(resource)?.replace(/\s/g, ''));
     return haystack.includes(needle);
   },
@@ -59,58 +65,51 @@ export const tableFilters: TableFilterMap = {
   },
 
   'alert-severity': (filter, { labels }: Alert | Rule) =>
-    filter.selected.has(labels?.severity) || _.isEmpty(filter.selected),
+    filter.selected?.includes(labels?.severity) || _.isEmpty(filter.selected),
 
   'alert-source': (filter, alert: Alert) =>
-    filter.selected.has(alertSource(alert)) || _.isEmpty(filter.selected),
+    filter.selected?.includes(alertSource(alert)) || _.isEmpty(filter.selected),
 
   'alert-state': (filter, alert: Alert) =>
-    filter.selected.has(alertState(alert)) || _.isEmpty(filter.selected),
+    filter.selected?.includes(alertState(alert)) || _.isEmpty(filter.selected),
 
   'alerting-rule-has-alert-state': (filter, rule: Rule) =>
-    alertingRuleHasAlertState(rule, filter.selected) || _.isEmpty(filter.selected),
+    alertingRuleHasAlertState(rule, filter.selected?.[0] as AlertStates) ||
+    _.isEmpty(filter.selected),
 
-  'alerting-rule-name': (filter, rule: Rule) => fuzzyCaseInsensitive(filter, rule.name),
+  'alerting-rule-name': (filter, rule: Rule) =>
+    fuzzyCaseInsensitive(filter.selected?.[0], rule.name),
 
   'alerting-rule-source': (filter, rule: Rule) =>
-    filter.selected.has(alertingRuleSource(rule)) || _.isEmpty(filter.selected),
+    filter.selected?.includes(alertingRuleSource(rule)) || _.isEmpty(filter.selected),
 
-  'silence-name': (filter, silence: Silence) => fuzzyCaseInsensitive(filter, silence.name),
+  'silence-name': (filter, silence: Silence) =>
+    fuzzyCaseInsensitive(filter.selected?.[0], silence.name),
 
   'silence-state': (filter, silence: Silence) =>
-    filter.selected.has(silenceState(silence)) || _.isEmpty(filter.selected),
+    filter.selected?.includes(silenceState(silence)) || _.isEmpty(filter.selected),
 
   // Filter role by role kind
-  'role-kind': (filter, role) => filter.selected.has(roleType(role)) || filter.selected.size === 0,
-
-  // Filter role bindings by role kind
-  'role-binding-kind': (filter, binding) =>
-    filter.selected.has(bindingType(binding)) || filter.selected.size === 0,
+  'role-kind': (filter, role) =>
+    filter.selected?.includes(roleType(role)) || filter.selected?.length === 0,
 
   // Filter role bindings by text match
   'role-binding': (str, { metadata, roleRef, subject }) => {
-    const isMatch = (val) => fuzzyCaseInsensitive(str, val);
+    const isMatch = (val) => fuzzyCaseInsensitive(str.selected?.[0], val);
     return [metadata.name, roleRef.name, subject.kind, subject.name].some(isMatch);
   },
 
   // Filter role bindings by roleRef name
-  'role-binding-roleRef-name': (name: string, binding) => binding.roleRef.name === name,
+  'role-binding-roleRef-name': (name, binding) => binding.roleRef.name === name.selected?.[0],
 
   // Filter role bindings by roleRef kind
-  'role-binding-roleRef-kind': (kind: string, binding) => binding.roleRef.kind === kind,
+  'role-binding-roleRef-kind': (kind, binding) => binding.roleRef.kind === kind.selected?.[0],
 
   // Filter role bindings by user name
-  'role-binding-user': (userName, { subject }) => subject.name === userName,
+  'role-binding-user': (userName, { subject }) => subject.name === userName.selected?.[0],
 
   // Filter role bindings by group name
-  'role-binding-group': (groupName, { subject }) => subject.name === groupName,
-
-  selector: (selector, obj) => {
-    if (!selector || !selector.values || !selector.values.size) {
-      return true;
-    }
-    return selector.values.has(_.get(obj, selector.field));
-  },
+  'role-binding-group': (groupName, { subject }) => subject.name === groupName.selected?.[0],
 
   labels: (values, obj) => {
     if (!values.all) {
@@ -121,41 +120,41 @@ export const tableFilters: TableFilterMap = {
   },
 
   'pod-status': (phases, pod) => {
-    if (!phases || !phases.selected || !phases.selected.size) {
+    if (!phases || !phases.selected || !phases.selected.length) {
       return true;
     }
 
     const phase = podPhaseFilterReducer(pod);
-    return phases.selected.has(phase) || !_.includes(phases.all, phase);
+    return phases.selected.includes(phase) || !_.includes(phases.all, phase);
   },
 
   'node-status': (statuses, node) => {
-    if (!statuses || !statuses.selected || !statuses.selected.size) {
+    if (!statuses || !statuses.selected || !statuses.selected.length) {
       return true;
     }
 
     const status = nodeStatus(node);
-    return statuses.selected.has(status) || !_.includes(statuses.all, status);
+    return statuses.selected.includes(status) || !_.includes(statuses.all, status);
   },
 
   'node-role': (roles, node) => {
-    if (!roles || !roles.selected || !roles.selected.size) {
+    if (!roles || !roles.selected || !roles.selected.length) {
       return true;
     }
     const role = getNodeRole(node);
-    return roles.selected.has(role);
+    return roles.selected.includes(role);
   },
 
   'clusterserviceversion-resource-kind': (filters, resource) => {
-    if (!filters || !filters.selected || !filters.selected.size) {
+    if (!filters || !filters.selected || !filters.selected.length) {
       return true;
     }
-    return filters.selected.has(resource.kind);
+    return filters.selected.includes(resource.kind);
   },
 
   'packagemanifest-name': (filter, pkg) =>
     fuzzyCaseInsensitive(
-      filter,
+      filter.selected?.[0],
       (pkg.status.defaultChannel
         ? pkg.status.channels.find((ch) => ch.name === pkg.status.defaultChannel)
         : pkg.status.channels[0]
@@ -163,131 +162,140 @@ export const tableFilters: TableFilterMap = {
     ),
 
   'build-status': (phases, build) => {
-    if (!phases || !phases.selected || !phases.selected.size) {
+    if (!phases || !phases.selected || !phases.selected.length) {
       return true;
     }
 
     const phase = build.status.phase;
-    return phases.selected.has(phase) || !_.includes(phases.all, phase);
+    return phases.selected.includes(phase) || !_.includes(phases.all, phase);
   },
 
   'build-strategy': (strategies, buildConfig) => {
-    if (!strategies || !strategies.selected || !strategies.selected.size) {
+    if (!strategies || !strategies.selected || !strategies.selected.length) {
       return true;
     }
 
     const strategy = buildConfig.spec.strategy.type;
-    return strategies.selected.has(strategy) || !_.includes(strategies.all, strategy);
+    return strategies.selected.includes(strategy) || !_.includes(strategies.all, strategy);
   },
 
   'route-status': (statuses, route) => {
-    if (!statuses || !statuses.selected || !statuses.selected.size) {
+    if (!statuses || !statuses.selected || !statuses.selected.length) {
       return true;
     }
 
     const status = routeStatus(route);
-    return statuses.selected.has(status) || !_.includes(statuses.all, status);
+    return statuses.selected.includes(status) || !_.includes(statuses.all, status);
   },
 
   'catalog-status': (statuses, catalog) => {
-    if (!statuses || !statuses.selected || !statuses.selected.size) {
+    if (!statuses || !statuses.selected || !statuses.selected.length) {
       return true;
     }
 
     const status = serviceCatalogStatus(catalog);
-    return statuses.selected.has(status) || !_.includes(statuses.all, status);
+    return statuses.selected.includes(status) || !_.includes(statuses.all, status);
   },
 
   'secret-type': (types, secret) => {
-    if (!types || !types.selected || !types.selected.size) {
+    if (!types || !types.selected || !types.selected.length) {
       return true;
     }
     const type = secretTypeFilterReducer(secret);
-    return types.selected.has(type) || !_.includes(types.all, type);
+    return types.selected.includes(type) || !_.includes(types.all, type);
   },
 
-  'project-name': (str: string, project: K8sResourceKind) => {
+  'project-name': (str, project: K8sResourceKind) => {
     const displayName = _.get(project, ['metadata', 'annotations', 'openshift.io/display-name']);
     return (
-      fuzzyCaseInsensitive(str, project.metadata.name) || fuzzyCaseInsensitive(str, displayName)
+      fuzzyCaseInsensitive(str.selected?.[0], project.metadata.name) ||
+      fuzzyCaseInsensitive(str.selected?.[0], displayName)
     );
   },
 
   'pvc-status': (phases, pvc) => {
-    if (!phases || !phases.selected || !phases.selected.size) {
+    if (!phases || !phases.selected || !phases.selected.length) {
       return true;
     }
 
     const phase = pvc.status.phase;
-    return phases.selected.has(phase) || !_.includes(phases.all, phase);
+    return phases.selected.includes(phase) || !_.includes(phases.all, phase);
   },
 
   // Filter service classes by text match
   'service-class': (str, serviceClass) => {
     const displayName = serviceClassDisplayName(serviceClass);
-    return fuzzyCaseInsensitive(str, displayName);
+    return fuzzyCaseInsensitive(str.selected?.[0], displayName);
   },
 
   'service-plan': (str, servicePlan) => {
     const displayName = servicePlanDisplayName(servicePlan);
-    return fuzzyCaseInsensitive(str, displayName);
+    return fuzzyCaseInsensitive(str.selected?.[0], displayName);
   },
 
   'cluster-operator-status': (statuses, operator) => {
-    if (!statuses || !statuses.selected || !statuses.selected.size) {
+    if (!statuses || !statuses.selected || !statuses.selected.length) {
       return true;
     }
 
     const status = getClusterOperatorStatus(operator);
-    return statuses.selected.has(status) || !_.includes(statuses.all, status);
+    return statuses.selected.includes(status) || !_.includes(statuses.all, status);
   },
 
   'template-instance-status': (statuses, instance) => {
-    if (!statuses || !statuses.selected || !statuses.selected.size) {
+    if (!statuses || !statuses.selected || !statuses.selected.length) {
       return true;
     }
 
     const status = getTemplateInstanceStatus(instance);
-    return statuses.selected.has(status) || !_.includes(statuses.all, status);
+    return statuses.selected.includes(status) || !_.includes(statuses.all, status);
   },
 
-  machine: (str: string, machine: MachineKind): boolean => {
+  machine: (str, machine: MachineKind): boolean => {
     const node: string = _.get(machine, 'status.nodeRef.name');
     return (
-      fuzzyCaseInsensitive(str, machine.metadata.name) || (node && fuzzyCaseInsensitive(str, node))
+      fuzzyCaseInsensitive(str.selected?.[0], machine.metadata.name) ||
+      (node && fuzzyCaseInsensitive(str.selected?.[0], node))
     );
   },
 
   'snapshot-status': (statuses, snapshot: VolumeSnapshotKind) => {
-    if (!statuses || !statuses.selected || !statuses.selected.size) {
+    if (!statuses || !statuses.selected || !statuses.selected.length) {
       return true;
     }
 
     const status = volumeSnapshotStatus(snapshot);
-    return statuses.selected.has(status) || !_.includes(statuses.all, status);
+    return statuses.selected.includes(status) || !_.includes(statuses.all, status);
   },
-  'node-disk-name': (name, disks) => fuzzyCaseInsensitive(name, disks?.path),
-  'image-name': (str, imageManifestVuln) => fuzzyCaseInsensitive(str, imageManifestVuln.spec.image),
+  'node-disk-name': (name, disks) => fuzzyCaseInsensitive(name.selected?.[0], disks?.path),
+  'image-name': (str, imageManifestVuln) =>
+    fuzzyCaseInsensitive(str.selected?.[0], imageManifestVuln.spec.image),
   vulnerability: (str, imageVulnerability) =>
-    fuzzyCaseInsensitive(str, imageVulnerability.vulnerability.name),
+    fuzzyCaseInsensitive(str.selected?.[0], imageVulnerability.vulnerability.name),
 
   // Filter cluster service version by displayName or name text match
   'cluster-service-version': (str, csv) => {
     const value = clusterServiceVersionDisplayName(csv);
-    return fuzzyCaseInsensitive(str, value);
+    return fuzzyCaseInsensitive(str.selected?.[0], value);
   },
 };
 
-export interface TableFilterGroups {
-  selected: Set<string>;
-  all: string[];
-  values: Set<string>;
-  field: string;
-}
+const rowFiltersToFilterFuncs = (rowFilters: RowFilter[]): FilterMap => {
+  return (rowFilters || [])
+    .filter((f) => f.type && _.isFunction(f.filter))
+    .reduce((acc, f) => ({ ...acc, [f.type]: f.filter }), {} as FilterMap);
+};
+
+export const getAllTableFilters = (rowFilters: RowFilter[]): FilterMap => ({
+  ...tableFilters,
+  ...rowFiltersToFilterFuncs(rowFilters),
+});
 
-export type TableFilter = (groups: TableFilterGroups, obj: any) => boolean;
-export type TextFilter = (text: string, obj: any) => boolean;
+export type FilterValue = {
+  selected?: string[];
+  all?: string[];
+};
 
-type TableFilterMap = {
-  [key: string]: TableFilter | TextFilter;
+export type FilterMap = {
+  [key: string]: (value: FilterValue, obj: any) => boolean;
 };
diff --git a/frontend/public/components/filter-toolbar.tsx b/frontend/public/components/filter-toolbar.tsx
index d66fe807222..7321e2d582b 100644
--- a/frontend/public/components/filter-toolbar.tsx
+++ b/frontend/public/components/filter-toolbar.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { withRouter, RouteComponentProps } from 'react-router';
-import { connect } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import { useDispatch } from 'react-redux';
 import {
   Badge,
   Button,
@@ -22,13 +24,15 @@ import {
   setOrRemoveQueryArgument,
 } from '@console/internal/components/utils';
 import { useTranslation } from 'react-i18next';
-import { filterList as filterListAction } from '../actions/k8s';
+import { filterList } from '../actions/k8s';
 import AutocompleteInput from './autocomplete';
 import { storagePrefix } from './row-filter';
 import { createColumnManagementModal } from './modals';
 import { ColumnLayout } from './modals/column-management-modal';
 import { TextFilter } from './factory';
 import { useDebounceCallback, useDeepCompareMemoize } from '@console/shared/src';
+import { OnFilterChange } from './factory/ListPage/filter-hook';
+import { FilterValue } from './factory/table-filters';
 
 /**
  * Housing both the row filter and name/label filter in the same file.
@@ -52,24 +56,24 @@ type FilterKeys = {
   [key: string]: string;
 };
 
-const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (props) => {
-  const {
-    rowFilters,
-    data,
-    hideColumnManagement,
-    hideLabelFilter,
-    hideNameLabelFilters,
-    columnLayout,
-    nameFilterPlaceholder,
-    labelFilterPlaceholder,
-    location,
-    textFilter = filterTypeMap[FilterType.NAME],
-    labelFilter = filterTypeMap[FilterType.LABEL],
-    uniqueFilterName,
-    reduxIDs,
-    filterList,
-    kinds,
-  } = props;
+export const FilterToolbar: React.FC<FilterToolbarProps> = ({
+  rowFilters,
+  data,
+  hideColumnManagement,
+  hideLabelFilter,
+  hideNameLabelFilters,
+  columnLayout,
+  nameFilterPlaceholder,
+  labelFilterPlaceholder,
+  textFilter = filterTypeMap[FilterType.NAME],
+  labelFilter = filterTypeMap[FilterType.LABEL],
+  uniqueFilterName,
+  reduxIDs,
+  onFilterChange,
+  labelPath,
+}) => {
+  const dispatch = useDispatch();
+  const location = useLocation();
 
   const { t } = useTranslation();
   const translateFilterType = (value: string) => {
@@ -107,7 +111,7 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
   const generatedRowFilters = useDeepCompareMemoize(
     (rowFilters ?? []).map((rowFilter) => ({
       ...rowFilter,
-      items: (rowFilter.itemsGenerator?.(props, kinds) ?? rowFilter.items).map((item) => ({
+      items: rowFilter.items.map((item) => ({
         ...item,
         count: rowFilter.isMatch
           ? _.filter(data, (d) => rowFilter.isMatch(d, item.id)).length
@@ -117,12 +121,9 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
   );
 
   // Reduce generatedRowFilters once and memoize
-  const [filters, filtersNameMap, filterKeys, defaultSelections]: [
-    Filter,
-    FilterKeys,
-    FilterKeys,
-    string[],
-  ] = React.useMemo(
+  const [filters, filtersNameMap, filterKeys, defaultSelections] = React.useMemo<
+    [Filter, FilterKeys, FilterKeys, string[]]
+  >(
     () =>
       generatedRowFilters.reduce(
         (
@@ -184,15 +185,18 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
   ));
 
   const applyFilters = React.useCallback(
-    (type, filter) => reduxIDs?.forEach?.((id) => filterList(id, type, filter)),
-    [reduxIDs, filterList],
+    (type: string, input: FilterValue) =>
+      onFilterChange
+        ? onFilterChange(type, input)
+        : reduxIDs?.forEach?.((id) => dispatch(filterList(id, type, input))),
+    [onFilterChange, reduxIDs, dispatch],
   );
 
   const applyRowFilter = (selected: string[]) => {
     generatedRowFilters?.forEach?.(({ items, type }) => {
       const all = items?.map?.(({ id }) => id) ?? [];
       const recognized = _.intersection(selected, all);
-      applyFilters(type, { selected: new Set(recognized), all });
+      applyFilters(type, { selected: [...new Set(recognized)], all });
     });
   };
 
@@ -228,7 +232,7 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
   const applyNameFilter = React.useCallback(
     (value: string) => {
       setOrRemoveQueryArgument(nameFilterQueryArgumentKey, value);
-      applyFilters(textFilter, value);
+      applyFilters(textFilter, { selected: [value] });
     },
     [applyFilters, nameFilterQueryArgumentKey, textFilter],
   );
@@ -253,7 +257,7 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
       applyFilters(labelFilter, { all: labelFilters });
     }
     if (!hideNameLabelFilters) {
-      applyFilters(textFilter, nameInputText);
+      applyFilters(textFilter, { selected: [nameInputText] });
     }
     if (_.isEmpty(selectedRowFilters)) {
       updateRowFilterSelected(defaultSelections);
@@ -358,7 +362,7 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
                       setTextValue={setLabelInputText}
                       placeholder={labelFilterPlaceholder ?? t('public~Search by label...')}
                       data={data}
-                      labelPath={props.labelPath}
+                      labelPath={labelPath}
                     />
                   ) : (
                     <TextFilter
@@ -402,7 +406,6 @@ type FilterToolbarProps = {
   rowFilters?: RowFilter[];
   data?: any;
   reduxIDs?: string[];
-  filterList?: any;
   textFilter?: string;
   hideColumnManagement?: boolean;
   hideLabelFilter?: boolean;
@@ -416,26 +419,22 @@ type FilterToolbarProps = {
   labelFilterPlaceholder?: string;
   // Used when multiple tables are in the same page
   uniqueFilterName?: string;
+  onFilterChange?: OnFilterChange;
 };
 
 type RowFilterItem = {
   id?: string;
   title?: string;
-  [key: string]: string;
 };
 
 export type RowFilter<R = any> = {
   defaultSelected?: string[];
   filterGroupName: string;
-  isMatch?: (param: R, id: string) => boolean;
+  isMatch?: (obj: R, id: string) => boolean;
   type: string;
   items?: RowFilterItem[];
-  itemsGenerator?: (...args) => RowFilterItem[];
-  reducer?: (param: R) => React.ReactText;
-  filter?: any;
+  reducer?: (obj: R) => React.ReactText;
+  filter?: (input: FilterValue, obj: R) => boolean;
 };
 
-export const FilterToolbar = withRouter(
-  connect(null, { filterList: filterListAction })(FilterToolbar_),
-);
 FilterToolbar.displayName = 'FilterToolbar';
diff --git a/frontend/public/components/group.tsx b/frontend/public/components/group.tsx
index 9c90fa5cabf..83987e03285 100644
--- a/frontend/public/components/group.tsx
+++ b/frontend/public/components/group.tsx
@@ -176,7 +176,7 @@ const GroupDetails: React.FC<GroupDetailsProps> = ({ obj }) => {
 const RoleBindingsTab: React.FC<RoleBindingsTabProps> = ({ obj }) => (
   <RoleBindingsPage
     showTitle={false}
-    staticFilters={[{ 'role-binding-group': obj.metadata.name }]}
+    staticFilters={{ 'role-binding-group': obj.metadata.name }}
     name={obj.metadata.name}
     kind={obj.kind}
   />
diff --git a/frontend/public/components/job.tsx b/frontend/public/components/job.tsx
index 39bcb4feedb..38be856ffb2 100644
--- a/frontend/public/components/job.tsx
+++ b/frontend/public/components/job.tsx
@@ -180,9 +180,7 @@ export const JobDetails: React.FC<JobsDetailsProps> = ({ obj: job }) => {
   );
 };
 
-const JobPods: React.FC<JobPodsProps> = (props) => (
-  <PodsComponent {...props} customData={{ showNodes: true }} />
-);
+const JobPods: React.FC<JobPodsProps> = (props) => <PodsComponent {...props} showNodes />;
 
 const { details, pods, editYaml, events } = navFactory;
 const JobsDetailsPage: React.FC<JobsDetailsPageProps> = (props) => {
diff --git a/frontend/public/components/machine.tsx b/frontend/public/components/machine.tsx
index 2f6c934737f..57e489915e2 100644
--- a/frontend/public/components/machine.tsx
+++ b/frontend/public/components/machine.tsx
@@ -13,10 +13,15 @@ import {
   getMachinePhase,
 } from '@console/shared';
 import { MachineModel } from '../models';
-import { MachineKind, referenceForModel } from '../module/k8s';
+import { MachineKind, referenceForModel, Selector } from '../module/k8s';
 import { Conditions } from './conditions';
 import NodeIPList from '@console/app/src/components/nodes/NodeIPList';
-import { DetailsPage, ListPage, Table, TableData, RowFunctionArgs } from './factory';
+import { DetailsPage, TableData } from './factory';
+import ListPageFilter from './factory/ListPage/ListPageFilter';
+import ListPageHeader from './factory/ListPage/ListPageHeader';
+import ListPageBody from './factory/ListPage/ListPageBody';
+import { useListPageFilter } from './factory/ListPage/filter-hook';
+import ListPageCreate from './factory/ListPage/ListPageCreate';
 import {
   DetailsItem,
   Kebab,
@@ -28,6 +33,9 @@ import {
   navFactory,
 } from './utils';
 import { ResourceEventStream } from './events';
+import { useK8sWatchResource } from './utils/k8s-watch-hook';
+import VirtualizedTable, { RowProps, TableColumn } from './factory/Table/VirtualizedTable';
+import { sortResourceByValue } from './factory/Table/sort';
 
 const { common } = Kebab.factory;
 const menuActions = [...Kebab.getExtensionsActionsForKind(MachineModel), ...common];
@@ -47,7 +55,7 @@ const tableColumnClasses = [
 const getMachineProviderState = (obj: MachineKind): string =>
   obj?.status?.providerStatus?.instanceState;
 
-const MachineTableRow: React.FC<RowFunctionArgs<MachineKind>> = ({ obj }) => {
+const MachineTableRow: React.FC<RowProps<MachineKind>> = ({ obj }) => {
   const nodeName = getMachineNodeName(obj);
   const region = getMachineRegion(obj);
   const zone = getMachineZone(obj);
@@ -161,50 +169,58 @@ const MachineDetails: React.SFC<MachineDetailsProps> = ({ obj }: { obj: MachineK
   );
 };
 
-export const MachineList: React.SFC = (props) => {
+type MachineListProps = {
+  data: MachineKind[];
+  unfilteredData: MachineKind[];
+  loaded: boolean;
+  loadError: any;
+};
+
+export const MachineList: React.FC<MachineListProps> = (props) => {
   const { t } = useTranslation();
-  const MachineTableHeader = () => {
-    return [
+
+  const machineTableColumn = React.useMemo<TableColumn<MachineKind>[]>(
+    () => [
       {
         title: t('public~Name'),
-        sortField: 'metadata.name',
+        sort: 'metadata.name',
         transforms: [sortable],
         props: { className: tableColumnClasses[0] },
       },
       {
         title: t('public~Namespace'),
-        sortField: 'metadata.namespace',
+        sort: 'metadata.namespace',
         transforms: [sortable],
         props: { className: tableColumnClasses[1] },
         id: 'namespace',
       },
       {
         title: t('public~Node'),
-        sortField: 'status.nodeRef.name',
+        sort: 'status.nodeRef.name',
         transforms: [sortable],
         props: { className: tableColumnClasses[2] },
       },
       {
         title: t('public~Phase'),
-        sortFunc: 'machinePhase',
+        sort: (data, direction) => data.sort(sortResourceByValue(direction, getMachinePhase)),
         transforms: [sortable],
         props: { className: tableColumnClasses[3] },
       },
       {
         title: t('public~Provider state'),
-        sortField: 'status.providerStatus.instanceState',
+        sort: 'status.providerStatus.instanceState',
         transforms: [sortable],
         props: { className: tableColumnClasses[4] },
       },
       {
         title: t('public~Region'),
-        sortField: "metadata.labels['machine.openshift.io/region']",
+        sort: "metadata.labels['machine.openshift.io/region']",
         transforms: [sortable],
         props: { className: tableColumnClasses[5] },
       },
       {
         title: t('public~Availability zone'),
-        sortField: "metadata.labels['machine.openshift.io/zone']",
+        sort: "metadata.labels['machine.openshift.io/zone']",
         transforms: [sortable],
         props: { className: tableColumnClasses[6] },
       },
@@ -212,31 +228,63 @@ export const MachineList: React.SFC = (props) => {
         title: '',
         props: { className: tableColumnClasses[7] },
       },
-    ];
-  };
+    ],
+    [t],
+  );
+
   return (
-    <Table
+    <VirtualizedTable<MachineKind>
       {...props}
       aria-label={t('public~Machines')}
-      Header={MachineTableHeader}
+      columns={machineTableColumn}
       Row={MachineTableRow}
-      virtualize
     />
   );
 };
 
-export const MachinePage: React.SFC<MachinePageProps> = (props) => {
+export const MachinePage: React.FC<MachinePageProps> = ({
+  selector,
+  namespace,
+  showTitle = true,
+  hideLabelFilter,
+  hideNameLabelFilters,
+  hideColumnManagement,
+}) => {
   const { t } = useTranslation();
 
+  const [machines, loaded, loadError] = useK8sWatchResource<MachineKind[]>({
+    kind: referenceForModel(MachineModel),
+    isList: true,
+    selector,
+    namespace,
+  });
+
+  const [data, filteredData, onFilterChange] = useListPageFilter(machines);
+
   return (
-    <ListPage
-      {...props}
-      ListComponent={MachineList}
-      kind={machineReference}
-      textFilter="machine"
-      filterLabel={t('public~by machine or node name')}
-      canCreate
-    />
+    <>
+      <ListPageHeader title={showTitle ? t(MachineModel.labelPluralKey) : undefined}>
+        <ListPageCreate groupVersionKind={referenceForModel(MachineModel)}>
+          {t('public~Create machine')}
+        </ListPageCreate>
+      </ListPageHeader>
+      <ListPageBody>
+        <ListPageFilter
+          data={data}
+          loaded={loaded}
+          onFilterChange={onFilterChange}
+          hideNameLabelFilters={hideNameLabelFilters}
+          hideLabelFilter={hideLabelFilter}
+          hideColumnManagement={hideColumnManagement}
+        />
+        <MachineList
+          data={filteredData}
+          unfilteredData={machines}
+          loaded={loaded}
+          loadError={loadError}
+        />
+      </ListPageBody>
+    </>
   );
 };
 
@@ -261,7 +309,10 @@ export type MachineDetailsProps = {
 export type MachinePageProps = {
   showTitle?: boolean;
   namespace?: string;
-  selector?: any;
+  selector?: Selector;
+  hideLabelFilter?: boolean;
+  hideNameLabelFilters?: boolean;
+  hideColumnManagement?: boolean;
 };
 
 export type MachineDetailsPageProps = {
diff --git a/frontend/public/components/monitoring/alerting.tsx b/frontend/public/components/monitoring/alerting.tsx
index c073be6e0da..9380091e90d 100644
--- a/frontend/public/components/monitoring/alerting.tsx
+++ b/frontend/public/components/monitoring/alerting.tsx
@@ -1457,8 +1457,8 @@ const ruleHasAlertState = (rule: Rule, state: AlertStates): boolean =>
   state === AlertStates.NotFiring ? _.isEmpty(rule.alerts) : _.some(rule.alerts, { state });
 
 const ruleAlertStateFilter = (filter, rule: Rule) =>
-  (filter.selected.has(AlertStates.NotFiring) && _.isEmpty(rule.alerts)) ||
-  _.some(rule.alerts, (a) => filter.selected.has(a.state)) ||
+  (filter.selected?.includes(AlertStates.NotFiring) && _.isEmpty(rule.alerts)) ||
+  _.some(rule.alerts, (a) => filter.selected?.includes(a.state)) ||
   _.isEmpty(filter.selected);
 
 export const alertStateFilter = (): RowFilter => ({
diff --git a/frontend/public/components/pod.tsx b/frontend/public/components/pod.tsx
index a093349d64b..f71ce93959a 100644
--- a/frontend/public/components/pod.tsx
+++ b/frontend/public/components/pod.tsx
@@ -2,11 +2,11 @@ import * as React from 'react';
 // FIXME upgrading redux types is causing many errors at this time
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
-import { connect, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
-import i18next from 'i18next';
+import { TFunction } from 'i18next';
 import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
 import { Button, Popover, Grid, GridItem } from '@patternfly/react-core';
@@ -17,12 +17,9 @@ import {
   ActionServiceProvider,
   ActionMenu,
   ActionMenuVariant,
+  useUserSettingsCompatibility,
 } from '@console/shared';
 import { ByteDataTypes } from '@console/shared/src/graph-helper/data-utils';
-import {
-  withUserSettingsCompatibility,
-  WithUserSettingsCompatibilityProps,
-} from '@console/shared/src/hoc/withUserSettingsCompatibility';
 import {
   COLUMN_MANAGEMENT_CONFIGMAP_KEY,
   COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
@@ -35,6 +32,7 @@ import {
   PodKind,
   referenceForModel,
   referenceFor,
+  Selector,
 } from '../module/k8s';
 import {
   getRestartPolicyLabel,
@@ -45,7 +43,11 @@ import {
 } from '../module/k8s/pods';
 import { getContainerState, getContainerStatus } from '../module/k8s/container';
 import { ResourceEventStream } from './events';
-import { DetailsPage, ListPage, RowFunctionArgs, Table, TableData } from './factory';
+import { DetailsPage, TableData } from './factory';
+import ListPageBody from './factory/ListPage/ListPageBody';
+import ListPageHeader from './factory/ListPage/ListPageHeader';
+import ListPageFilter from './factory/ListPage/ListPageFilter';
+import ListPageCreate from './factory/ListPage/ListPageCreate';
 import {
   AsyncComponent,
   DetailsItem,
@@ -94,6 +96,12 @@ import DashboardCardBody from '@console/shared/src/components/dashboard/dashboar
 // t('public~Login is required. Please try again.')
 // t('public~Could not check CSRF token. Please try again.')
 // t('public~Invalid login or password. Please try again.')
+import { useK8sWatchResource } from './utils/k8s-watch-hook';
+import { useListPageFilter } from './factory/ListPage/filter-hook';
+import { RowFilter } from './filter-toolbar';
+import VirtualizedTable, { RowProps, TableColumn } from './factory/Table/VirtualizedTable';
+import { sortResourceByValue } from './factory/Table/sort';
+import { useActiveColumns } from './factory/Table/active-columns-hook';
 
 // Only request metrics if the device's screen width is larger than the
 // breakpoint where metrics are visible.
@@ -215,109 +223,110 @@ const podColumnInfo = Object.freeze({
 const kind = 'Pod';
 const columnManagementID = referenceForModel(PodModel);
 
-const getHeader = (showNodes) => {
-  return () => {
-    return [
-      {
-        title: i18next.t(podColumnInfo.name.title),
-        id: podColumnInfo.name.id,
-        sortField: 'metadata.name',
-        transforms: [sortable],
-        props: { className: podColumnInfo.name.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.namespace.title),
-        id: podColumnInfo.namespace.id,
-        sortField: 'metadata.namespace',
-        transforms: [sortable],
-        props: { className: podColumnInfo.namespace.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.status.title),
-        id: podColumnInfo.status.id,
-        sortFunc: 'podPhase',
-        transforms: [sortable],
-        props: { className: podColumnInfo.status.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.ready.title),
-        id: podColumnInfo.ready.id,
-        sortFunc: 'podReadiness',
-        transforms: [sortable],
-        props: { className: podColumnInfo.ready.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.restarts.title),
-        id: podColumnInfo.restarts.id,
-        sortFunc: 'podRestarts',
-        transforms: [sortable],
-        props: { className: podColumnInfo.restarts.classes },
-      },
-      {
-        title: showNodes
-          ? i18next.t(podColumnInfo.node.title)
-          : i18next.t(podColumnInfo.owner.title),
-        id: podColumnInfo.owner.id,
-        sortField: showNodes ? 'spec.nodeName' : 'metadata.ownerReferences[0].name',
-        transforms: [sortable],
-        props: { className: podColumnInfo.owner.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.memory.title),
-        id: podColumnInfo.memory.id,
-        sortFunc: 'podMemory',
-        transforms: [sortable],
-        props: { className: podColumnInfo.memory.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.cpu.title),
-        id: podColumnInfo.cpu.id,
-        sortFunc: 'podCPU',
-        transforms: [sortable],
-        props: { className: podColumnInfo.cpu.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.created.title),
-        id: podColumnInfo.created.id,
-        sortField: 'metadata.creationTimestamp',
-        transforms: [sortable],
-        props: { className: podColumnInfo.created.classes },
-      },
-      {
-        title: i18next.t(podColumnInfo.node.title),
-        id: podColumnInfo.node.id,
-        sortField: 'spec.nodeName',
-        transforms: [sortable],
-        props: { className: podColumnInfo.node.classes },
-        additional: true,
-      },
-      {
-        title: i18next.t(podColumnInfo.labels.title),
-        id: podColumnInfo.labels.id,
-        sortField: 'metadata.labels',
-        transforms: [sortable],
-        props: { className: podColumnInfo.labels.classes },
-        additional: true,
-      },
-      {
-        title: i18next.t(podColumnInfo.ipaddress.title),
-        id: podColumnInfo.ipaddress.id,
-        sortField: 'status.podIP',
-        transforms: [sortable],
-        props: { className: podColumnInfo.ipaddress.classes },
-        additional: true,
-      },
-      {
-        title: '',
-        props: { className: Kebab.columnClass },
-      },
-    ];
-  };
-};
+const getColumns = (showNodes: boolean, t: TFunction): TableColumn<PodKind>[] => [
+  {
+    title: t(podColumnInfo.name.title),
+    id: podColumnInfo.name.id,
+    sort: 'metadata.name',
+    transforms: [sortable],
+    props: { className: podColumnInfo.name.classes },
+  },
+  {
+    title: t(podColumnInfo.namespace.title),
+    id: podColumnInfo.namespace.id,
+    sort: 'metadata.namespace',
+    transforms: [sortable],
+    props: { className: podColumnInfo.namespace.classes },
+  },
+  {
+    title: t(podColumnInfo.status.title),
+    id: podColumnInfo.status.id,
+    sort: (data, direction) => data.sort(sortResourceByValue<PodKind>(direction, podPhase)),
+    transforms: [sortable],
+    props: { className: podColumnInfo.status.classes },
+  },
+  {
+    title: t(podColumnInfo.ready.title),
+    id: podColumnInfo.ready.id,
+    sort: (data, direction) =>
+      data.sort(sortResourceByValue<PodKind>(direction, (obj) => podReadiness(obj).readyCount)),
+    transforms: [sortable],
+    props: { className: podColumnInfo.ready.classes },
+  },
+  {
+    title: t(podColumnInfo.restarts.title),
+    id: podColumnInfo.restarts.id,
+    sort: (data, direction) => data.sort(sortResourceByValue<PodKind>(direction, podRestarts)),
+    transforms: [sortable],
+    props: { className: podColumnInfo.restarts.classes },
+  },
+  {
+    title: showNodes ? t(podColumnInfo.node.title) : t(podColumnInfo.owner.title),
+    id: podColumnInfo.owner.id,
+    sort: showNodes ? 'spec.nodeName' : 'metadata.ownerReferences[0].name',
+    transforms: [sortable],
+    props: { className: podColumnInfo.owner.classes },
+  },
+  {
+    title: t(podColumnInfo.memory.title),
+    id: podColumnInfo.memory.id,
+    sort: (data, direction) =>
+      data.sort(
+        sortResourceByValue<PodKind>(direction, (obj) => UIActions.getPodMetric(obj, 'memory')),
+      ),
+    transforms: [sortable],
+    props: { className: podColumnInfo.memory.classes },
+  },
+  {
+    title: t(podColumnInfo.cpu.title),
+    id: podColumnInfo.cpu.id,
+    sort: (data, direction) =>
+      data.sort(
+        sortResourceByValue<PodKind>(direction, (obj) => UIActions.getPodMetric(obj, 'cpu')),
+      ),
+    transforms: [sortable],
+    props: { className: podColumnInfo.cpu.classes },
+  },
+  {
+    title: t(podColumnInfo.created.title),
+    id: podColumnInfo.created.id,
+    sort: 'metadata.creationTimestamp',
+    transforms: [sortable],
+    props: { className: podColumnInfo.created.classes },
+  },
+  {
+    title: t(podColumnInfo.node.title),
+    id: podColumnInfo.node.id,
+    sort: 'spec.nodeName',
+    transforms: [sortable],
+    props: { className: podColumnInfo.node.classes },
+    additional: true,
+  },
+  {
+    title: t(podColumnInfo.labels.title),
+    id: podColumnInfo.labels.id,
+    sort: 'metadata.labels',
+    transforms: [sortable],
+    props: { className: podColumnInfo.labels.classes },
+    additional: true,
+  },
+  {
+    title: t(podColumnInfo.ipaddress.title),
+    id: podColumnInfo.ipaddress.id,
+    sort: 'status.podIP',
+    transforms: [sortable],
+    props: { className: podColumnInfo.ipaddress.classes },
+    additional: true,
+  },
+  {
+    title: '',
+    props: { className: Kebab.columnClass },
+  },
+];
 
-const getSelectedColumns = (showNodes: boolean) => {
+const getSelectedColumns = (showNodes: boolean, t: TFunction): Set<string> => {
   return new Set(
-    getHeader(showNodes)().reduce((acc, column) => {
+    getColumns(showNodes, t).reduce((acc, column) => {
       if (column.id && !column.additional) {
         acc.push(column.id);
       }
@@ -326,10 +335,12 @@ const getSelectedColumns = (showNodes: boolean) => {
   );
 };
 
-const PodTableRow: React.FC<RowFunctionArgs<PodKind, RowCustomData>> = ({
+const PodTableRow: React.FC<RowProps<PodKind, PodRowData>> = ({
   obj: pod,
-  customData: { showNodes, showNamespaceOverride, tableColumns },
+  rowData: { showNodes },
+  activeColumnIDs,
 }) => {
+  const { t } = useTranslation();
   const { name, namespace, creationTimestamp, labels } = pod.metadata;
   const bytes: number = useSelector(({ UI }) => {
     const metrics = UI.getIn(['metrics', 'pod']);
@@ -342,9 +353,7 @@ const PodTableRow: React.FC<RowFunctionArgs<PodKind, RowCustomData>> = ({
   const { readyCount, totalContainers } = podReadiness(pod);
   const phase = podPhase(pod);
   const restarts = podRestarts(pod);
-  const columns: Set<string> =
-    tableColumns?.length > 0 ? new Set(tableColumns) : getSelectedColumns(showNodes);
-  const { t } = useTranslation();
+  const columns = activeColumnIDs?.size > 0 ? activeColumnIDs : getSelectedColumns(showNodes, t);
   const resourceKind = referenceFor(pod);
   const context = { [resourceKind]: pod };
   return (
@@ -356,7 +365,6 @@ const PodTableRow: React.FC<RowFunctionArgs<PodKind, RowCustomData>> = ({
         className={classNames(podColumnInfo.namespace.classes, 'co-break-word')}
         columns={columns}
         columnID={podColumnInfo.namespace.id}
-        showNamespaceOverride={showNamespaceOverride}
       >
         <ResourceLink kind="Namespace" name={namespace} />
       </TableData>
@@ -831,46 +839,37 @@ export const PodsDetailsPage: React.FC<PodDetailsPageProps> = (props) => {
 };
 PodsDetailsPage.displayName = 'PodsDetailsPage';
 
-export const PodList: React.FC<PodListProps> = withUserSettingsCompatibility<
-  PodListProps & WithUserSettingsCompatibilityProps<TableColumnsType>,
-  TableColumnsType
->(
-  COLUMN_MANAGEMENT_CONFIGMAP_KEY,
-  COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
-  undefined,
-  true,
-)(({ userSettingState: tableColumns, ...props }) => {
-  const showNodes = props?.customData?.showNodes;
-  const showNamespaceOverride = props?.customData?.showNamespaceOverride;
+export const PodList: React.FC<PodListProps> = ({ showNamespaceOverride, showNodes, ...props }) => {
   const { t } = useTranslation();
-  const selectedColumns: Set<string> =
-    tableColumns?.[columnManagementID]?.length > 0
-      ? new Set(tableColumns[columnManagementID])
-      : null;
-
-  const customData = React.useMemo(
-    () => ({ tableColumns: tableColumns?.[columnManagementID], showNodes, showNamespaceOverride }),
-    [showNamespaceOverride, showNodes, tableColumns],
+  const columns = React.useMemo(() => getColumns(showNodes, t), [showNodes, t]);
+  const [activeColumns, userSettingsLoaded] = useActiveColumns({
+    columns,
+    showNamespaceOverride,
+    columnManagementID,
+  });
+  const rowData = React.useMemo<PodRowData>(
+    () => ({
+      showNodes,
+    }),
+    [showNodes],
   );
   return (
-    <Table
-      {...props}
-      activeColumns={selectedColumns}
-      columnManagementID={columnManagementID}
-      showNamespaceOverride={showNamespaceOverride}
-      aria-label={t('public~Pods')}
-      Header={getHeader(showNodes)}
-      Row={PodTableRow}
-      customData={customData}
-      virtualize
-    />
+    userSettingsLoaded && (
+      <VirtualizedTable<PodKind, PodRowData>
+        {...props}
+        aria-label={t('public~Pods')}
+        columns={activeColumns}
+        Row={PodTableRow}
+        rowData={rowData}
+      />
+    )
   );
-});
+};
 PodList.displayName = 'PodList';
 
-export const getFilters = () => [
+export const getFilters = (t: TFunction): RowFilter<PodKind>[] => [
   {
-    filterGroupName: i18next.t('public~Status'),
+    filterGroupName: t('public~Status'),
     type: 'pod-status',
     reducer: podPhaseFilterReducer,
     items: [
@@ -887,84 +886,109 @@ export const getFilters = () => [
   },
 ];
 
-const dispatchToProps = (dispatch): PodPagePropsFromDispatch => ({
-  setPodMetrics: (metrics) => dispatch(UIActions.setPodMetrics(metrics)),
-});
-
-export const PodsPage = connect<{}, PodPagePropsFromDispatch, PodPageProps>(
-  null,
-  dispatchToProps,
-)(
-  withUserSettingsCompatibility<
-    PodPagePropsFromDispatch & PodPageProps & WithUserSettingsCompatibilityProps<TableColumnsType>,
-    TableColumnsType
-  >(
+export const PodsPage: React.FC<PodPageProps> = ({
+  canCreate = true,
+  namespace,
+  showNodes,
+  showTitle = true,
+  selector,
+  fieldSelector,
+  hideNameLabelFilters,
+  hideLabelFilter,
+  hideColumnManagement,
+  nameFilter,
+  showNamespaceOverride,
+}) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const [tableColumns, , userSettingsLoaded] = useUserSettingsCompatibility<TableColumnsType>(
     COLUMN_MANAGEMENT_CONFIGMAP_KEY,
     COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
     undefined,
     true,
-  )(
-    (
-      props: PodPageProps &
-        PodPagePropsFromDispatch &
-        WithUserSettingsCompatibilityProps<TableColumnsType>,
-    ) => {
-      const {
-        canCreate = true,
-        namespace,
-        setPodMetrics,
-        customData,
-        userSettingState: tableColumns,
-        ...listProps
-      } = props;
-      const { t } = useTranslation();
+  );
 
-      /* eslint-disable react-hooks/exhaustive-deps */
-      React.useEffect(() => {
-        if (showMetrics) {
-          const updateMetrics = () =>
-            fetchPodMetrics(namespace)
-              .then(setPodMetrics)
-              .catch((e) => {
-                // Just log the error here. Showing a warning alert could be more annoying
-                // than helpful. It should be obvious there are no metrics in the list, and
-                // if monitoring is broken, it'll be really apparent since none of the
-                // graphs and dashboards will load in the UI.
-                // eslint-disable-next-line no-console
-                console.error('Unable to fetch pod metrics', e);
-              });
-          updateMetrics();
-          const id = setInterval(updateMetrics, 30 * 1000);
-          return () => clearInterval(id);
-        }
-      }, [namespace]);
-      /* eslint-enable react-hooks/exhaustive-deps */
-      return (
-        <ListPage
-          {...listProps}
-          canCreate={canCreate}
-          kind={kind}
-          ListComponent={PodList}
-          rowFilters={getFilters()}
-          namespace={namespace}
-          customData={customData}
-          columnLayout={{
-            columns: getHeader(props?.customData?.showNodes)().map((column) =>
-              _.pick(column, ['title', 'additional', 'id']),
-            ),
-            id: columnManagementID,
-            selectedColumns:
-              tableColumns?.[columnManagementID]?.length > 0
-                ? new Set(tableColumns[columnManagementID])
-                : null,
-            showNamespaceOverride: props?.customData?.showNamespaceOverride,
-            type: t('public~Pod'),
-          }}
-        />
-      );
-    },
-  ),
-);
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(() => {
+    if (showMetrics) {
+      const updateMetrics = () =>
+        fetchPodMetrics(namespace)
+          .then((metrics) => dispatch(UIActions.setPodMetrics(metrics)))
+          .catch((e) => {
+            // Just log the error here. Showing a warning alert could be more annoying
+            // than helpful. It should be obvious there are no metrics in the list, and
+            // if monitoring is broken, it'll be really apparent since none of the
+            // graphs and dashboards will load in the UI.
+            // eslint-disable-next-line no-console
+            console.error('Unable to fetch pod metrics', e);
+          });
+      updateMetrics();
+      const id = setInterval(updateMetrics, 30 * 1000);
+      return () => clearInterval(id);
+    }
+  }, [namespace]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const [pods, loaded, loadError] = useK8sWatchResource<PodKind[]>({
+    kind,
+    isList: true,
+    namespaced: true,
+    namespace,
+    selector,
+    fieldSelector,
+  });
+
+  const [data, filteredData, onFilterChange] = useListPageFilter(pods, undefined, {
+    name: { selected: [nameFilter] },
+  });
+
+  const filters = React.useMemo(() => getFilters(t), [t]);
+
+  return (
+    userSettingsLoaded && (
+      <>
+        <ListPageHeader title={showTitle ? t('public~Pods') : undefined}>
+          {canCreate && (
+            <ListPageCreate groupVersionKind={referenceForModel(PodModel)}>
+              {t('public~Create Pod')}
+            </ListPageCreate>
+          )}
+        </ListPageHeader>
+        <ListPageBody>
+          <ListPageFilter
+            data={data}
+            loaded={loaded}
+            rowFilters={filters}
+            onFilterChange={onFilterChange}
+            columnLayout={{
+              columns: getColumns(showNodes, t).map((column) =>
+                _.pick(column, ['title', 'additional', 'id']),
+              ),
+              id: columnManagementID,
+              selectedColumns:
+                tableColumns?.[columnManagementID]?.length > 0
+                  ? new Set(tableColumns[columnManagementID])
+                  : null,
+              showNamespaceOverride,
+              type: t('public~Pod'),
+            }}
+            hideNameLabelFilters={hideNameLabelFilters}
+            hideLabelFilter={hideLabelFilter}
+            hideColumnManagement={hideColumnManagement}
+          />
+          <PodList
+            data={filteredData}
+            unfilteredData={pods}
+            loaded={loaded}
+            loadError={loadError}
+            showNamespaceOverride={showNamespaceOverride}
+            showNodes={showNodes}
+          />
+        </ListPageBody>
+      </>
+    )
+  );
+};
 
 type ContainerLinkProps = {
   pod: PodKind;
@@ -1009,27 +1033,31 @@ type PodDetailsProps = {
   obj: PodKind;
 };
 
-type RowCustomData = {
-  tableColumns: string[];
+type PodRowData = {
   showNodes?: boolean;
-  showNamespaceOverride?: boolean;
 };
 
 type PodListProps = {
-  customData?: any;
+  data: PodKind[];
+  unfilteredData: PodKind[];
+  loaded: boolean;
+  loadError: any;
+  showNodes?: boolean;
+  showNamespaceOverride?: boolean;
 };
 
 type PodPageProps = {
   canCreate?: boolean;
-  fieldSelector?: any;
+  fieldSelector?: string;
   namespace?: string;
-  selector?: any;
+  selector?: Selector;
   showTitle?: boolean;
-  customData?: any;
-};
-
-type PodPagePropsFromDispatch = {
-  setPodMetrics: (metrics) => void;
+  showNodes?: boolean;
+  hideLabelFilter?: boolean;
+  hideNameLabelFilters?: boolean;
+  hideColumnManagement?: boolean;
+  nameFilter?: string;
+  showNamespaceOverride?: boolean;
 };
 
 type PodDetailsPageProps = {
diff --git a/frontend/public/components/replicaset.jsx b/frontend/public/components/replicaset.jsx
index ef5232cc09e..5d66cfe00f0 100644
--- a/frontend/public/components/replicaset.jsx
+++ b/frontend/public/components/replicaset.jsx
@@ -152,7 +152,7 @@ const environmentComponent = (props) => (
   />
 );
 
-const ReplicaSetPods = (props) => <PodsComponent {...props} customData={{ showNodes: true }} />;
+const ReplicaSetPods = (props) => <PodsComponent {...props} showNodes />;
 
 const { details, editYaml, pods, envEditor, events } = navFactory;
 const ReplicaSetsDetailsPage = (props) => (
diff --git a/frontend/public/components/replication-controller.jsx b/frontend/public/components/replication-controller.jsx
index 732e10a17d7..0daf37a31dd 100644
--- a/frontend/public/components/replication-controller.jsx
+++ b/frontend/public/components/replication-controller.jsx
@@ -82,9 +82,7 @@ const environmentComponent = (props) => (
 
 const { details, editYaml, pods, envEditor, events } = navFactory;
 
-const ReplicationControllerPods = (props) => (
-  <PodsComponent {...props} customData={{ showNodes: true }} />
-);
+const ReplicationControllerPods = (props) => <PodsComponent {...props} showNodes />;
 
 export const ReplicationControllersDetailsPage = (props) => {
   const { t } = useTranslation();
diff --git a/frontend/public/components/row-filter.jsx b/frontend/public/components/row-filter.jsx
index 280a07f0134..4c1dca6c4ce 100644
--- a/frontend/public/components/row-filter.jsx
+++ b/frontend/public/components/row-filter.jsx
@@ -106,7 +106,7 @@ class CheckBoxes_ extends React.Component {
     if (!_.isEmpty(recognized)) {
       this.props.onFilterChange?.(recognized);
       this.props.reduxIDs.forEach((id) =>
-        this.props.filterList(id, this.props.type, { selected: new Set(recognized), all }),
+        this.props.filterList(id, this.props.type, { selected: [...new Set(recognized)], all }),
       );
     }
   }
diff --git a/frontend/public/components/stateful-set.tsx b/frontend/public/components/stateful-set.tsx
index 732eaa653eb..ee14babb098 100644
--- a/frontend/public/components/stateful-set.tsx
+++ b/frontend/public/components/stateful-set.tsx
@@ -112,7 +112,7 @@ export const StatefulSetsPage: React.FC<StatefulSetsPageProps> = (props) => (
 );
 
 const StatefulSetPods: React.FC<StatefulSetPodsProps> = (props) => (
-  <PodsComponent {...props} customData={{ showNodes: true }} />
+  <PodsComponent {...props} showNodes />
 );
 
 const pages = [
diff --git a/frontend/public/components/user.tsx b/frontend/public/components/user.tsx
index 7fa65ed3cbe..c2893493972 100644
--- a/frontend/public/components/user.tsx
+++ b/frontend/public/components/user.tsx
@@ -177,7 +177,7 @@ export const UserPage: React.FC<UserPageProps> = (props) => {
 const RoleBindingsTab: React.FC<RoleBindingsTabProps> = ({ obj }) => (
   <RoleBindingsPage
     showTitle={false}
-    staticFilters={[{ 'role-binding-user': obj.metadata.name }]}
+    staticFilters={{ 'role-binding-user': obj.metadata.name }}
     name={obj.metadata.name}
     kind={obj.kind}
   />
diff --git a/frontend/public/components/utils/horizontal-nav.tsx b/frontend/public/components/utils/horizontal-nav.tsx
index 7e3e69a924c..292dbac62e7 100644
--- a/frontend/public/components/utils/horizontal-nav.tsx
+++ b/frontend/public/components/utils/horizontal-nav.tsx
@@ -31,7 +31,7 @@ export class PodsComponent extends React.PureComponent<PodsComponentProps> {
       metadata: { namespace },
       spec: { selector },
     } = this.props.obj;
-    const { customData } = this.props;
+    const { showNodes } = this.props;
     if (_.isEmpty(selector)) {
       return <EmptyBox label="Pods" />;
     }
@@ -45,7 +45,7 @@ export class PodsComponent extends React.PureComponent<PodsComponentProps> {
         namespace={namespace}
         selector={selector}
         canCreate={false}
-        customData={customData}
+        showNodes={showNodes}
       />
     );
   }
@@ -305,7 +305,7 @@ export const HorizontalNav = React.memo((props: HorizontalNavProps) => {
 
 export type PodsComponentProps = {
   obj: K8sResourceKind;
-  customData?: any;
+  showNodes?: boolean;
 };
 
 export type NavBarProps = {
diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
index df81d93b709..30ae34f07db 100644
--- a/frontend/public/locales/en/public.json
+++ b/frontend/public/locales/en/public.json
@@ -166,11 +166,11 @@
   "Hostname": "Hostname",
   "Optional domain for use with a hosted instance of GitHub Enterprise.": "Optional domain for use with a hosted instance of GitHub Enterprise.",
   "Organizations": "Organizations",
-  "Optionally list organizations. If specified, only GitHub users that are members of at least one of the listed organizations will be allowed to log in. Cannot be used in combination with <strong>teams</strong>.": "Optionally list organizations. If specified, only GitHub users that are members of at least one of the listed organizations will be allowed to log in. Cannot be used in combination with <strong>teams</strong>.",
+  "Optionally list organizations. If specified, only GitHub users that are members of at least one of the listed organizations will be allowed to log in. Cannot be used in combination with <strong>teams</strong>.": "Optionally list organizations. If specified, only GitHub users that are members of at least one of the listed organizations will be allowed to log in. Cannot be used in combination with <1>teams</1>.",
   "Organization": "Organization",
   "Restricts which organizations are allowed to log in.": "Restricts which organizations are allowed to log in.",
   "Teams": "Teams",
-  "Optionally list teams. If specified, only GitHub users that are members of at least one of the listed teams will be allowed to log in. Cannot be used in combination with <strong>organizations</strong>.": "Optionally list teams. If specified, only GitHub users that are members of at least one of the listed teams will be allowed to log in. Cannot be used in combination with <strong>organizations</strong>.",
+  "Optionally list teams. If specified, only GitHub users that are members of at least one of the listed teams will be allowed to log in. Cannot be used in combination with <strong>organizations</strong>.": "Optionally list teams. If specified, only GitHub users that are members of at least one of the listed teams will be allowed to log in. Cannot be used in combination with <2>organizations</2>.",
   "Team": "Team",
   "Restricts which teams are allowed to log in. The format is <org>/<team>.": "Restricts which teams are allowed to log in. The format is <org>/<team>.",
   "Add Identity Provider: GitLab": "Add Identity Provider: GitLab",
@@ -657,7 +657,7 @@
   "Provider state": "Provider state",
   "Instance type": "Instance type",
   "Machine addresses": "Machine addresses",
-  "by machine or node name": "by machine or node name",
+  "Create machine": "Create machine",
   "Learning Portal": "Learning Portal",
   "OpenShift Blog": "OpenShift Blog",
   "System status": "System status",
@@ -1193,6 +1193,7 @@
   "Pod details": "Pod details",
   "Init containers": "Init containers",
   "Terminal": "Terminal",
+  "Create Pod": "Create Pod",
   "Duplicate {{kindLabel}}": "Duplicate {{kindLabel}}",
   "Edit {{kindLabel}} subject": "Edit {{kindLabel}} subject",
   "Delete {{label}} subject": "Delete {{label}} subject",
@@ -1205,11 +1206,10 @@
   "All namespaces": "All namespaces",
   "No RoleBindings found": "No RoleBindings found",
   "Roles grant access to types of objects in the cluster. Roles are applied to a group or user via a RoleBinding.": "Roles grant access to types of objects in the cluster. Roles are applied to a group or user via a RoleBinding.",
+  "Cluster-wide RoleBindings": "Cluster-wide RoleBindings",
   "Namespace RoleBindings": "Namespace RoleBindings",
   "System RoleBindings": "System RoleBindings",
-  "Cluster-wide RoleBindings": "Cluster-wide RoleBindings",
   "Create binding": "Create binding",
-  "by role or subject": "by role or subject",
   "Namespace roles (Role)": "Namespace roles (Role)",
   "Select role name": "Select role name",
   "Cluster-wide roles (ClusterRole)": "Cluster-wide roles (ClusterRole)",
@@ -1256,6 +1256,7 @@
   "Created at": "Created at",
   "Rules": "Rules",
   "rules by action or resource": "rules by action or resource",
+  "by role or subject": "by role or subject",
   "No Roles found": "No Roles found",
   "Roles grant access to types of objects in the cluster. Roles are applied to a team or user via a RoleBinding.": "Roles grant access to types of objects in the cluster. Roles are applied to a team or user via a RoleBinding.",
   "Create Role": "Create Role",