diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.jsx
index 4bdba17027..4422dc8c01 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationList.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationList.jsx
@@ -6,7 +6,7 @@ import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
 import ErrorDetail from '../ErrorDetail';
 import NotificationListItem from './NotificationListItem';
-import PaginatedDataList from '../PaginatedDataList';
+import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
 import { getQSConfig, parseQueryString } from '../../util/qs';
 import useRequest from '../../util/useRequest';
 import { NotificationTemplatesAPI } from '../../api';
@@ -169,7 +169,7 @@ function NotificationList({
 
   return (
     <>
-      <PaginatedDataList
+      <PaginatedTable
         contentError={contentError}
         hasContentLoading={isLoading}
         items={notifications}
@@ -211,19 +211,18 @@ function NotificationList({
             key: 'modified_by__username__icontains',
           },
         ]}
-        toolbarSortColumns={[
-          {
-            name: i18n._(t`Name`),
-            key: 'name',
-          },
-          {
-            name: i18n._(t`Type`),
-            key: 'notification_type',
-          },
-        ]}
         toolbarSearchableKeys={searchableKeys}
         toolbarRelatedSearchableKeys={relatedSearchableKeys}
-        renderItem={notification => (
+        headerRow={
+          <HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
+            <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+            <HeaderCell sortKey="notification_type">
+              {i18n._(t`Type`)}
+            </HeaderCell>
+            <HeaderCell>{i18n._(t`Options`)}</HeaderCell>
+          </HeaderRow>
+        }
+        renderRow={(notification, index) => (
           <NotificationListItem
             key={notification.id}
             notification={notification}
@@ -239,6 +238,7 @@ function NotificationList({
             successTurnedOn={successTemplateIds.includes(notification.id)}
             typeLabels={typeLabels}
             showApprovalsToggle={showApprovalsToggle}
+            rowIndex={index}
           />
         )}
       />
diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
index 071eb45e9f..720b2f15c0 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
@@ -87,10 +87,6 @@ describe('<NotificationList />', () => {
     wrapper.unmount();
   });
 
-  test('initially renders succesfully', () => {
-    expect(wrapper.find('PaginatedDataList')).toHaveLength(1);
-  });
-
   test('should render list fetched of items', () => {
     expect(NotificationTemplatesAPI.read).toHaveBeenCalled();
     expect(NotificationTemplatesAPI.readOptions).toHaveBeenCalled();
diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
index 8419db0977..5b0fc2fad7 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
@@ -3,25 +3,9 @@ import { shape, number, string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import {
-  DataListAction as _DataListAction,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Switch,
-} from '@patternfly/react-core';
-import styled from 'styled-components';
-import DataListCell from '../DataListCell';
-
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: ${props => `repeat(${props.columns}, max-content)`};
-`;
-const Label = styled.b`
-  margin-right: 20px;
-`;
+import { Switch } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
+import { ActionsTd, ActionItem } from '../PaginatedTable';
 
 function NotificationListItem({
   canToggleNotifications,
@@ -37,54 +21,37 @@ function NotificationListItem({
   showApprovalsToggle,
 }) {
   return (
-    <DataListItem
-      aria-labelledby={`items-list-item-${notification.id}`}
-      key={notification.id}
-      id={`${notification.id}`}
-    >
-      <DataListItemRow>
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name">
-              <Link
-                to={{
-                  pathname: detailUrl,
-                }}
-              >
-                <b id={`items-list-item-${notification.id}`}>
-                  {notification.name}
-                </b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="type">
-              <Label>{i18n._(t`Type `)}</Label>
-              {typeLabels[notification.notification_type]}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={`items-list-item-${notification.id}`}
-          id={`items-list-item-${notification.id}`}
-          columns={showApprovalsToggle ? 4 : 3}
-        >
-          {showApprovalsToggle && (
-            <Switch
-              id={`notification-${notification.id}-approvals-toggle`}
-              label={i18n._(t`Approval`)}
-              labelOff={i18n._(t`Approval`)}
-              isChecked={approvalsTurnedOn}
-              isDisabled={!canToggleNotifications}
-              onChange={() =>
-                toggleNotification(
-                  notification.id,
-                  approvalsTurnedOn,
-                  'approvals'
-                )
-              }
-              aria-label={i18n._(t`Toggle notification approvals`)}
-            />
-          )}
+    <Tr id={`notification-row-${notification.id}`}>
+      <Td id={`notification-${notification.id}`} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{notification.name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Type`)}>
+        {typeLabels[notification.notification_type]}
+      </Td>
+      <ActionsTd
+        dataLabel={i18n._(t`Options`)}
+        gridColumns="120px 120px 120px 120px"
+      >
+        <ActionItem visible={showApprovalsToggle}>
+          <Switch
+            id={`notification-${notification.id}-approvals-toggle`}
+            label={i18n._(t`Approval`)}
+            labelOff={i18n._(t`Approval`)}
+            isChecked={approvalsTurnedOn}
+            isDisabled={!canToggleNotifications}
+            onChange={() =>
+              toggleNotification(
+                notification.id,
+                approvalsTurnedOn,
+                'approvals'
+              )
+            }
+            aria-label={i18n._(t`Toggle notification approvals`)}
+          />
+        </ActionItem>
+        <ActionItem visible>
           <Switch
             id={`notification-${notification.id}-started-toggle`}
             label={i18n._(t`Start`)}
@@ -96,6 +63,8 @@ function NotificationListItem({
             }
             aria-label={i18n._(t`Toggle notification start`)}
           />
+        </ActionItem>
+        <ActionItem visible>
           <Switch
             id={`notification-${notification.id}-success-toggle`}
             label={i18n._(t`Success`)}
@@ -107,6 +76,8 @@ function NotificationListItem({
             }
             aria-label={i18n._(t`Toggle notification success`)}
           />
+        </ActionItem>
+        <ActionItem visible>
           <Switch
             id={`notification-${notification.id}-error-toggle`}
             label={i18n._(t`Failure`)}
@@ -118,9 +89,9 @@ function NotificationListItem({
             }
             aria-label={i18n._(t`Toggle notification failure`)}
           />
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx
index 22afb5373b..983525db04 100644
--- a/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx
+++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx
@@ -30,13 +30,17 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('initially renders succesfully and displays correct label', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('NotificationListItem')).toMatchSnapshot();
     expect(wrapper.find('Switch').length).toBe(3);
@@ -44,46 +48,55 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('shows approvals toggle when configured', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-        showApprovalsToggle
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+            showApprovalsToggle
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('Switch').length).toBe(4);
   });
 
-  test('displays correct label in correct column', () => {
+  test('displays correct type', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
-    const typeCell = wrapper
-      .find('DataListCell')
-      .at(1)
-      .find('div');
+    const typeCell = wrapper.find('Td').at(1);
     expect(typeCell.text()).toContain('Slack');
   });
 
   test('handles approvals click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        approvalsTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-        showApprovalsToggle
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            approvalsTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+            showApprovalsToggle
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification approvals"]')
@@ -95,15 +108,19 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles approvals click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        approvalsTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-        showApprovalsToggle
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            approvalsTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+            showApprovalsToggle
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification approvals"]')
@@ -114,14 +131,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles started click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        startedTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            startedTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification start"]')
@@ -132,14 +153,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles started click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        startedTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            startedTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification start"]')
@@ -150,14 +175,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles success click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        successTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            successTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification success"]')
@@ -168,14 +197,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles success click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        successTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            successTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification success"]')
@@ -186,14 +219,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles error click when toggle is on', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        errorTurnedOn
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            errorTurnedOn
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification failure"]')
@@ -204,14 +241,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
 
   test('handles error click when toggle is off', () => {
     wrapper = mountWithContexts(
-      <NotificationListItem
-        notification={mockNotif}
-        errorTurnedOn={false}
-        toggleNotification={toggleNotification}
-        detailUrl="/foo"
-        canToggleNotifications
-        typeLabels={typeLabels}
-      />
+      <table>
+        <tbody>
+          <NotificationListItem
+            notification={mockNotif}
+            errorTurnedOn={false}
+            toggleNotification={toggleNotification}
+            detailUrl="/foo"
+            canToggleNotifications
+            typeLabels={typeLabels}
+          />
+        </tbody>
+      </table>
     );
     wrapper
       .find('Switch[aria-label="Toggle notification failure"]')
diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
index 7303fdbd7d..eaf045d78d 100644
--- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
+++ b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
@@ -24,398 +24,442 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
     }
   }
 >
-  <DataListItem
-    aria-labelledby="items-list-item-9000"
-    className=""
-    id="9000"
-    isExpanded={false}
-    key="9000"
+  <Tr
+    id="notification-row-9000"
   >
-    <li
-      aria-labelledby="items-list-item-9000"
-      className="pf-c-data-list__item"
-      id="9000"
+    <TrBase
+      id="notification-row-9000"
+      innerRef={null}
     >
-      <DataListItemRow
-        key=".0"
-        rowid="items-list-item-9000"
+      <tr
+        className=""
+        data-ouia-component-id="OUIA-Generated-TableRow-1"
+        data-ouia-component-type="PF4/TableRow"
+        data-ouia-safe={true}
+        hidden={false}
+        id="notification-row-9000"
       >
-        <div
-          className="pf-c-data-list__item-row"
+        <Td
+          dataLabel="Name"
+          id="notification-9000"
         >
-          <DataListItemCells
-            dataListCells={
-              Array [
-                <ForwardRef(Styled(PFDataListCell))>
-                  <ForwardRef
-                    to={
-                      Object {
-                        "pathname": "/foo",
-                      }
-                    }
+          <TdBase
+            dataLabel="Name"
+            id="notification-9000"
+            innerRef={null}
+          >
+            <td
+              className=""
+              data-label="Name"
+              id="notification-9000"
+            >
+              <Link
+                to="/foo"
+              >
+                <LinkAnchor
+                  href="/foo"
+                  navigate={[Function]}
+                >
+                  <a
+                    href="/foo"
+                    onClick={[Function]}
                   >
-                    <b
-                      id="items-list-item-9000"
-                    >
+                    <b>
                       Foo
                     </b>
-                  </ForwardRef>
-                </ForwardRef(Styled(PFDataListCell))>,
-                <ForwardRef(Styled(PFDataListCell))>
-                  <ForwardRef(styled.b)>
-                    Type
-                  </ForwardRef(styled.b)>
-                  Slack
-                </ForwardRef(Styled(PFDataListCell))>,
-              ]
-            }
-            key=".0"
-            rowid="items-list-item-9000"
+                  </a>
+                </LinkAnchor>
+              </Link>
+            </td>
+          </TdBase>
+        </Td>
+        <Td
+          dataLabel="Type"
+        >
+          <TdBase
+            dataLabel="Type"
+            innerRef={null}
           >
-            <div
-              className="pf-c-data-list__item-content"
+            <td
+              className=""
+              data-label="Type"
             >
-              <DataListCell
-                key="name"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-bdVaJa",
-                        "isStatic": false,
-                        "lastClassName": "kruorc",
-                        "rules": Array [
-                          "
-  word-break: break-word;
-",
-                        ],
-                      },
-                      "displayName": "DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-bdVaJa",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <PFDataListCell
-                    className="sc-bdVaJa kruorc"
-                  >
-                    <div
-                      className="pf-c-data-list__cell sc-bdVaJa kruorc"
-                    >
-                      <Link
-                        to={
-                          Object {
-                            "pathname": "/foo",
-                          }
-                        }
-                      >
-                        <LinkAnchor
-                          href="/foo"
-                          navigate={[Function]}
-                        >
-                          <a
-                            href="/foo"
-                            onClick={[Function]}
-                          >
-                            <b
-                              id="items-list-item-9000"
-                            >
-                              Foo
-                            </b>
-                          </a>
-                        </LinkAnchor>
-                      </Link>
-                    </div>
-                  </PFDataListCell>
-                </StyledComponent>
-              </DataListCell>
-              <DataListCell
-                key="type"
-              >
-                <StyledComponent
-                  forwardedComponent={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
-                      "componentStyle": ComponentStyle {
-                        "componentId": "sc-bdVaJa",
-                        "isStatic": false,
-                        "lastClassName": "kruorc",
-                        "rules": Array [
-                          "
-  word-break: break-word;
-",
-                        ],
-                      },
-                      "displayName": "DataListCell",
-                      "foldedComponentIds": Array [],
-                      "render": [Function],
-                      "styledComponentId": "sc-bdVaJa",
-                      "target": [Function],
-                      "toString": [Function],
-                      "warnTooManyClasses": [Function],
-                      "withComponent": [Function],
-                    }
-                  }
-                  forwardedRef={null}
-                >
-                  <PFDataListCell
-                    className="sc-bdVaJa kruorc"
-                  >
-                    <div
-                      className="pf-c-data-list__cell sc-bdVaJa kruorc"
-                    >
-                      <styled.b>
-                        <StyledComponent
-                          forwardedComponent={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "attrs": Array [],
-                              "componentStyle": ComponentStyle {
-                                "componentId": "sc-htpNat",
-                                "isStatic": false,
-                                "lastClassName": "jyYvCB",
-                                "rules": Array [
-                                  "
-  margin-right: 20px;
-",
-                                ],
-                              },
-                              "displayName": "styled.b",
-                              "foldedComponentIds": Array [],
-                              "render": [Function],
-                              "styledComponentId": "sc-htpNat",
-                              "target": "b",
-                              "toString": [Function],
-                              "warnTooManyClasses": [Function],
-                              "withComponent": [Function],
-                            }
-                          }
-                          forwardedRef={null}
-                        >
-                          <b
-                            className="sc-htpNat jyYvCB"
-                          >
-                            Type
-                          </b>
-                        </StyledComponent>
-                      </styled.b>
-                      Slack
-                    </div>
-                  </PFDataListCell>
-                </StyledComponent>
-              </DataListCell>
-            </div>
-          </DataListItemCells>
-          <Styled(DataListAction)
-            aria-label="actions"
-            aria-labelledby="items-list-item-9000"
-            columns={3}
-            id="items-list-item-9000"
-            key=".1"
-            rowid="items-list-item-9000"
+              Slack
+            </td>
+          </TdBase>
+        </Td>
+        <ActionsTd
+          dataLabel="Options"
+          gridColumns="120px 120px 120px 120px"
+        >
+          <ActionsTd___StyledTd
+            _css={160}
+            dataLabel="Options"
           >
             <StyledComponent
-              aria-label="actions"
-              aria-labelledby="items-list-item-9000"
-              columns={3}
+              _css={160}
+              dataLabel="Options"
               forwardedComponent={
                 Object {
                   "$$typeof": Symbol(react.forward_ref),
                   "attrs": Array [],
                   "componentStyle": ComponentStyle {
-                    "componentId": "sc-bwzfXH",
+                    "componentId": "ActionsTd___StyledTd-sc-1ys3lw-1",
                     "isStatic": false,
-                    "lastClassName": "llKtln",
+                    "lastClassName": "dIDjZI",
                     "rules": Array [
-                      "
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: ",
+                      "text-align:right;--pf-c-table--cell--Width:",
                       [Function],
-                      ";
-",
+                      "px;",
                     ],
                   },
-                  "displayName": "Styled(DataListAction)",
+                  "displayName": "ActionsTd___StyledTd",
                   "foldedComponentIds": Array [],
                   "render": [Function],
-                  "styledComponentId": "sc-bwzfXH",
-                  "target": [Function],
+                  "styledComponentId": "ActionsTd___StyledTd-sc-1ys3lw-1",
+                  "target": Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "displayName": "Td",
+                    "render": [Function],
+                  },
                   "toString": [Function],
                   "warnTooManyClasses": [Function],
                   "withComponent": [Function],
                 }
               }
               forwardedRef={null}
-              id="items-list-item-9000"
-              rowid="items-list-item-9000"
             >
-              <DataListAction
-                aria-label="actions"
-                aria-labelledby="items-list-item-9000"
-                className="sc-bwzfXH llKtln"
-                columns={3}
-                id="items-list-item-9000"
-                rowid="items-list-item-9000"
+              <Td
+                _css={160}
+                className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                dataLabel="Options"
               >
-                <div
-                  className="pf-c-data-list__item-action sc-bwzfXH llKtln"
-                  columns={3}
-                  rowid="items-list-item-9000"
+                <TdBase
+                  _css={160}
+                  className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                  dataLabel="Options"
+                  innerRef={null}
                 >
-                  <Switch
-                    aria-label="Toggle notification start"
-                    id="notification-9000-started-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Start"
-                    labelOff="Start"
-                    onChange={[Function]}
+                  <td
+                    _css={160}
+                    className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
+                    data-label="Options"
                   >
-                    <label
-                      className="pf-c-switch"
-                      data-ouia-component-id="OUIA-Generated-Switch-1"
-                      data-ouia-component-type="PF4/Switch"
-                      data-ouia-safe={true}
-                      htmlFor="notification-9000-started-toggle"
+                    <ActionsGrid
+                      gridColumns="120px 120px 120px 120px"
+                      numActions={4}
                     >
-                      <input
-                        aria-label="Toggle notification start"
-                        aria-labelledby={null}
-                        checked={false}
-                        className="pf-c-switch__input"
-                        disabled={false}
-                        id="notification-9000-started-toggle"
-                        onChange={[Function]}
-                        type="checkbox"
-                      />
-                      <span
-                        className="pf-c-switch__toggle"
-                      />
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-on"
-                        id={null}
+                      <StyledComponent
+                        forwardedComponent={
+                          Object {
+                            "$$typeof": Symbol(react.forward_ref),
+                            "attrs": Array [],
+                            "componentStyle": ComponentStyle {
+                              "componentId": "ActionsTd__ActionsGrid-sc-1ys3lw-0",
+                              "isStatic": false,
+                              "lastClassName": "dkSSIN",
+                              "rules": Array [
+                                "display:grid;grid-gap:16px;align-items:center;",
+                                [Function],
+                              ],
+                            },
+                            "displayName": "ActionsGrid",
+                            "foldedComponentIds": Array [],
+                            "render": [Function],
+                            "styledComponentId": "ActionsTd__ActionsGrid-sc-1ys3lw-0",
+                            "target": "div",
+                            "toString": [Function],
+                            "warnTooManyClasses": [Function],
+                            "withComponent": [Function],
+                          }
+                        }
+                        forwardedRef={null}
+                        gridColumns="120px 120px 120px 120px"
+                        numActions={4}
                       >
-                        Start
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-off"
-                        id={null}
-                      >
-                        Start
-                      </span>
-                    </label>
-                  </Switch>
-                  <Switch
-                    aria-label="Toggle notification success"
-                    id="notification-9000-success-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Success"
-                    labelOff="Success"
-                    onChange={[Function]}
-                  >
-                    <label
-                      className="pf-c-switch"
-                      data-ouia-component-id="OUIA-Generated-Switch-2"
-                      data-ouia-component-type="PF4/Switch"
-                      data-ouia-safe={true}
-                      htmlFor="notification-9000-success-toggle"
-                    >
-                      <input
-                        aria-label="Toggle notification success"
-                        aria-labelledby={null}
-                        checked={false}
-                        className="pf-c-switch__input"
-                        disabled={false}
-                        id="notification-9000-success-toggle"
-                        onChange={[Function]}
-                        type="checkbox"
-                      />
-                      <span
-                        className="pf-c-switch__toggle"
-                      />
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-on"
-                        id={null}
-                      >
-                        Success
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-off"
-                        id={null}
-                      >
-                        Success
-                      </span>
-                    </label>
-                  </Switch>
-                  <Switch
-                    aria-label="Toggle notification failure"
-                    id="notification-9000-error-toggle"
-                    isChecked={false}
-                    isDisabled={false}
-                    label="Failure"
-                    labelOff="Failure"
-                    onChange={[Function]}
-                  >
-                    <label
-                      className="pf-c-switch"
-                      data-ouia-component-id="OUIA-Generated-Switch-3"
-                      data-ouia-component-type="PF4/Switch"
-                      data-ouia-safe={true}
-                      htmlFor="notification-9000-error-toggle"
-                    >
-                      <input
-                        aria-label="Toggle notification failure"
-                        aria-labelledby={null}
-                        checked={false}
-                        className="pf-c-switch__input"
-                        disabled={false}
-                        id="notification-9000-error-toggle"
-                        onChange={[Function]}
-                        type="checkbox"
-                      />
-                      <span
-                        className="pf-c-switch__toggle"
-                      />
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-on"
-                        id={null}
-                      >
-                        Failure
-                      </span>
-                      <span
-                        aria-hidden="true"
-                        className="pf-c-switch__label pf-m-off"
-                        id={null}
-                      >
-                        Failure
-                      </span>
-                    </label>
-                  </Switch>
-                </div>
-              </DataListAction>
+                        <div
+                          className="ActionsTd__ActionsGrid-sc-1ys3lw-0 dkSSIN"
+                        >
+                          <ActionItem
+                            column={1}
+                            key=".0"
+                            visible={false}
+                          />
+                          <ActionItem
+                            column={2}
+                            key=".1"
+                            visible={true}
+                          >
+                            <ActionItem___StyledDiv
+                              _css={2}
+                            >
+                              <StyledComponent
+                                _css={2}
+                                forwardedComponent={
+                                  Object {
+                                    "$$typeof": Symbol(react.forward_ref),
+                                    "attrs": Array [],
+                                    "componentStyle": ComponentStyle {
+                                      "componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                      "isStatic": false,
+                                      "lastClassName": "gydHvj",
+                                      "rules": Array [
+                                        "grid-column:",
+                                        [Function],
+                                        ";",
+                                      ],
+                                    },
+                                    "displayName": "ActionItem___StyledDiv",
+                                    "foldedComponentIds": Array [],
+                                    "render": [Function],
+                                    "styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                    "target": "div",
+                                    "toString": [Function],
+                                    "warnTooManyClasses": [Function],
+                                    "withComponent": [Function],
+                                  }
+                                }
+                                forwardedRef={null}
+                              >
+                                <div
+                                  className="ActionItem___StyledDiv-sc-1x1z9nz-0 cSmxUZ"
+                                >
+                                  <Switch
+                                    aria-label="Toggle notification start"
+                                    id="notification-9000-started-toggle"
+                                    isChecked={false}
+                                    isDisabled={false}
+                                    label="Start"
+                                    labelOff="Start"
+                                    onChange={[Function]}
+                                  >
+                                    <label
+                                      className="pf-c-switch"
+                                      data-ouia-component-id="OUIA-Generated-Switch-1"
+                                      data-ouia-component-type="PF4/Switch"
+                                      data-ouia-safe={true}
+                                      htmlFor="notification-9000-started-toggle"
+                                    >
+                                      <input
+                                        aria-label="Toggle notification start"
+                                        aria-labelledby={null}
+                                        checked={false}
+                                        className="pf-c-switch__input"
+                                        disabled={false}
+                                        id="notification-9000-started-toggle"
+                                        onChange={[Function]}
+                                        type="checkbox"
+                                      />
+                                      <span
+                                        className="pf-c-switch__toggle"
+                                      />
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-on"
+                                        id={null}
+                                      >
+                                        Start
+                                      </span>
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-off"
+                                        id={null}
+                                      >
+                                        Start
+                                      </span>
+                                    </label>
+                                  </Switch>
+                                </div>
+                              </StyledComponent>
+                            </ActionItem___StyledDiv>
+                          </ActionItem>
+                          <ActionItem
+                            column={3}
+                            key=".2"
+                            visible={true}
+                          >
+                            <ActionItem___StyledDiv
+                              _css={3}
+                            >
+                              <StyledComponent
+                                _css={3}
+                                forwardedComponent={
+                                  Object {
+                                    "$$typeof": Symbol(react.forward_ref),
+                                    "attrs": Array [],
+                                    "componentStyle": ComponentStyle {
+                                      "componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                      "isStatic": false,
+                                      "lastClassName": "gydHvj",
+                                      "rules": Array [
+                                        "grid-column:",
+                                        [Function],
+                                        ";",
+                                      ],
+                                    },
+                                    "displayName": "ActionItem___StyledDiv",
+                                    "foldedComponentIds": Array [],
+                                    "render": [Function],
+                                    "styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                    "target": "div",
+                                    "toString": [Function],
+                                    "warnTooManyClasses": [Function],
+                                    "withComponent": [Function],
+                                  }
+                                }
+                                forwardedRef={null}
+                              >
+                                <div
+                                  className="ActionItem___StyledDiv-sc-1x1z9nz-0 fZyHIW"
+                                >
+                                  <Switch
+                                    aria-label="Toggle notification success"
+                                    id="notification-9000-success-toggle"
+                                    isChecked={false}
+                                    isDisabled={false}
+                                    label="Success"
+                                    labelOff="Success"
+                                    onChange={[Function]}
+                                  >
+                                    <label
+                                      className="pf-c-switch"
+                                      data-ouia-component-id="OUIA-Generated-Switch-2"
+                                      data-ouia-component-type="PF4/Switch"
+                                      data-ouia-safe={true}
+                                      htmlFor="notification-9000-success-toggle"
+                                    >
+                                      <input
+                                        aria-label="Toggle notification success"
+                                        aria-labelledby={null}
+                                        checked={false}
+                                        className="pf-c-switch__input"
+                                        disabled={false}
+                                        id="notification-9000-success-toggle"
+                                        onChange={[Function]}
+                                        type="checkbox"
+                                      />
+                                      <span
+                                        className="pf-c-switch__toggle"
+                                      />
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-on"
+                                        id={null}
+                                      >
+                                        Success
+                                      </span>
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-off"
+                                        id={null}
+                                      >
+                                        Success
+                                      </span>
+                                    </label>
+                                  </Switch>
+                                </div>
+                              </StyledComponent>
+                            </ActionItem___StyledDiv>
+                          </ActionItem>
+                          <ActionItem
+                            column={4}
+                            key=".3"
+                            visible={true}
+                          >
+                            <ActionItem___StyledDiv
+                              _css={4}
+                            >
+                              <StyledComponent
+                                _css={4}
+                                forwardedComponent={
+                                  Object {
+                                    "$$typeof": Symbol(react.forward_ref),
+                                    "attrs": Array [],
+                                    "componentStyle": ComponentStyle {
+                                      "componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                      "isStatic": false,
+                                      "lastClassName": "gydHvj",
+                                      "rules": Array [
+                                        "grid-column:",
+                                        [Function],
+                                        ";",
+                                      ],
+                                    },
+                                    "displayName": "ActionItem___StyledDiv",
+                                    "foldedComponentIds": Array [],
+                                    "render": [Function],
+                                    "styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
+                                    "target": "div",
+                                    "toString": [Function],
+                                    "warnTooManyClasses": [Function],
+                                    "withComponent": [Function],
+                                  }
+                                }
+                                forwardedRef={null}
+                              >
+                                <div
+                                  className="ActionItem___StyledDiv-sc-1x1z9nz-0 gydHvj"
+                                >
+                                  <Switch
+                                    aria-label="Toggle notification failure"
+                                    id="notification-9000-error-toggle"
+                                    isChecked={false}
+                                    isDisabled={false}
+                                    label="Failure"
+                                    labelOff="Failure"
+                                    onChange={[Function]}
+                                  >
+                                    <label
+                                      className="pf-c-switch"
+                                      data-ouia-component-id="OUIA-Generated-Switch-3"
+                                      data-ouia-component-type="PF4/Switch"
+                                      data-ouia-safe={true}
+                                      htmlFor="notification-9000-error-toggle"
+                                    >
+                                      <input
+                                        aria-label="Toggle notification failure"
+                                        aria-labelledby={null}
+                                        checked={false}
+                                        className="pf-c-switch__input"
+                                        disabled={false}
+                                        id="notification-9000-error-toggle"
+                                        onChange={[Function]}
+                                        type="checkbox"
+                                      />
+                                      <span
+                                        className="pf-c-switch__toggle"
+                                      />
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-on"
+                                        id={null}
+                                      >
+                                        Failure
+                                      </span>
+                                      <span
+                                        aria-hidden="true"
+                                        className="pf-c-switch__label pf-m-off"
+                                        id={null}
+                                      >
+                                        Failure
+                                      </span>
+                                    </label>
+                                  </Switch>
+                                </div>
+                              </StyledComponent>
+                            </ActionItem___StyledDiv>
+                          </ActionItem>
+                        </div>
+                      </StyledComponent>
+                    </ActionsGrid>
+                  </td>
+                </TdBase>
+              </Td>
             </StyledComponent>
-          </Styled(DataListAction)>
-        </div>
-      </DataListItemRow>
-    </li>
-  </DataListItem>
+          </ActionsTd___StyledTd>
+        </ActionsTd>
+      </tr>
+    </TrBase>
+  </Tr>
 </NotificationListItem>
 `;
diff --git a/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx b/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
index f9c423fee3..5d4f22d12f 100644
--- a/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/ActionItem.jsx
@@ -13,9 +13,13 @@ export default function ActionItem({ column, tooltip, visible, children }) {
         grid-column: ${column};
       `}
     >
-      <Tooltip content={tooltip} position="top">
-        <div>{children}</div>
-      </Tooltip>
+      {tooltip ? (
+        <Tooltip content={tooltip} position="top">
+          <div>{children}</div>
+        </Tooltip>
+      ) : (
+        children
+      )}
     </div>
   );
 }
diff --git a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
index cec9a984ef..a7b076da57 100644
--- a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
+++ b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
@@ -13,7 +13,12 @@ const Th = styled(PFTh)`
   --pf-c-table--cell--Overflow: initial;
 `;
 
-export default function HeaderRow({ qsConfig, isExpandable, children }) {
+export default function HeaderRow({
+  qsConfig,
+  isExpandable,
+  isSelectable,
+  children,
+}) {
   const location = useLocation();
   const history = useHistory();
 
@@ -49,7 +54,7 @@ export default function HeaderRow({ qsConfig, isExpandable, children }) {
     <Thead>
       <Tr>
         {isExpandable && <Th />}
-        <Th />
+        {isSelectable && <Th />}
         {React.Children.map(
           children,
           child =>
@@ -66,6 +71,10 @@ export default function HeaderRow({ qsConfig, isExpandable, children }) {
   );
 }
 
+HeaderRow.defaultProps = {
+  isSelectable: true,
+};
+
 export function HeaderCell({
   sortKey,
   onSort,
diff --git a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationList.test.jsx b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationList.test.jsx
index 7824ea5ed5..6832d07021 100644
--- a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationList.test.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationList.test.jsx
@@ -48,6 +48,7 @@ describe('<ApplicationsList/>', () => {
     });
     await waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
   });
+
   test('should have data fetched and render 2 rows', async () => {
     ApplicationsAPI.read.mockResolvedValue(applications);
     ApplicationsAPI.readOptions.mockResolvedValue(options);
@@ -69,14 +70,20 @@ describe('<ApplicationsList/>', () => {
     waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
 
     wrapper
-      .find('input#select-application-1')
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
       .simulate('change', applications.data.results[0]);
 
     wrapper.update();
 
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
     );
@@ -131,13 +138,21 @@ describe('<ApplicationsList/>', () => {
     });
     waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
 
-    wrapper.find('input#select-application-1').simulate('change', 'a');
+    wrapper
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
+      .simulate('change', 'a');
 
     wrapper.update();
 
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
     );
@@ -163,6 +178,7 @@ describe('<ApplicationsList/>', () => {
     waitForElement(wrapper, 'ApplicationsList', el => el.length > 0);
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
   });
+
   test('should not render edit button for first list item', async () => {
     applications.data.results[0].summary_fields.user_capabilities.edit = false;
     ApplicationsAPI.read.mockResolvedValue(applications);
diff --git a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.jsx b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.jsx
index 1a0f5c9f4e..0d8a10b98e 100644
--- a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.jsx
@@ -1,104 +1,65 @@
 import React from 'react';
 import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
-
+import { Button } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import { PencilAltIcon } from '@patternfly/react-icons';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { formatDateString } from '../../../util/dates';
 import { Application } from '../../../types';
-import DataListCell from '../../../components/DataListCell';
-
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
-const Label = styled.b`
-  margin-right: 20px;
-`;
 
 function ApplicationListItem({
   application,
   isSelected,
   onSelect,
   detailUrl,
+  rowIndex,
   i18n,
 }) {
   const labelId = `check-action-${application.id}`;
   return (
-    <DataListItem
-      key={application.id}
-      aria-labelledby={labelId}
-      id={`${application.id}`}
-    >
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-application-${application.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell
-              key="divider"
-              aria-label={i18n._(t`application name`)}
-            >
-              <Link to={`${detailUrl}`}>
-                <b>{application.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell
-              key="organization"
-              aria-label={i18n._(t`organization name`)}
-            >
-              <Link
-                to={`/organizations/${application.summary_fields.organization.id}`}
-              >
-                <b>{application.summary_fields.organization.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="modified" aria-label={i18n._(t`last modified`)}>
-              <Label>{i18n._(t`Last Modified`)}</Label>
-              <span>{formatDateString(application.modified)}</span>
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`application-row-${application.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{application.name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Organization`)}>
+        <Link
+          to={`/organizations/${application.summary_fields.organization.id}`}
         >
-          {application.summary_fields.user_capabilities.edit ? (
-            <Tooltip content={i18n._(t`Edit application`)} position="top">
-              <Button
-                aria-label={i18n._(t`Edit application`)}
-                variant="plain"
-                component={Link}
-                to={`/applications/${application.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          ) : (
-            ''
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <b>{application.summary_fields.organization.name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Last Modified`)}>
+        {formatDateString(application.modified)}
+      </Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem
+          visible={application.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit application`)}
+        >
+          <Button
+            aria-label={i18n._(t`Edit application`)}
+            variant="plain"
+            component={Link}
+            to={`/applications/${application.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.test.jsx b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.test.jsx
index 0a53dd4cd8..510c89ff28 100644
--- a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.test.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationListItem.test.jsx
@@ -18,12 +18,16 @@ describe('<ApplicationListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ApplicationListItem
-          application={application}
-          detailUrl="/organizations/2/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <ApplicationListItem
+              application={application}
+              detailUrl="/organizations/2/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('ApplicationListItem').length).toBe(1);
@@ -31,38 +35,30 @@ describe('<ApplicationListItem/>', () => {
   test('should render the proper data', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <ApplicationListItem
-          application={application}
-          detailUrl="/organizations/2/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <ApplicationListItem
+              application={application}
+              detailUrl="/organizations/2/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
-      wrapper.find('DataListCell[aria-label="application name"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Foo');
     expect(
-      wrapper.find('DataListCell[aria-label="organization name"]').text()
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
     ).toBe('Organization');
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
-      false
-    );
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
   });
-  test('should be checked', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <ApplicationListItem
-          application={application}
-          detailUrl="/organizations/2/details"
-          isSelected
-          onSelect={() => {}}
-        />
-      );
-    });
-    expect(wrapper.find('input#select-application-1').prop('checked')).toBe(
-      true
-    );
-  });
 });
diff --git a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx
index b35ecc7d68..5ed5e092da 100644
--- a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx
@@ -11,7 +11,11 @@ import AlertModal from '../../../components/AlertModal';
 
 import DatalistToolbar from '../../../components/DataListToolbar';
 import { ApplicationsAPI } from '../../../api';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarDeleteButton,
   ToolbarAddButton,
 } from '../../../components/PaginatedDataList';
@@ -104,7 +108,7 @@ function ApplicationsList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={error}
             hasContentLoading={isLoading || deleteLoading}
             items={applications}
@@ -123,24 +127,6 @@ function ApplicationsList({ i18n }) {
                 key: 'description__icontains',
               },
             ]}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-              },
-              {
-                name: i18n._(t`Created`),
-                key: 'created',
-              },
-              {
-                name: i18n._(t`Organization`),
-                key: 'organization',
-              },
-              {
-                name: i18n._(t`Description`),
-                key: 'description',
-              },
-            ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
             renderToolbar={props => (
@@ -170,7 +156,17 @@ function ApplicationsList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={application => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell sortKey="organization">
+                  {i18n._(t`Organization`)}
+                </HeaderCell>
+                <HeaderCell>{i18n._(t`Last Modified`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(application, index) => (
               <ApplicationListItem
                 key={application.id}
                 value={application.name}
@@ -178,6 +174,7 @@ function ApplicationsList({ i18n }) {
                 detailUrl={`${match.url}/${application.id}/details`}
                 onSelect={() => handleSelect(application)}
                 isSelected={selected.some(row => row.id === application.id)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
index ee47d2fdbc..7c491bd36a 100644
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
@@ -8,10 +8,14 @@ import { CredentialTypesAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import useSelected from '../../../util/useSelected';
-import PaginatedDataList, {
+import {
   ToolbarDeleteButton,
   ToolbarAddButton,
 } from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
 import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
 import DatalistToolbar from '../../../components/DataListToolbar';
@@ -106,7 +110,7 @@ function CredentialTypeList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={isLoading || deleteLoading}
             items={credentialTypes}
@@ -162,7 +166,13 @@ function CredentialTypeList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={credentialType => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(credentialType, index) => (
               <CredentialTypeListItem
                 key={credentialType.id}
                 value={credentialType.name}
@@ -170,6 +180,7 @@ function CredentialTypeList({ i18n }) {
                 detailUrl={`${match.url}/${credentialType.id}/details`}
                 onSelect={() => handleSelect(credentialType)}
                 isSelected={selected.some(row => row.id === credentialType.id)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.test.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.test.jsx
index adeda5255b..16f5f4daf7 100644
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.test.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.test.jsx
@@ -72,12 +72,18 @@ describe('<CredentialTypeList', () => {
     await waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
 
     wrapper
-      .find('input#select-credential-types-1')
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
       .simulate('change', credentialTypes.data.results[0]);
     wrapper.update();
 
     expect(
-      wrapper.find('input#select-credential-types-1').prop('checked')
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
     ).toBe(true);
 
     await act(async () => {
@@ -133,10 +139,18 @@ describe('<CredentialTypeList', () => {
     });
     waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
 
-    wrapper.find('input#select-credential-types-1').simulate('change', 'a');
+    wrapper
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
+      .simulate('change', 'a');
     wrapper.update();
     expect(
-      wrapper.find('input#select-credential-types-1').prop('checked')
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
     ).toBe(true);
 
     await act(async () =>
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.jsx
index d6dd1cf1fa..ea461b58bb 100644
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.jsx
@@ -3,82 +3,53 @@ import { string, bool, func } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  Tooltip,
-} from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { PencilAltIcon } from '@patternfly/react-icons';
-import styled from 'styled-components';
-
-import DataListCell from '../../../components/DataListCell';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { CredentialType } from '../../../types';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
 function CredentialTypeListItem({
   credentialType,
   detailUrl,
   isSelected,
   onSelect,
+  rowIndex,
   i18n,
 }) {
   const labelId = `check-action-${credentialType.id}`;
 
   return (
-    <DataListItem
-      key={credentialType.id}
-      aria-labelledby={labelId}
-      id={`${credentialType.id} `}
-    >
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-credential-types-${credentialType.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell
-              key="name"
-              aria-label={i18n._(t`credential type name`)}
-            >
-              <Link to={`${detailUrl}`}>
-                <b>{credentialType.name}</b>
-              </Link>
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`credential-type-row-${credentialType.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{credentialType.name}</b>
+        </Link>
+      </Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem
+          visible={credentialType.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit credential type`)}
         >
-          {credentialType.summary_fields.user_capabilities.edit && (
-            <Tooltip content={i18n._(t`Edit credential type`)} position="top">
-              <Button
-                aria-label={i18n._(t`Edit credential type`)}
-                variant="plain"
-                component={Link}
-                to={`/credential_types/${credentialType.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            aria-label={i18n._(t`Edit credential type`)}
+            variant="plain"
+            component={Link}
+            to={`/credential_types/${credentialType.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.test.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.test.jsx
index 3cb4f6cc52..45c78d918e 100644
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.test.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeListItem.test.jsx
@@ -17,12 +17,16 @@ describe('<CredentialTypeListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
-          credentialType={credential_type}
-          detailUrl="credential_types/1/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <CredentialTypeListItem
+              credentialType={credential_type}
+              detailUrl="credential_types/1/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('CredentialTypeListItem').length).toBe(1);
@@ -31,48 +35,38 @@ describe('<CredentialTypeListItem/>', () => {
   test('should render the proper data', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
-          credentialType={credential_type}
-          detailsUrl="credential_types/1/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <CredentialTypeListItem
+              credentialType={credential_type}
+              detailsUrl="credential_types/1/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
-    expect(
-      wrapper.find('DataListCell[aria-label="credential type name"]').text()
-    ).toBe('Foo');
+    expect(wrapper.find('Td[dataLabel="Name"]').text()).toBe('Foo');
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
-    expect(
-      wrapper.find('input#select-credential-types-1').prop('checked')
-    ).toBe(false);
-  });
-
-  test('should be checked', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <CredentialTypeListItem
-          credentialType={credential_type}
-          detailsUrl="credential_types/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
-      );
-    });
-    expect(
-      wrapper.find('input#select-credential-types-1').prop('checked')
-    ).toBe(true);
+    expect(wrapper.find('.pf-c-table__check input').prop('checked')).toBe(
+      undefined
+    );
   });
 
   test('edit button shown to users with edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
-          credentialType={credential_type}
-          detailsUrl="credential_types/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <CredentialTypeListItem
+              credentialType={credential_type}
+              detailsUrl="credential_types/1/details"
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
 
@@ -82,15 +76,19 @@ describe('<CredentialTypeListItem/>', () => {
   test('edit button hidden from users without edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <CredentialTypeListItem
-          credentialType={{
-            ...credential_type,
-            summary_fields: { user_capabilities: { edit: false } },
-          }}
-          detailsUrl="credential_types/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <CredentialTypeListItem
+              credentialType={{
+                ...credential_type,
+                summary_fields: { user_capabilities: { edit: false } },
+              }}
+              detailsUrl="credential_types/1/details"
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
 
diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx
index 6b3b43f637..5e1994f640 100644
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx
@@ -8,9 +8,11 @@ import { InstanceGroupsAPI } from '../../../api';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useRequest, { useDeleteItems } from '../../../util/useRequest';
 import useSelected from '../../../util/useSelected';
-import PaginatedDataList, {
-  ToolbarDeleteButton,
-} from '../../../components/PaginatedDataList';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import { ToolbarDeleteButton } from '../../../components/PaginatedDataList';
 import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
 import DatalistToolbar from '../../../components/DataListToolbar';
@@ -189,7 +191,7 @@ function InstanceGroupList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={isLoading || deleteLoading}
             items={instanceGroups}
@@ -220,7 +222,18 @@ function InstanceGroupList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={instanceGroup => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Type`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Running Jobs`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Total Jobs`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Instances`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Capacity`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(instanceGroup, index) => (
               <InstanceGroupListItem
                 key={instanceGroup.id}
                 value={instanceGroup.name}
@@ -228,6 +241,7 @@ function InstanceGroupList({ i18n }) {
                 detailUrl={getDetailUrl(instanceGroup)}
                 onSelect={() => handleSelect(instanceGroup)}
                 isSelected={selected.some(row => row.id === instanceGroup.id)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={canAdd && addButton}
diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.test.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.test.jsx
index 335089e4bc..74f397dc1c 100644
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.test.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.test.jsx
@@ -71,13 +71,19 @@ describe('<InstanceGroupList />', () => {
     await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
 
     wrapper
-      .find('input#select-instance-groups-1')
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
       .simulate('change', instanceGroups);
     wrapper.update();
 
-    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
 
     await act(async () => {
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')();
@@ -102,16 +108,22 @@ describe('<InstanceGroupList />', () => {
     });
     await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
 
-    const instanceGroupIndex = [1, 2, 3];
+    const instanceGroupIndex = [0, 1, 2];
 
     instanceGroupIndex.forEach(element => {
       wrapper
-        .find(`input#select-instance-groups-${element}`)
+        .find('.pf-c-table__check')
+        .at(element)
+        .find('input')
         .simulate('change', instanceGroups);
       wrapper.update();
 
       expect(
-        wrapper.find(`input#select-instance-groups-${element}`).prop('checked')
+        wrapper
+          .find('.pf-c-table__check')
+          .at(element)
+          .find('input')
+          .prop('checked')
       ).toBe(true);
     });
 
@@ -159,11 +171,19 @@ describe('<InstanceGroupList />', () => {
     });
     waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
 
-    wrapper.find('input#select-instance-groups-1').simulate('change', 'a');
+    wrapper
+      .find('.pf-c-table__check')
+      .first()
+      .find('input')
+      .simulate('change', 'a');
     wrapper.update();
-    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
-      true
-    );
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toBe(true);
 
     await act(async () =>
       wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
index 670835c405..8bfcf05325 100644
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx
@@ -5,48 +5,18 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import 'styled-components/macro';
 import {
-  Badge as PFBadge,
   Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
   Label,
   Progress,
   ProgressMeasureLocation,
   ProgressSize,
-  Tooltip,
 } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { PencilAltIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
-
-import _DataListCell from '../../../components/DataListCell';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { InstanceGroup } from '../../../types';
 
-const DataListCell = styled(_DataListCell)`
-  white-space: nowrap;
-`;
-
-const Badge = styled(PFBadge)`
-  margin-left: 8px;
-`;
-
-const ListGroup = styled.span`
-  margin-left: 12px;
-
-  &:first-of-type {
-    margin-left: 0;
-  }
-`;
-
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: 40px;
-`;
-
 const Unavailable = styled.span`
   color: var(--pf-global--danger-color--200);
 `;
@@ -56,6 +26,7 @@ function InstanceGroupListItem({
   detailUrl,
   isSelected,
   onSelect,
+  rowIndex,
   i18n,
 }) {
   const labelId = `check-action-${instanceGroup.id}`;
@@ -104,98 +75,50 @@ function InstanceGroupListItem({
   };
 
   return (
-    <DataListItem
-      key={instanceGroup.id}
-      aria-labelledby={labelId}
-      id={`${instanceGroup.id} `}
-    >
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-instance-groups-${instanceGroup.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell
-              key="name"
-              aria-label={i18n._(t`instance group name`)}
-            >
-              <span id={labelId}>
-                <Link to={`${detailUrl}`}>
-                  <b>{instanceGroup.name}</b>
-                </Link>
-              </span>
-              {verifyInstanceGroup(instanceGroup)}
-            </DataListCell>,
-
-            <DataListCell
-              key="type"
-              aria-label={i18n._(t`instance group type`)}
-            >
-              <b css="margin-right: 24px">{i18n._(t`Type`)}</b>
-              <span id={labelId}>
-                {isContainerGroup(instanceGroup)
-                  ? i18n._(t`Container group`)
-                  : i18n._(t`Instance group`)}
-              </span>
-            </DataListCell>,
-            <DataListCell
-              key="related-field-counts"
-              aria-label={i18n._(t`instance counts`)}
-              width={2}
-            >
-              <ListGroup>
-                <b>{i18n._(t`Running jobs`)}</b>
-                <Badge isRead>{instanceGroup.jobs_running}</Badge>
-              </ListGroup>
-              <ListGroup>
-                <b>{i18n._(t`Total jobs`)}</b>
-                <Badge isRead>{instanceGroup.jobs_total}</Badge>
-              </ListGroup>
-
-              {!instanceGroup.is_containerized ? (
-                <ListGroup>
-                  <b>{i18n._(t`Instances`)}</b>
-                  <Badge isRead>{instanceGroup.instances}</Badge>
-                </ListGroup>
-              ) : null}
-            </DataListCell>,
-
-            <DataListCell
-              key="capacity"
-              aria-label={i18n._(t`instance group used capacity`)}
-            >
-              {usedCapacity(instanceGroup)}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
-          id={labelId}
+    <Tr id={`ig-row-${instanceGroup.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{instanceGroup.name}</b>
+          {verifyInstanceGroup(instanceGroup)}
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Type`)}>
+        {isContainerGroup(instanceGroup)
+          ? i18n._(t`Container group`)
+          : i18n._(t`Instance group`)}
+      </Td>
+      <Td dataLabel={i18n._(t`Running jobs`)}>{instanceGroup.jobs_running}</Td>
+      <Td dataLabel={i18n._(t`Total jobs`)}>{instanceGroup.jobs_total}</Td>
+      <Td dataLabel={i18n._(t`Instances`)}>{instanceGroup.instances}</Td>
+      <Td dataLabel={i18n._(t`Capacity`)}>{usedCapacity(instanceGroup)}</Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem
+          visible={instanceGroup.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit instance group`)}
         >
-          {instanceGroup.summary_fields.user_capabilities.edit && (
-            <Tooltip content={i18n._(t`Edit instance group`)} position="top">
-              <Button
-                aria-label={i18n._(t`Edit instance group`)}
-                variant="plain"
-                component={Link}
-                to={
-                  isContainerGroup(instanceGroup)
-                    ? `/instance_groups/container_group/${instanceGroup.id}/edit`
-                    : `/instance_groups/${instanceGroup.id}/edit`
-                }
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            aria-label={i18n._(t`Edit instance group`)}
+            variant="plain"
+            component={Link}
+            to={
+              isContainerGroup(instanceGroup)
+                ? `/instance_groups/container_group/${instanceGroup.id}/edit`
+                : `/instance_groups/${instanceGroup.id}/edit`
+            }
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 InstanceGroupListItem.prototype = {
diff --git a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.test.jsx b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.test.jsx
index 9c819dd964..0f22a4b6d7 100644
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.test.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.test.jsx
@@ -47,12 +47,16 @@ describe('<InstanceGroupListItem/>', () => {
   test('should mount successfully', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[1]}
-          detailUrl="instance_groups/1/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[1]}
+              detailUrl="instance_groups/1/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(wrapper.find('InstanceGroupListItem').length).toBe(1);
@@ -61,73 +65,81 @@ describe('<InstanceGroupListItem/>', () => {
   test('should render the proper data instance group', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[0]}
-          detailUrl="instance_groups/1/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[0]}
+              detailUrl="instance_groups/1/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group name"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Foo');
     expect(wrapper.find('Progress').prop('value')).toBe(40);
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group type"]').text()
-    ).toBe('TypeInstance group');
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
+    ).toBe('Instance group');
     expect(wrapper.find('PencilAltIcon').length).toBe(1);
-    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
-      false
+    expect(wrapper.find('.pf-c-table__check input').prop('checked')).toBe(
+      undefined
     );
   });
 
   test('should render the proper data container group', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[1]}
-          detailUrl="instance_groups/2/details"
-          isSelected={false}
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[1]}
+              detailUrl="instance_groups/2/details"
+              isSelected={false}
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group name"]').text()
+      wrapper
+        .find('Td')
+        .at(1)
+        .text()
     ).toBe('Bar');
 
     expect(
-      wrapper.find('PFDataListCell[aria-label="instance group type"]').text()
-    ).toBe('TypeContainer group');
+      wrapper
+        .find('Td')
+        .at(2)
+        .text()
+    ).toBe('Container group');
     expect(wrapper.find('PencilAltIcon').length).toBe(0);
   });
 
-  test('should be checked', async () => {
-    await act(async () => {
-      wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[0]}
-          detailUrl="instance_groups/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
-      );
-    });
-    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
-      true
-    );
-  });
-
   test('edit button shown to users with edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[0]}
-          detailUrl="instance_groups/1/details"
-          isSelected
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[0]}
+              detailUrl="instance_groups/1/details"
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
 
@@ -137,12 +149,16 @@ describe('<InstanceGroupListItem/>', () => {
   test('edit button hidden from users without edit capabilities', async () => {
     await act(async () => {
       wrapper = mountWithContexts(
-        <InstanceGroupListItem
-          instanceGroup={instanceGroups[1]}
-          detailsUrl="instance_group/2/details"
-          isSelected
-          onSelect={() => {}}
-        />
+        <table>
+          <tbody>
+            <InstanceGroupListItem
+              instanceGroup={instanceGroups[1]}
+              detailsUrl="instance_group/2/details"
+              isSelected
+              onSelect={() => {}}
+            />
+          </tbody>
+        </table>
       );
     });
 
diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx
index a377e73e79..c1b277b730 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx
@@ -4,7 +4,11 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
 import { NotificationTemplatesAPI } from '../../../api';
-import PaginatedDataList, {
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../../components/PaginatedTable';
+import {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
@@ -104,7 +108,7 @@ function NotificationTemplatesList({ i18n }) {
     <>
       <PageSection>
         <Card>
-          <PaginatedDataList
+          <PaginatedTable
             contentError={contentError}
             hasContentLoading={isTemplatesLoading || isDeleteLoading}
             items={templates}
@@ -149,16 +153,6 @@ function NotificationTemplatesList({ i18n }) {
             ]}
             toolbarSearchableKeys={searchableKeys}
             toolbarRelatedSearchableKeys={relatedSearchableKeys}
-            toolbarSortColumns={[
-              {
-                name: i18n._(t`Name`),
-                key: 'name',
-              },
-              {
-                name: i18n._(t`Type`),
-                key: 'notification_type',
-              },
-            ]}
             renderToolbar={props => (
               <DataListToolbar
                 {...props}
@@ -179,7 +173,17 @@ function NotificationTemplatesList({ i18n }) {
                 ]}
               />
             )}
-            renderItem={template => (
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Status`)}</HeaderCell>
+                <HeaderCell sortKey="notification_type">
+                  {i18n._(t`Type`)}
+                </HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderRow={(template, index) => (
               <NotificationTemplateListItem
                 key={template.id}
                 fetchTemplates={fetchTemplates}
@@ -187,6 +191,7 @@ function NotificationTemplatesList({ i18n }) {
                 detailUrl={`${match.url}/${template.id}`}
                 isSelected={selected.some(row => row.id === template.id)}
                 onSelect={() => handleSelect(template)}
+                rowIndex={index}
               />
             )}
             emptyStateControls={
diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.test.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.test.jsx
index d39bffe087..345d2d0a42 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.test.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.test.jsx
@@ -89,21 +89,33 @@ describe('<NotificationTemplateList />', () => {
   });
 
   test('should select item', async () => {
-    const itemCheckboxInput = 'input#select-template-1';
     await act(async () => {
       wrapper = mountWithContexts(<NotificationTemplateList />);
     });
     wrapper.update();
-    expect(wrapper.find(itemCheckboxInput).prop('checked')).toEqual(false);
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toEqual(false);
     await act(async () => {
       wrapper
-        .find(itemCheckboxInput)
-        .closest('DataListCheck')
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
         .props()
         .onChange();
     });
     wrapper.update();
-    expect(wrapper.find(itemCheckboxInput).prop('checked')).toEqual(true);
+    expect(
+      wrapper
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
+        .prop('checked')
+    ).toEqual(true);
   });
 
   test('should delete notifications', async () => {
@@ -135,7 +147,6 @@ describe('<NotificationTemplateList />', () => {
   });
 
   test('should show error dialog shown for failed deletion', async () => {
-    const itemCheckboxInput = 'input#select-template-1';
     OrganizationsAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -153,8 +164,9 @@ describe('<NotificationTemplateList />', () => {
     wrapper.update();
     await act(async () => {
       wrapper
-        .find(itemCheckboxInput)
-        .closest('DataListCheck')
+        .find('.pf-c-table__check')
+        .first()
+        .find('input')
         .props()
         .onChange();
     });
diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx
index f3386f12a9..93d1f82999 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx
@@ -3,32 +3,17 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
-import {
-  Button,
-  DataListAction as _DataListAction,
-  DataListCheck,
-  DataListItem,
-  DataListItemCells,
-  DataListItemRow,
-  Tooltip,
-} from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Tr, Td } from '@patternfly/react-table';
 import { PencilAltIcon, BellIcon } from '@patternfly/react-icons';
+import { ActionsTd, ActionItem } from '../../../components/PaginatedTable';
 import { timeOfDay } from '../../../util/dates';
 import { NotificationTemplatesAPI, NotificationsAPI } from '../../../api';
-import DataListCell from '../../../components/DataListCell';
 import StatusLabel from '../../../components/StatusLabel';
 import CopyButton from '../../../components/CopyButton';
 import useRequest from '../../../util/useRequest';
 import { NOTIFICATION_TYPES } from '../constants';
 
-const DataListAction = styled(_DataListAction)`
-  align-items: center;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(3, 40px);
-`;
-
 const NUM_RETRIES = 25;
 const RETRY_TIMEOUT = 5000;
 
@@ -38,6 +23,7 @@ function NotificationTemplateListItem({
   fetchTemplates,
   isSelected,
   onSelect,
+  rowIndex,
   i18n,
 }) {
   const recentNotifications = template.summary_fields?.recent_notifications;
@@ -102,76 +88,65 @@ function NotificationTemplateListItem({
   const labelId = `template-name-${template.id}`;
 
   return (
-    <DataListItem key={template.id} aria-labelledby={labelId} id={template.id}>
-      <DataListItemRow>
-        <DataListCheck
-          id={`select-template-${template.id}`}
-          checked={isSelected}
-          onChange={onSelect}
-          aria-labelledby={labelId}
-        />
-        <DataListItemCells
-          dataListCells={[
-            <DataListCell key="name" id={labelId}>
-              <Link to={detailUrl}>
-                <b>{template.name}</b>
-              </Link>
-            </DataListCell>,
-            <DataListCell key="status">
-              {status && <StatusLabel status={status} />}
-            </DataListCell>,
-            <DataListCell key="type">
-              <strong>{i18n._(t`Type:`)}</strong>{' '}
-              {NOTIFICATION_TYPES[template.notification_type] ||
-                template.notification_type}
-            </DataListCell>,
-          ]}
-        />
-        <DataListAction
-          aria-label={i18n._(t`actions`)}
-          aria-labelledby={labelId}
+    <Tr id={`notification-template-row-${template.id}`}>
+      <Td
+        select={{
+          rowIndex,
+          isSelected,
+          onSelect,
+        }}
+        dataLabel={i18n._(t`Selected`)}
+      />
+      <Td id={labelId} dataLabel={i18n._(t`Name`)}>
+        <Link to={`${detailUrl}`}>
+          <b>{template.name}</b>
+        </Link>
+      </Td>
+      <Td dataLabel={i18n._(t`Status`)}>
+        {status && <StatusLabel status={status} />}
+      </Td>
+      <Td dataLabel={i18n._(t`Type`)}>
+        {NOTIFICATION_TYPES[template.notification_type] ||
+          template.notification_type}
+      </Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem visible tooltip={i18n._(t`Test notification`)}>
+          <Button
+            aria-label={i18n._(t`Test Notification`)}
+            variant="plain"
+            onClick={sendTestNotification}
+            isDisabled={isLoading || status === 'running'}
+          >
+            <BellIcon />
+          </Button>
+        </ActionItem>
+        <ActionItem
+          visible={template.summary_fields.user_capabilities.edit}
+          tooltip={i18n._(t`Edit`)}
         >
-          <Tooltip content={i18n._(t`Test Notification`)} position="top">
-            <Button
-              aria-label={i18n._(t`Test Notification`)}
-              variant="plain"
-              onClick={sendTestNotification}
-              isDisabled={isLoading || status === 'running'}
-            >
-              <BellIcon />
-            </Button>
-          </Tooltip>
-          {template.summary_fields.user_capabilities.edit ? (
-            <Tooltip
-              content={i18n._(t`Edit Notification Template`)}
-              position="top"
-            >
-              <Button
-                aria-label={i18n._(t`Edit Notification Template`)}
-                variant="plain"
-                component={Link}
-                to={`/notification_templates/${template.id}/edit`}
-              >
-                <PencilAltIcon />
-              </Button>
-            </Tooltip>
-          ) : (
-            <div />
-          )}
-          {template.summary_fields.user_capabilities.copy && (
-            <Tooltip content={i18n._(t`Copy Notification Template`)}>
-              <CopyButton
-                copyItem={copyTemplate}
-                isCopyDisabled={isCopyDisabled}
-                onCopyStart={handleCopyStart}
-                onCopyFinish={handleCopyFinish}
-                errorMessage={i18n._(t`Failed to copy template.`)}
-              />
-            </Tooltip>
-          )}
-        </DataListAction>
-      </DataListItemRow>
-    </DataListItem>
+          <Button
+            aria-label={i18n._(t`Edit Notification Template`)}
+            variant="plain"
+            component={Link}
+            to={`/notification_templates/${template.id}/edit`}
+          >
+            <PencilAltIcon />
+          </Button>
+        </ActionItem>
+        <ActionItem
+          visible={template.summary_fields.user_capabilities.copy}
+          tooltip={i18n._(t`Copy Notification Template`)}
+        >
+          <CopyButton
+            copyItem={copyTemplate}
+            isCopyDisabled={isCopyDisabled}
+            onCopyStart={handleCopyStart}
+            onCopyFinish={handleCopyFinish}
+            errorMessage={i18n._(t`Failed to copy template.`)}
+          />
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
   );
 }
 
diff --git a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.test.jsx b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.test.jsx
index 65f959522c..2bdcde637f 100644
--- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.test.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.test.jsx
@@ -26,17 +26,21 @@ const template = {
 describe('<NotificationTemplateListItem />', () => {
   test('should render template row', () => {
     const wrapper = mountWithContexts(
-      <NotificationTemplateListItem
-        template={template}
-        detailUrl="/notification_templates/3/detail"
-      />
+      <table>
+        <tbody>
+          <NotificationTemplateListItem
+            template={template}
+            detailUrl="/notification_templates/3/detail"
+          />
+        </tbody>
+      </table>
     );
 
-    const cells = wrapper.find('DataListCell');
-    expect(cells).toHaveLength(3);
-    expect(cells.at(0).text()).toEqual('Test Notification');
-    expect(cells.at(1).text()).toEqual('Success');
-    expect(cells.at(2).text()).toEqual('Type: Slack');
+    const cells = wrapper.find('Td');
+    expect(cells).toHaveLength(5);
+    expect(cells.at(1).text()).toEqual('Test Notification');
+    expect(cells.at(2).text()).toEqual('Success');
+    expect(cells.at(3).text()).toEqual('Slack');
   });
 
   test('should send test notification', async () => {
@@ -45,10 +49,14 @@ describe('<NotificationTemplateListItem />', () => {
     });
 
     const wrapper = mountWithContexts(
-      <NotificationTemplateListItem
-        template={template}
-        detailUrl="/notification_templates/3/detail"
-      />
+      <table>
+        <tbody>
+          <NotificationTemplateListItem
+            template={template}
+            detailUrl="/notification_templates/3/detail"
+          />
+        </tbody>
+      </table>
     );
     await act(async () => {
       wrapper
@@ -59,8 +67,8 @@ describe('<NotificationTemplateListItem />', () => {
     expect(NotificationTemplatesAPI.test).toHaveBeenCalledTimes(1);
     expect(
       wrapper
-        .find('DataListCell')
-        .at(1)
+        .find('Td')
+        .at(2)
         .text()
     ).toEqual('Running');
   });
@@ -69,10 +77,14 @@ describe('<NotificationTemplateListItem />', () => {
     NotificationTemplatesAPI.copy.mockResolvedValue();
 
     const wrapper = mountWithContexts(
-      <NotificationTemplateListItem
-        template={template}
-        detailUrl="/notification_templates/3/detail"
-      />
+      <table>
+        <tbody>
+          <NotificationTemplateListItem
+            template={template}
+            detailUrl="/notification_templates/3/detail"
+          />
+        </tbody>
+      </table>
     );
 
     await act(async () =>
@@ -86,10 +98,14 @@ describe('<NotificationTemplateListItem />', () => {
     NotificationTemplatesAPI.copy.mockRejectedValue(new Error());
 
     const wrapper = mountWithContexts(
-      <NotificationTemplateListItem
-        template={template}
-        detailUrl="/notification_templates/3/detail"
-      />
+      <table>
+        <tbody>
+          <NotificationTemplateListItem
+            template={template}
+            detailUrl="/notification_templates/3/detail"
+          />
+        </tbody>
+      </table>
     );
     await act(async () =>
       wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
@@ -101,18 +117,22 @@ describe('<NotificationTemplateListItem />', () => {
 
   test('should not render copy button', async () => {
     const wrapper = mountWithContexts(
-      <NotificationTemplateListItem
-        template={{
-          ...template,
-          summary_fields: {
-            user_capabilities: {
-              copy: false,
-              edit: false,
-            },
-          },
-        }}
-        detailUrl="/notification_templates/3/detail"
-      />
+      <table>
+        <tbody>
+          <NotificationTemplateListItem
+            template={{
+              ...template,
+              summary_fields: {
+                user_capabilities: {
+                  copy: false,
+                  edit: false,
+                },
+              },
+            }}
+            detailUrl="/notification_templates/3/detail"
+          />
+        </tbody>
+      </table>
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });