diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx
index fdd2be33b7..e03b2bf945 100644
--- a/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommands.test.jsx
@@ -206,7 +206,8 @@ describe('<AdHocCommands />', () => {
 
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-2"]')
+        .find('td#check-action-item-2')
+        .find('input')
         .simulate('change', { target: { checked: true } });
     });
 
@@ -224,7 +225,8 @@ describe('<AdHocCommands />', () => {
 
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-4"]')
+        .find('td#check-action-item-4')
+        .find('input')
         .simulate('change', { target: { checked: true } });
     });
 
@@ -373,7 +375,8 @@ describe('<AdHocCommands />', () => {
 
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-2"]')
+        .find('td#check-action-item-2')
+        .find('input')
         .simulate('change', {
           target: {
             checked: true,
@@ -395,7 +398,8 @@ describe('<AdHocCommands />', () => {
 
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-4"]')
+        .find('td#check-action-item-4')
+        .find('input')
         .simulate('change', {
           target: {
             checked: true,
diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx
index db8d7edd17..f1fe18338d 100644
--- a/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx
+++ b/awx/ui_next/src/components/AdHocCommands/AdHocCommandsWizard.test.jsx
@@ -153,7 +153,8 @@ describe('<AdHocCommandsWizard/>', () => {
 
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-1"]')
+        .find('td#check-action-item-1')
+        .find('input')
         .simulate('change', { target: { checked: true } });
     });
 
@@ -178,7 +179,8 @@ describe('<AdHocCommandsWizard/>', () => {
     expect(wrapper.find('Button[type="submit"]').prop('isDisabled')).toBe(true);
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-1"]')
+        .find('td#check-action-item-1')
+        .find('input')
         .simulate('change', { target: { checked: true } });
     });
 
diff --git a/awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx b/awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx
index 0e168d974c..5be9c860d1 100644
--- a/awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx
+++ b/awx/ui_next/src/components/AddRole/AddResourceRole.test.jsx
@@ -96,12 +96,12 @@ describe('<_AddResourceRole />', () => {
     // Step 2
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     act(() =>
-      wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
+      wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
     );
     wrapper.update();
-    expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
+    ).toBe(true);
     act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
     wrapper.update();
 
@@ -162,12 +162,12 @@ describe('<_AddResourceRole />', () => {
     // Step 2
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     act(() =>
-      wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
+      wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
     );
     wrapper.update();
-    expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
+    ).toBe(true);
     act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
     wrapper.update();
 
@@ -214,12 +214,12 @@ describe('<_AddResourceRole />', () => {
     // Step 2
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     act(() =>
-      wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
+      wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
     );
     wrapper.update();
-    expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
+    ).toBe(true);
     await act(async () =>
       wrapper.find('PFWizard').prop('onGoToStep')({ id: 1 })
     );
@@ -280,12 +280,12 @@ describe('<_AddResourceRole />', () => {
     // Step 2
     await waitForElement(wrapper, 'EmptyStateBody', el => el.length === 0);
     act(() =>
-      wrapper.find('DataListCheck[name="foo"]').invoke('onChange')(true)
+      wrapper.find('CheckboxListItem[name="foo"]').invoke('onSelect')(true)
     );
     wrapper.update();
-    expect(wrapper.find('DataListCheck[name="foo"]').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper.find('CheckboxListItem[name="foo"]').prop('isSelected')
+    ).toBe(true);
     act(() => wrapper.find('Button[type="submit"]').prop('onClick')());
     wrapper.update();
 
diff --git a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
index 3675b9037e..ac167e61de 100644
--- a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
+++ b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
@@ -1,34 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import {
-  DataListItem,
-  DataListItemRow as PFDataListItemRow,
-  DataListItemCells,
-  DataListCheck,
-  Radio,
-} from '@patternfly/react-core';
-import _DataListCell from '../DataListCell';
-
-const Label = styled.label`
-  ${({ isDisabled }) =>
-    isDisabled &&
-    `
-    opacity: 0.5;
-  `}
-`;
-
-const DataListItemRow = styled(PFDataListItemRow)`
-  && {
-    align-items: center;
-  }
-`;
-
-const DataListCell = styled(_DataListCell)`
-  && {
-    margin-left: 10px;
-  }
-`;
+import { t } from '@lingui/macro';
+import { Td, Tr } from '@patternfly/react-table';
 
 const CheckboxListItem = ({
   isDisabled = false,
@@ -38,43 +11,27 @@ const CheckboxListItem = ({
   label,
   name,
   onDeselect,
+  rowIndex,
   onSelect,
 }) => {
-  const CheckboxRadio = isRadio ? Radio : DataListCheck;
   return (
-    <DataListItem
-      key={itemId}
-      aria-labelledby={`check-action-item-${itemId}`}
-      id={`${itemId}`}
-    >
-      <DataListItemRow>
-        <CheckboxRadio
-          aria-label={`check-action-item-${itemId}`}
-          aria-labelledby={`check-action-item-${itemId}`}
-          checked={isSelected}
-          isDisabled={isDisabled}
-          id={`selected-${itemId}`}
-          isChecked={isSelected}
-          name={name}
-          onChange={isSelected ? onDeselect : onSelect}
-          value={itemId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Label
-                id={`check-action-item-${itemId}`}
-                htmlFor={`selected-${itemId}`}
-                className="check-action-item"
-                isDisabled={isDisabled}
-              >
-                <b>{label}</b>
-              </Label>
-            </DataListCell>,
-          ]}
-        />
-      </DataListItemRow>
-    </DataListItem>
+    <Tr ouiaId={`list-item-${itemId}`} id={`list-item-${itemId}`}>
+      <Td
+        id={`check-action-item-${itemId}`}
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect: isSelected ? onDeselect : onSelect,
+          disable: isDisabled,
+          variant: isRadio ? 'radio' : 'checkbox',
+        }}
+        name={name}
+        dataLabel={t`Selected`}
+      />
+      <Td aria-labelledby={itemId} dataLabel={t`Name`}>
+        <b>{label}</b>
+      </Td>
+    </Tr>
   );
 };
 
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/CredentialsStep.test.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/CredentialsStep.test.jsx
index 0ff65f2815..1b6e37c15f 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/CredentialsStep.test.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/CredentialsStep.test.jsx
@@ -181,7 +181,8 @@ describe('CredentialsStep', () => {
     expect(wrapper.find('Alert').length).toBe(0);
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-2"]')
+        .find('td#check-action-item-2')
+        .find('input')
         .simulate('change', { target: { checked: true } });
     });
     wrapper.update();
@@ -241,7 +242,8 @@ describe('CredentialsStep', () => {
     ).toBe(true);
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-5"]')
+        .find('td#check-action-item-5')
+        .find('input')
         .simulate('change', { target: { checked: true } });
     });
     wrapper.update();
@@ -317,7 +319,8 @@ describe('CredentialsStep', () => {
     wrapper.update();
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-33"]')
+        .find('td#check-action-item-33')
+        .find('input')
         .simulate('change', { target: { checked: true } });
     });
     wrapper.update();
diff --git a/awx/ui_next/src/components/OptionsList/OptionsList.jsx b/awx/ui_next/src/components/OptionsList/OptionsList.jsx
index ef6f23da75..ccd6fd8ff9 100644
--- a/awx/ui_next/src/components/OptionsList/OptionsList.jsx
+++ b/awx/ui_next/src/components/OptionsList/OptionsList.jsx
@@ -12,10 +12,10 @@ import styled from 'styled-components';
 
 import { t } from '@lingui/macro';
 import SelectedList from '../SelectedList';
-import PaginatedDataList from '../PaginatedDataList';
 import CheckboxListItem from '../CheckboxListItem';
 import DataListToolbar from '../DataListToolbar';
 import { QSConfig, SearchColumns, SortColumns } from '../../types';
+import PaginatedTable, { HeaderCell, HeaderRow } from '../PaginatedTable';
 
 const ModalList = styled.div`
   .pf-c-toolbar__content {
@@ -56,7 +56,7 @@ function OptionsList({
           displayKey={displayKey}
         />
       )}
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         items={options}
         itemCount={optionCount}
@@ -67,10 +67,16 @@ function OptionsList({
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
         hasContentLoading={isLoading}
+        headerRow={
+          <HeaderRow qsConfig={qsConfig}>
+            <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+          </HeaderRow>
+        }
         onRowClick={selectItem}
-        renderItem={item => (
+        renderRow={(item, index) => (
           <CheckboxListItem
             key={item.id}
+            rowIndex={index}
             itemId={item.id}
             name={multiple ? item[displayKey] : name}
             label={item[displayKey]}
diff --git a/awx/ui_next/src/components/OptionsList/OptionsList.test.jsx b/awx/ui_next/src/components/OptionsList/OptionsList.test.jsx
index 5c4498a748..d6e7ef1a25 100644
--- a/awx/ui_next/src/components/OptionsList/OptionsList.test.jsx
+++ b/awx/ui_next/src/components/OptionsList/OptionsList.test.jsx
@@ -27,7 +27,7 @@ describe('<OptionsList />', () => {
         name="Item"
       />
     );
-    expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(options);
+    expect(wrapper.find('PaginatedTable').prop('items')).toEqual(options);
     expect(wrapper.find('SelectedList')).toHaveLength(0);
   });
 
diff --git a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
index 5bced479a6..871e2bfbb2 100644
--- a/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx
@@ -35,7 +35,6 @@ function PaginatedTable({
   toolbarRelatedSearchableKeys,
   pluralizedItemName,
   showPageSizeOptions,
-
   renderToolbar,
   emptyContentMessage,
   ouiaId,
diff --git a/awx/ui_next/src/components/Schedule/ScheduleAdd/ScheduleAdd.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleAdd/ScheduleAdd.test.jsx
index a84a50a466..4ecd88cf3a 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleAdd/ScheduleAdd.test.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleAdd/ScheduleAdd.test.jsx
@@ -339,7 +339,8 @@ describe('<ScheduleAdd />', () => {
     ).toBe(true);
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-1"]')
+        .find('td#check-action-item-1')
+        .find('input')
         .simulate('change', {
           target: {
             checked: true,
@@ -349,7 +350,8 @@ describe('<ScheduleAdd />', () => {
     wrapper.update();
     expect(
       wrapper
-        .find('input[aria-labelledby="check-action-item-1"]')
+        .find('td#check-action-item-1')
+        .find('input')
         .prop('checked')
     ).toBe(true);
     await act(async () =>
diff --git a/awx/ui_next/src/components/Schedule/ScheduleEdit/ScheduleEdit.test.jsx b/awx/ui_next/src/components/Schedule/ScheduleEdit/ScheduleEdit.test.jsx
index 4e050cb372..85de8346fe 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleEdit/ScheduleEdit.test.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleEdit/ScheduleEdit.test.jsx
@@ -471,7 +471,8 @@ describe('<ScheduleEdit />', () => {
 
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-1"]')
+        .find('td#check-action-item-1')
+        .find('input')
         .simulate('change', {
           target: {
             checked: true,
@@ -482,7 +483,8 @@ describe('<ScheduleEdit />', () => {
 
     expect(
       wrapper
-        .find('input[aria-labelledby="check-action-item-1"]')
+        .find('td#check-action-item-1')
+        .find('input')
         .prop('checked')
     ).toBe(true);
     await act(async () =>
@@ -502,13 +504,15 @@ describe('<ScheduleEdit />', () => {
 
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-2"]')
+        .find('td#check-action-item-2')
+        .find('input')
         .simulate('click');
     });
     wrapper.update();
     expect(
       wrapper
-        .find('input[aria-labelledby="check-action-item-2"]')
+        .find('td#check-action-item-2')
+        .find('input')
         .prop('checked')
     ).toBe(true);
     await act(async () =>
@@ -599,7 +603,8 @@ describe('<ScheduleEdit />', () => {
     wrapper.update();
     await act(async () => {
       wrapper
-        .find('input[aria-labelledby="check-action-item-2"]')
+        .find('td#check-action-item-2')
+        .find('input')
         .simulate('change', {
           target: {
             checked: true,
@@ -610,7 +615,8 @@ describe('<ScheduleEdit />', () => {
 
     expect(
       wrapper
-        .find('input[aria-labelledby="check-action-item-2"]')
+        .find('td#check-action-item-2')
+        .find('input')
         .prop('checked')
     ).toBe(true);
     await act(async () =>
diff --git a/awx/ui_next/src/components/Schedule/shared/ScheduleForm.test.jsx b/awx/ui_next/src/components/Schedule/shared/ScheduleForm.test.jsx
index 5455919ebc..c650c3ceaa 100644
--- a/awx/ui_next/src/components/Schedule/shared/ScheduleForm.test.jsx
+++ b/awx/ui_next/src/components/Schedule/shared/ScheduleForm.test.jsx
@@ -330,7 +330,8 @@ describe('<ScheduleForm />', () => {
       ).toBe(true);
       await act(async () => {
         promptWrapper
-          .find('input[aria-labelledby="check-action-item-1"]')
+          .find('td#check-action-item-1')
+          .find('input')
           .simulate('change', {
             target: {
               checked: true,
@@ -340,7 +341,8 @@ describe('<ScheduleForm />', () => {
       promptWrapper.update();
       expect(
         promptWrapper
-          .find('input[aria-labelledby="check-action-item-1"]')
+          .find('td#check-action-item-1')
+          .find('input')
           .prop('checked')
       ).toBe(true);
       await act(async () =>
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx
index c944f26ce2..caea121978 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginField.jsx
@@ -19,15 +19,7 @@ import { CredentialPluginPrompt } from './CredentialPluginPrompt';
 import CredentialPluginSelected from './CredentialPluginSelected';
 
 function CredentialPluginInput(props) {
-  const {
-    children,
-
-    isDisabled,
-    isRequired,
-    validated,
-    fieldOptions,
-  } = props;
-
+  const { children, isDisabled, isRequired, validated, fieldOptions } = props;
   const [showPluginWizard, setShowPluginWizard] = useState(false);
   const [inputField, meta, helpers] = useField(`inputs.${fieldOptions.id}`);
   const [passwordPromptField] = useField(`passwordPrompts.${fieldOptions.id}`);
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx
index 8a1a6ccac6..ce765d19b9 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialPluginPrompt.test.jsx
@@ -114,7 +114,7 @@ describe('<CredentialPluginPrompt />', () => {
 
     test('credentials step renders correctly', () => {
       expect(wrapper.find('CredentialsStep').length).toBe(1);
-      expect(wrapper.find('DataListItem').length).toBe(3);
+      expect(wrapper.find('CheckboxListItem').length).toBe(3);
       expect(
         wrapper.find('Radio').filterWhere(radio => radio.isChecked).length
       ).toBe(0);
@@ -129,18 +129,19 @@ describe('<CredentialPluginPrompt />', () => {
       expect(onClose).toHaveBeenCalledTimes(1);
     });
     test('clicking credential row enables next button', async () => {
+      await waitForElement(wrapper, 'CheckboxListItem', el => el.length > 0);
       await act(async () => {
         wrapper
-          .find('Radio')
-          .at(0)
+          .find('td#check-action-item-1')
+          .find('input')
           .invoke('onChange')(true);
       });
       wrapper.update();
       expect(
         wrapper
-          .find('Radio')
-          .at(0)
-          .prop('isChecked')
+          .find('td#check-action-item-1')
+          .find('input')
+          .prop('checked')
       ).toBe(true);
       expect(wrapper.find('Button[children="Next"]').prop('isDisabled')).toBe(
         false
@@ -168,8 +169,7 @@ describe('<CredentialPluginPrompt />', () => {
       await act(async () => {
         wrapper.find('Button[children="OK"]').simulate('click');
       });
-      // expect(wrapper.debug()).toBe(false);
-      // wrapper.find('Button[children="OK"]').simulate('click');
+
       expect(onSubmit).toHaveBeenCalledWith(
         expect.objectContaining({
           credential: selectedCredential,
@@ -218,14 +218,16 @@ describe('<CredentialPluginPrompt />', () => {
       expect(steps[0].name).toEqual('Credential');
       expect(steps[1].name).toEqual('Metadata');
     });
-    test('credentials step renders correctly', () => {
+    test('credentials step renders correctly', async () => {
+      await waitForElement(wrapper, 'CheckboxListItem', el => el.length > 0);
+
       expect(wrapper.find('CredentialsStep').length).toBe(1);
-      expect(wrapper.find('DataListItem').length).toBe(3);
+      expect(wrapper.find('CheckboxListItem').length).toBe(3);
       expect(
         wrapper
-          .find('Radio')
-          .at(0)
-          .prop('isChecked')
+          .find('td#check-action-item-1')
+          .find('input')
+          .prop('checked')
       ).toBe(true);
       expect(wrapper.find('Button[children="Next"]').prop('isDisabled')).toBe(
         false
diff --git a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialsStep.jsx b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialsStep.jsx
index 93173a37f9..ae8c9d1e63 100644
--- a/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialsStep.jsx
+++ b/awx/ui_next/src/screens/Credential/shared/CredentialPlugins/CredentialPluginPrompt/CredentialsStep.jsx
@@ -7,9 +7,12 @@ import { CredentialsAPI } from '../../../../../api';
 import CheckboxListItem from '../../../../../components/CheckboxListItem';
 import ContentError from '../../../../../components/ContentError';
 import DataListToolbar from '../../../../../components/DataListToolbar';
-import PaginatedDataList from '../../../../../components/PaginatedDataList';
 import { getQSConfig, parseQueryString } from '../../../../../util/qs';
 import useRequest from '../../../../../util/useRequest';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../../../components/PaginatedTable';
 
 const QS_CONFIG = getQSConfig('credential', {
   page: 1,
@@ -59,15 +62,20 @@ function CredentialsStep() {
   }
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       contentError={credentialsError}
       hasContentLoading={isCredentialsLoading}
       itemCount={count}
       items={credentials}
-      onRowClick={row => selectedCredentialHelper.setValue(row)}
       qsConfig={QS_CONFIG}
-      renderItem={credential => (
+      headerRow={
+        <HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
+          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+        </HeaderRow>
+      }
+      renderRow={(credential, index) => (
         <CheckboxListItem
+          rowIndex={index}
           isSelected={selectedCredential?.value?.id === credential.id}
           itemId={credential.id}
           key={credential.id}
@@ -95,12 +103,6 @@ function CredentialsStep() {
           key: 'modified_by__username__icontains',
         },
       ]}
-      toolbarSortColumns={[
-        {
-          name: t`Name`,
-          key: 'name',
-        },
-      ]}
       toolbarSearchableKeys={searchableKeys}
       toolbarRelatedSearchableKeys={relatedSearchableKeys}
     />
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
index c9b51236d6..1885a52219 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
@@ -253,10 +253,6 @@ describe('NodeModal', () => {
     });
     await waitForElement(wrapper, 'PFWizard');
   });
-  afterEach(() => {
-    // jest.clearAllMocks();
-    // onSave.mockClear();
-  });
 
   test('Can successfully create a new job template node', async () => {
     act(() => {
@@ -268,7 +264,10 @@ describe('NodeModal', () => {
     });
     wrapper.update();
     await act(async () => {
-      wrapper.find('Radio').simulate('click');
+      wrapper
+        .find('td#check-action-item-1')
+        .find('input')
+        .prop('onChange')(true);
     });
     wrapper.update();
     await act(async () => {
@@ -333,8 +332,12 @@ describe('NodeModal', () => {
       wrapper.find('AnsibleSelect').prop('onChange')(null, 'project');
     });
     wrapper.update();
+
     await act(async () => {
-      wrapper.find('Radio').simulate('click');
+      wrapper
+        .find('td#check-action-item-1')
+        .find('input')
+        .prop('onChange')(true);
     });
     wrapper.update();
     await act(async () => {
@@ -370,7 +373,10 @@ describe('NodeModal', () => {
     });
     wrapper.update();
     await act(async () => {
-      wrapper.find('Radio').simulate('click');
+      wrapper
+        .find('td#check-action-item-1')
+        .find('input')
+        .prop('onChange')(true);
     });
     wrapper.update();
     await act(async () => {
@@ -405,7 +411,12 @@ describe('NodeModal', () => {
       );
     });
     wrapper.update();
-    await act(async () => wrapper.find('Radio').simulate('click'));
+    await act(async () =>
+      wrapper
+        .find('td#check-action-item-1')
+        .find('input')
+        .prop('onChange')(true)
+    );
     wrapper.update();
 
     await act(async () => {
@@ -659,7 +670,10 @@ describe('Edit existing node', () => {
       'workflow_job_template'
     );
     await act(async () => {
-      newWrapper.find('Radio').simulate('click');
+      newWrapper
+        .find('td#check-action-item-1')
+        .find('input')
+        .prop('onChange')();
       newWrapper.update();
     });
     newWrapper.update();
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx
index fb27d2521a..34df62f4fa 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.jsx
@@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
 import { InventorySourcesAPI } from '../../../../../../api';
 import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
 import useRequest from '../../../../../../util/useRequest';
-import PaginatedDataList from '../../../../../../components/PaginatedDataList';
 import DataListToolbar from '../../../../../../components/DataListToolbar';
 import CheckboxListItem from '../../../../../../components/CheckboxListItem';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../../../../components/PaginatedTable';
 
 const QS_CONFIG = getQSConfig('inventory-sources', {
   page: 1,
@@ -55,16 +58,21 @@ function InventorySourcesList({ nodeResource, onUpdateNodeResource }) {
   }, [fetchInventorySources]);
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       contentError={error}
       hasContentLoading={isLoading}
       itemCount={count}
       items={inventorySources}
-      onRowClick={row => onUpdateNodeResource(row)}
       qsConfig={QS_CONFIG}
       showPageSizeOptions={false}
-      renderItem={item => (
+      headerRow={
+        <HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
+          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+        </HeaderRow>
+      }
+      renderRow={(item, index) => (
         <CheckboxListItem
+          rowIndex={index}
           isSelected={!!(nodeResource && nodeResource.id === item.id)}
           itemId={item.id}
           key={item.id}
@@ -99,12 +107,6 @@ function InventorySourcesList({ nodeResource, onUpdateNodeResource }) {
           ],
         },
       ]}
-      toolbarSortColumns={[
-        {
-          name: t`Name`,
-          key: 'name',
-        },
-      ]}
       toolbarSearchableKeys={searchableKeys}
       toolbarRelatedSearchableKeys={relatedSearchableKeys}
     />
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.test.jsx
index ad6fd57211..e5237734b0 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/InventorySourcesList.test.jsx
@@ -66,7 +66,7 @@ describe('InventorySourcesList', () => {
     ).toBe(false);
     wrapper
       .find('CheckboxListItem[name="Test Inventory Source 2"]')
-      .simulate('click');
+      .prop('onSelect')();
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 2,
       name: 'Test Inventory Source 2',
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.jsx
index ede270eee1..7dd74221ea 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.jsx
@@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
 import { JobTemplatesAPI } from '../../../../../../api';
 import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
 import useRequest from '../../../../../../util/useRequest';
-import PaginatedDataList from '../../../../../../components/PaginatedDataList';
 import DataListToolbar from '../../../../../../components/DataListToolbar';
 import CheckboxListItem from '../../../../../../components/CheckboxListItem';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../../../../components/PaginatedTable';
 
 const QS_CONFIG = getQSConfig('job-templates', {
   page: 1,
@@ -57,15 +60,20 @@ function JobTemplatesList({ nodeResource, onUpdateNodeResource }) {
   }, [fetchJobTemplates]);
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       contentError={error}
       hasContentLoading={isLoading}
       itemCount={count}
       items={jobTemplates}
-      onRowClick={row => onUpdateNodeResource(row)}
       qsConfig={QS_CONFIG}
-      renderItem={item => (
+      headerRow={
+        <HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
+          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+        </HeaderRow>
+      }
+      renderRow={(item, index) => (
         <CheckboxListItem
+          rowIndex={index}
           isSelected={!!(nodeResource && nodeResource.id === item.id)}
           itemId={item.id}
           key={`${item.id}-listItem`}
@@ -97,12 +105,6 @@ function JobTemplatesList({ nodeResource, onUpdateNodeResource }) {
           key: 'modified_by__username__icontains',
         },
       ]}
-      toolbarSortColumns={[
-        {
-          name: t`Name`,
-          key: 'name',
-        },
-      ]}
       toolbarSearchableKeys={searchableKeys}
       toolbarRelatedSearchableKeys={relatedSearchableKeys}
     />
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.test.jsx
index 58606c2e2c..b66a6b1c38 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/JobTemplatesList.test.jsx
@@ -61,7 +61,6 @@ describe('JobTemplatesList', () => {
       );
     });
     wrapper.update();
-    // expect(wrapper.debug()).toBe(false);
     expect(
       wrapper.find('CheckboxListItem[name="Test Job Template"]').props()
         .isSelected
@@ -72,7 +71,7 @@ describe('JobTemplatesList', () => {
     ).toBe(false);
     wrapper
       .find('CheckboxListItem[name="Test Job Template 2"]')
-      .simulate('click');
+      .prop('onSelect')();
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 2,
       name: 'Test Job Template 2',
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.jsx
index 73d79b3bb3..1c32d24398 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.jsx
@@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
 import { ProjectsAPI } from '../../../../../../api';
 import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
 import useRequest from '../../../../../../util/useRequest';
-import PaginatedDataList from '../../../../../../components/PaginatedDataList';
 import DataListToolbar from '../../../../../../components/DataListToolbar';
 import CheckboxListItem from '../../../../../../components/CheckboxListItem';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../../../../components/PaginatedTable';
 
 const QS_CONFIG = getQSConfig('projects', {
   page: 1,
@@ -55,15 +58,20 @@ function ProjectsList({ nodeResource, onUpdateNodeResource }) {
   }, [fetchProjects]);
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       contentError={error}
       hasContentLoading={isLoading}
       itemCount={count}
       items={projects}
-      onRowClick={row => onUpdateNodeResource(row)}
       qsConfig={QS_CONFIG}
-      renderItem={item => (
+      headerRow={
+        <HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
+          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+        </HeaderRow>
+      }
+      renderRow={(item, index) => (
         <CheckboxListItem
+          rowIndex={index}
           isSelected={!!(nodeResource && nodeResource.id === item.id)}
           itemId={item.id}
           key={item.id}
@@ -106,12 +114,6 @@ function ProjectsList({ nodeResource, onUpdateNodeResource }) {
           key: 'created_by__username__icontains',
         },
       ]}
-      toolbarSortColumns={[
-        {
-          name: t`Name`,
-          key: 'name',
-        },
-      ]}
       toolbarSearchableKeys={searchableKeys}
       toolbarRelatedSearchableKeys={relatedSearchableKeys}
     />
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.test.jsx
index 765a329d3d..a6761c999e 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/ProjectsList.test.jsx
@@ -62,7 +62,7 @@ describe('ProjectsList', () => {
     expect(
       wrapper.find('CheckboxListItem[name="Test Project 2"]').props().isSelected
     ).toBe(false);
-    wrapper.find('CheckboxListItem[name="Test Project 2"]').simulate('click');
+    wrapper.find('CheckboxListItem[name="Test Project 2"]').prop('onSelect')();
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 2,
       name: 'Test Project 2',
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.jsx
index 56a6642c28..f3a3569a2f 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.jsx
@@ -6,9 +6,12 @@ import { func, shape } from 'prop-types';
 import { WorkflowJobTemplatesAPI } from '../../../../../../api';
 import { getQSConfig, parseQueryString } from '../../../../../../util/qs';
 import useRequest from '../../../../../../util/useRequest';
-import PaginatedDataList from '../../../../../../components/PaginatedDataList';
 import DataListToolbar from '../../../../../../components/DataListToolbar';
 import CheckboxListItem from '../../../../../../components/CheckboxListItem';
+import PaginatedTable, {
+  HeaderCell,
+  HeaderRow,
+} from '../../../../../../components/PaginatedTable';
 
 const QS_CONFIG = getQSConfig('workflow-job-templates', {
   page: 1,
@@ -62,15 +65,20 @@ function WorkflowJobTemplatesList({ nodeResource, onUpdateNodeResource }) {
   }, [fetchWorkflowJobTemplates]);
 
   return (
-    <PaginatedDataList
+    <PaginatedTable
       contentError={error}
       hasContentLoading={isLoading}
       itemCount={count}
       items={workflowJobTemplates}
-      onRowClick={row => onUpdateNodeResource(row)}
       qsConfig={QS_CONFIG}
-      renderItem={item => (
+      headerRow={
+        <HeaderRow isExpandable={false} qsConfig={QS_CONFIG}>
+          <HeaderCell sortKey="name">{t`Name`}</HeaderCell>
+        </HeaderRow>
+      }
+      renderRow={(item, index) => (
         <CheckboxListItem
+          rowIndex={index}
           isSelected={!!(nodeResource && nodeResource.id === item.id)}
           itemId={item.id}
           key={item.id}
@@ -106,12 +114,6 @@ function WorkflowJobTemplatesList({ nodeResource, onUpdateNodeResource }) {
           key: 'modified_by__username__icontains',
         },
       ]}
-      toolbarSortColumns={[
-        {
-          name: t`Name`,
-          key: 'name',
-        },
-      ]}
       toolbarSearchableKeys={searchableKeys}
       toolbarRelatedSearchableKeys={relatedSearchableKeys}
     />
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.test.jsx
index 121c62cce6..a844f56a11 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/WorkflowJobTemplatesList.test.jsx
@@ -68,7 +68,7 @@ describe('WorkflowJobTemplatesList', () => {
     ).toBe(false);
     wrapper
       .find('CheckboxListItem[name="Test Workflow Job Template 2"]')
-      .simulate('click');
+      .prop('onSelect')();
     expect(onUpdateNodeResource).toHaveBeenCalledWith({
       id: 2,
       name: 'Test Workflow Job Template 2',