diff --git a/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
new file mode 100644
index 0000000000..8fd0fef003
--- /dev/null
+++ b/awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { Thead, Tr, Th } from '@patternfly/react-table';
+import {
+ encodeNonDefaultQueryString,
+ parseQueryString,
+ replaceParams,
+} from '../../util/qs';
+
+export default function HeaderRow({
+ handleSelectAll,
+ isAllSelected,
+ qsConfig,
+ defaultSortKey,
+ children,
+}) {
+ const location = useLocation();
+ const history = useHistory();
+
+ const params = parseQueryString(qsConfig, location.search);
+
+ // TODO: asc vs desc -- correct for both alpha & numeric sorting?
+ const onSort = (key, order) => {
+ console.log({ key, order });
+ const newParams = replaceParams(params, {
+ order_by: order === 'desc' ? key : `-${key}`,
+ page: null,
+ });
+ const encodedParams = encodeNonDefaultQueryString(qsConfig, newParams);
+ history.push(
+ encodedParams
+ ? `${location.pathname}?${encodedParams}`
+ : location.pathname
+ );
+ };
+
+ const sortKey = params.order_by?.replace('-', '');
+ const sortBy = {
+ index: sortKey || defaultSortKey,
+ direction: params.order_by?.startsWith('-') ? 'asc' : 'desc',
+ };
+
+ return (
+
+
+ |
+ {React.Children.map(children, child =>
+ React.cloneElement(child, {
+ onSort,
+ sortBy,
+ columnIndex: child.props.sortKey,
+ })
+ )}
+
+
+ );
+}
+
+export function HeaderCell({ sortKey, onSort, sortBy, columnIndex, children }) {
+ const sort = sortKey
+ ? {
+ onSort: (event, key, order) => onSort(sortKey, order),
+ sortBy,
+ columnIndex,
+ }
+ : null;
+ return
{children} | ;
+}
diff --git a/awx/ui_next/src/components/PaginatedTable/index.js b/awx/ui_next/src/components/PaginatedTable/index.js
index 3604417d95..c588cf47eb 100644
--- a/awx/ui_next/src/components/PaginatedTable/index.js
+++ b/awx/ui_next/src/components/PaginatedTable/index.js
@@ -1,5 +1,6 @@
export { default } from './PaginatedTable';
export { default as PaginatedTableRow } from './PaginatedTableRow';
export { default as ActionsTd } from './ActionsTd';
+export { default as HeaderRow, HeaderCell } from './HeaderRow';
// export { default as ToolbarDeleteButton } from './ToolbarDeleteButton';
// export { default as ToolbarAddButton } from './ToolbarAddButton';
diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
index 6ddfe41470..2f647be8fc 100644
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@@ -14,7 +14,10 @@ import {
ToolbarAddButton,
ToolbarDeleteButton,
} from '../../../components/PaginatedDataList';
-import PaginatedTable from '../../../components/PaginatedTable';
+import PaginatedTable, {
+ HeaderRow,
+ HeaderCell,
+} from '../../../components/PaginatedTable';
import { getQSConfig, parseQueryString } from '../../../util/qs';
import OrganizationListItem from './OrganizationListItem';
@@ -115,6 +118,10 @@ function OrganizationsList({ i18n }) {
}
};
+ const onSort = (e, index, direction) => {
+ console.log(index, direction);
+ };
+
return (
<>
@@ -125,7 +132,7 @@ function OrganizationsList({ i18n }) {
items={organizations}
itemCount={organizationCount}
pluralizedItemName={i18n._(t`Organizations`)}
- qsConfig={QS_CONFIG}
+ qsConfig={QS_CONFIG} // TODO: still used?
onRowClick={handleSelect}
toolbarSearchColumns={[
{
@@ -155,6 +162,20 @@ function OrganizationsList({ i18n }) {
toolbarSearchableKeys={searchableKeys}
toolbarRelatedSearchableKeys={relatedSearchableKeys}
headerRow={
+ // TODO: move selectAll logic into HeaderRow?
+
+ {i18n._(t`Name`)}
+ {i18n._(t`Members`)}
+ {i18n._(t`Teams`)}
+
+ }
+ _headerRow={
+ // TODO: move sorting into w/ friendly API
|
- {i18n._(t`Name`)} |
- {i18n._(t`Members`)} |
- {i18n._(t`Teams`)} |
+
+ {i18n._(t`Name`)}
+ |
+
+ {i18n._(t`Members`)}
+ |
+
+ {i18n._(t`Teams`)}
+ |
}