[arvados-workbench2] created: 2.5.0-65-g1d402d5f

git repository hosting git at public.arvados.org
Wed Feb 22 22:04:28 UTC 2023


        at  1d402d5f65011e082eb9332118c4dbfe4377952f (commit)


commit 1d402d5f65011e082eb9332118c4dbfe4377952f
Author: Stephen Smith <stephen at curii.com>
Date:   Wed Feb 22 16:57:33 2023 -0500

    19988: Add resource type param to DataColumn to enable type-checked arbitrary field sorting
    
    * Resource type used when defining dataExplorer columns will be used to constrain sort.field to keyof the type
    * Removed sorting from favorites and public favorites since it was not implemented
    
    Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>

diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx
index 2323987b..0eb1323a 100644
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -12,8 +12,8 @@ import { DataColumns } from '../data-table/data-table';
 import { ArvadosTheme } from "common/custom-theme";
 
 interface ColumnSelectorDataProps {
-    columns: DataColumns<any>;
-    onColumnToggle: (column: DataColumn<any>) => void;
+    columns: DataColumns<any, any>;
+    onColumnToggle: (column: DataColumn<any, any>) => void;
     className?: string;
 }
 
@@ -52,7 +52,7 @@ export const ColumnSelector = withStyles(styles)(
                                     color="primary"
                                     checked={column.selected}
                                     className={classes.checkbox} />
-                                <ListItemText 
+                                <ListItemText
                                     className={classes.listItemText}>
                                     {column.name}
                                 </ListItemText>
@@ -69,5 +69,3 @@ export const ColumnSelectorTrigger = (props: IconButtonProps) =>
             <MenuIcon aria-label="Select columns" />
         </IconButton>
     </Tooltip>;
-
-
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 0785f2e6..fcee0c54 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -63,7 +63,7 @@ interface DataExplorerDataProps<T> {
     fetchMode: DataTableFetchMode;
     items: T[];
     itemsAvailable: number;
-    columns: DataColumns<T>;
+    columns: DataColumns<T, any>;
     searchLabel?: string;
     searchValue: string;
     rowsPerPage: number;
@@ -86,14 +86,14 @@ interface DataExplorerDataProps<T> {
 }
 
 interface DataExplorerActionProps<T> {
-    onSetColumns: (columns: DataColumns<T>) => void;
+    onSetColumns: (columns: DataColumns<T, any>) => void;
     onSearch: (value: string) => void;
     onRowClick: (item: T) => void;
     onRowDoubleClick: (item: T) => void;
-    onColumnToggle: (column: DataColumn<T>) => void;
+    onColumnToggle: (column: DataColumn<T, any>) => void;
     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
-    onSortToggle: (column: DataColumn<T>) => void;
-    onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
+    onSortToggle: (column: DataColumn<T, any>) => void;
+    onFiltersChange: (filters: DataTableFilters, column: DataColumn<T, any>) => void;
     onChangePage: (page: number) => void;
     onChangeRowsPerPage: (rowsPerPage: number) => void;
     onLoadMore: (page: number) => void;
@@ -260,7 +260,7 @@ export const DataExplorer = withStyles(styles)(
                 </Tooltip>
             </Grid>
 
-        contextMenuColumn: DataColumn<any> = {
+        contextMenuColumn: DataColumn<any, any> = {
             name: "Actions",
             selected: true,
             configurable: false,
diff --git a/src/components/data-table/data-column.ts b/src/components/data-table/data-column.ts
index f32fea2b..35655fb7 100644
--- a/src/components/data-table/data-column.ts
+++ b/src/components/data-table/data-column.ts
@@ -6,7 +6,12 @@ import React from "react";
 import { DataTableFilters } from "../data-table-filters/data-table-filters-tree";
 import { createTree } from 'models/tree';
 
-export interface DataColumn<T> {
+/**
+ *
+ * @template I Type of dataexplorer item reference
+ * @template R Type of resource to use to restrict values of column sort.field
+ */
+export interface DataColumn<I, R> {
     key?: React.Key;
     name: string;
     selected: boolean;
@@ -17,9 +22,9 @@ export interface DataColumn<T> {
      * radio group and only one filter can be selected at a time.
      */
     mutuallyExclusiveFilters?: boolean;
-    sortDirection?: SortDirection;
+    sort?: {direction: SortDirection, field: keyof R};
     filters: DataTableFilters;
-    render: (item: T) => React.ReactElement<any>;
+    render: (item: I) => React.ReactElement<any>;
     renderHeader?: () => React.ReactElement<any>;
 }
 
@@ -29,24 +34,23 @@ export enum SortDirection {
     NONE = "none"
 }
 
-export const toggleSortDirection = <T>(column: DataColumn<T>): DataColumn<T> => {
-    return column.sortDirection
-        ? column.sortDirection === SortDirection.ASC
-            ? { ...column, sortDirection: SortDirection.DESC }
-            : { ...column, sortDirection: SortDirection.ASC }
+export const toggleSortDirection = <I, R>(column: DataColumn<I, R>): DataColumn<I, R> => {
+    return column.sort
+        ? column.sort.direction === SortDirection.ASC
+            ? { ...column, sort: {...column.sort, direction: SortDirection.DESC} }
+            : { ...column, sort: {...column.sort, direction: SortDirection.ASC} }
         : column;
 };
 
-export const resetSortDirection = <T>(column: DataColumn<T>): DataColumn<T> => {
-    return column.sortDirection ? { ...column, sortDirection: SortDirection.NONE } : column;
+export const resetSortDirection = <I, R>(column: DataColumn<I, R>): DataColumn<I, R> => {
+    return column.sort ? { ...column, sort: {...column.sort, direction: SortDirection.NONE} } : column;
 };
 
-export const createDataColumn = <T>(dataColumn: Partial<DataColumn<T>>): DataColumn<T> => ({
+export const createDataColumn = <I, R>(dataColumn: Partial<DataColumn<I, R>>): DataColumn<I, R> => ({
     key: '',
     name: '',
     selected: true,
     configurable: true,
-    sortDirection: SortDirection.NONE,
     filters: createTree(),
     render: () => React.createElement('span'),
     ...dataColumn,
diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index b3b2f32e..4a82b660 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -14,22 +14,22 @@ import { IconType, PendingIcon } from 'components/icon/icon';
 import { SvgIconProps } from '@material-ui/core/SvgIcon';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 
-export type DataColumns<T> = Array<DataColumn<T>>;
+export type DataColumns<I, R> = Array<DataColumn<I, R>>;
 
 export enum DataTableFetchMode {
     PAGINATED,
     INFINITE
 }
 
-export interface DataTableDataProps<T> {
-    items: T[];
-    columns: DataColumns<T>;
-    onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
-    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
-    onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
-    onSortToggle: (column: DataColumn<T>) => void;
-    onFiltersChange: (filters: DataTableFilters, column: DataColumn<T>) => void;
-    extractKey?: (item: T) => React.Key;
+export interface DataTableDataProps<I> {
+    items: I[];
+    columns: DataColumns<I, any>;
+    onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: I) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: I) => void;
+    onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: I) => void;
+    onSortToggle: (column: DataColumn<I, any>) => void;
+    onFiltersChange: (filters: DataTableFilters, column: DataColumn<I, any>) => void;
+    extractKey?: (item: I) => React.Key;
     working?: boolean;
     defaultViewIcon?: IconType;
     defaultViewMessages?: string[];
@@ -63,7 +63,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         wordWrap: 'break-word',
         paddingRight: '24px',
         color: '#737373'
-       
+
     },
     tableCellWorkflows: {
         '&:nth-last-child(2)': {
@@ -113,7 +113,7 @@ export const DataTable = withStyles(styles)(
             </div>;
         }
 
-        renderNoItemsPlaceholder = (columns: DataColumns<T>) => {
+        renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
             const dirty = columns.some((column) => getTreeDirty('')(column.filters));
             return <DataTableDefaultView
                 icon={this.props.defaultViewIcon}
@@ -121,8 +121,8 @@ export const DataTable = withStyles(styles)(
                 filtersApplied={dirty} />;
         }
 
-        renderHeadCell = (column: DataColumn<T>, index: number) => {
-            const { name, key, renderHeader, filters, sortDirection } = column;
+        renderHeadCell = (column: DataColumn<T, any>, index: number) => {
+            const { name, key, renderHeader, filters, sort } = column;
             const { onSortToggle, onFiltersChange, classes } = this.props;
             return <TableCell className={classes.tableCell} key={key || index}>
                 {renderHeader ?
@@ -137,10 +137,10 @@ export const DataTable = withStyles(styles)(
                             filters={filters}>
                             {name}
                         </DataTableFiltersPopover>
-                        : sortDirection
+                        : sort
                             ? <TableSortLabel
-                                active={sortDirection !== SortDirection.NONE}
-                                direction={sortDirection !== SortDirection.NONE ? sortDirection : undefined}
+                                active={sort.direction !== SortDirection.NONE}
+                                direction={sort.direction !== SortDirection.NONE ? sort.direction : undefined}
                                 IconComponent={this.ArrowIcon}
                                 hideSortIcon
                                 onClick={() =>
@@ -176,7 +176,7 @@ export const DataTable = withStyles(styles)(
             </TableRow>;
         }
 
-        mapVisibleColumns = (fn: (column: DataColumn<T>, index: number) => React.ReactElement<any>) => {
+        mapVisibleColumns = (fn: (column: DataColumn<T, any>, index: number) => React.ReactElement<any>) => {
             return this.props.columns.filter(column => column.selected).map(fn);
         }
 
diff --git a/src/services/groups-service/groups-service.ts b/src/services/groups-service/groups-service.ts
index 025314eb..a36ddba8 100644
--- a/src/services/groups-service/groups-service.ts
+++ b/src/services/groups-service/groups-service.ts
@@ -66,7 +66,7 @@ async contents(uuid: string, args: ContentsArguments = {}, session?: Session, ca
     if (cancelToken) {
       cfg.cancelToken = cancelToken;
     }
-    
+
     const response = await CommonResourceService.defaultResponse(
       this.serverApi.get(this.resourceType + pathUrl, cfg),
       this.actions,
diff --git a/src/store/all-processes-panel/all-processes-panel-middleware-service.ts b/src/store/all-processes-panel/all-processes-panel-middleware-service.ts
index f50c99e7..fe9c8a9d 100644
--- a/src/store/all-processes-panel/all-processes-panel-middleware-service.ts
+++ b/src/store/all-processes-panel/all-processes-panel-middleware-service.ts
@@ -21,9 +21,8 @@ import {
 } from "../resource-type-filters/resource-type-filters";
 import { AllProcessesPanelColumnNames } from "views/all-processes-panel/all-processes-panel";
 import { OrderBuilder, OrderDirection } from "services/api/order-builder";
-import { ProcessResource } from "models/process";
 import { SortDirection } from "components/data-table/data-column";
-import { containerRequestFieldsNoMounts } from "models/container-request";
+import { containerRequestFieldsNoMounts, ContainerRequestResource } from "models/container-request";
 
 export class AllProcessesPanelMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -74,7 +73,7 @@ const getParams = ( dataExplorer: DataExplorer ) => ({
 });
 
 const getFilters = ( dataExplorer: DataExplorer ) => {
-    const columns = dataExplorer.columns as DataColumns<string>;
+    const columns = dataExplorer.columns as DataColumns<string, ContainerRequestResource>;
     const statusColumnFilters = getDataExplorerColumnFilters(columns, 'Status');
     const activeStatusFilter = Object.keys(statusColumnFilters).find(
         filterName => statusColumnFilters[filterName].selected
@@ -92,16 +91,15 @@ const getFilters = ( dataExplorer: DataExplorer ) => {
 };
 
 const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
-    const order = new OrderBuilder<ProcessResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    const sortColumn = getSortColumn<ContainerRequestResource>(dataExplorer);
+    const order = new OrderBuilder<ContainerRequestResource>();
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
 
-        const columnName = sortColumn && sortColumn.name === AllProcessesPanelColumnNames.NAME ? "name" : "createdAt";
         return order
-            .addOrder(sortDirection, columnName)
+            .addOrder(sortDirection, sortColumn.sort.field)
             .getOrder();
     } else {
         return order.getOrder();
diff --git a/src/store/api-client-authorizations/api-client-authorizations-middleware-service.ts b/src/store/api-client-authorizations/api-client-authorizations-middleware-service.ts
index d67dcbad..b919bff7 100644
--- a/src/store/api-client-authorizations/api-client-authorizations-middleware-service.ts
+++ b/src/store/api-client-authorizations/api-client-authorizations-middleware-service.ts
@@ -14,7 +14,6 @@ import { apiClientAuthorizationsActions } from 'store/api-client-authorizations/
 import { OrderDirection, OrderBuilder } from 'services/api/order-builder';
 import { ListResults } from 'services/common-service/common-service';
 import { ApiClientAuthorization } from 'models/api-client-authorization';
-import { ApiClientAuthorizationPanelColumnNames } from 'views/api-client-authorization-panel/api-client-authorization-panel-root';
 import { SortDirection } from 'components/data-table/data-column';
 
 export class ApiClientAuthorizationMiddlewareService extends DataExplorerMiddlewareService {
@@ -41,16 +40,15 @@ export const getParams = (dataExplorer: DataExplorer) => ({
 });
 
 const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<ApiClientAuthorization>(dataExplorer);
     const order = new OrderBuilder<ApiClientAuthorization>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
 
-        const columnName = sortColumn && sortColumn.name === ApiClientAuthorizationPanelColumnNames.UUID ? "uuid" : "updatedAt";
         return order
-            .addOrder(sortDirection, columnName)
+            .addOrder(sortDirection, sortColumn.sort.field)
             .getOrder();
     } else {
         return order.getOrder();
diff --git a/src/store/collections-content-address-panel/collections-content-address-middleware-service.ts b/src/store/collections-content-address-panel/collections-content-address-middleware-service.ts
index 983b309a..390292a9 100644
--- a/src/store/collections-content-address-panel/collections-content-address-middleware-service.ts
+++ b/src/store/collections-content-address-panel/collections-content-address-middleware-service.ts
@@ -8,14 +8,12 @@ import { DataExplorerMiddlewareService } from 'store/data-explorer/data-explorer
 import { RootState } from 'store/store';
 import { getUserUuid } from "common/getuser";
 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
-import { getDataExplorer } from 'store/data-explorer/data-explorer-reducer';
+import { DataExplorer, getDataExplorer } from 'store/data-explorer/data-explorer-reducer';
 import { resourcesActions } from 'store/resources/resources-actions';
 import { FilterBuilder } from 'services/api/filter-builder';
 import { SortDirection } from 'components/data-table/data-column';
 import { OrderDirection, OrderBuilder } from 'services/api/order-builder';
 import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
-import { FavoritePanelColumnNames } from 'views/favorite-panel/favorite-panel';
-import { GroupContentsResource, GroupContentsResourcePrefix } from 'services/groups-service/groups-service';
 import { progressIndicatorActions } from 'store/progress-indicator/progress-indicator-actions';
 import { collectionsContentAddressActions } from './collections-content-address-panel-actions';
 import { navigateTo } from 'store/navigation/navigation-action';
@@ -25,6 +23,7 @@ import { setBreadcrumbs } from '../breadcrumbs/breadcrumbs-actions';
 import { ResourceKind, extractUuidKind } from 'models/resource';
 import { ownerNameActions } from 'store/owner-name/owner-name-actions';
 import { getUserDisplayName } from 'models/user';
+import { CollectionResource } from 'models/collection';
 
 export class CollectionsWithSameContentAddressMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -36,18 +35,6 @@ export class CollectionsWithSameContentAddressMiddlewareService extends DataExpl
         if (!dataExplorer) {
             api.dispatch(collectionPanelDataExplorerIsNotSet());
         } else {
-            const sortColumn = getSortColumn(dataExplorer);
-
-            const contentOrder = new OrderBuilder<GroupContentsResource>();
-
-            if (sortColumn && sortColumn.name === FavoritePanelColumnNames.NAME) {
-                const direction = sortColumn.sortDirection === SortDirection.ASC
-                    ? OrderDirection.ASC
-                    : OrderDirection.DESC;
-
-                contentOrder
-                    .addOrder(direction, "name", GroupContentsResourcePrefix.COLLECTION);
-            }
             try {
                 api.dispatch(progressIndicatorActions.START_WORKING(this.getId()));
                 const userUuid = getUserUuid(api.getState());
@@ -60,7 +47,8 @@ export class CollectionsWithSameContentAddressMiddlewareService extends DataExpl
                         .addEqual('portable_data_hash', contentAddress)
                         .addILike("name", dataExplorer.searchValue)
                         .getFilters(),
-                    includeOldVersions: true
+                    includeOldVersions: true,
+                    order: getOrder(dataExplorer)
                 });
                 const userUuids = response.items.map(it => {
                     if (extractUuidKind(it.ownerUuid) === ResourceKind.USER) {
@@ -130,6 +118,22 @@ export class CollectionsWithSameContentAddressMiddlewareService extends DataExpl
     }
 }
 
+const getOrder = (dataExplorer: DataExplorer) => {
+    const sortColumn = getSortColumn<CollectionResource>(dataExplorer);
+    const order = new OrderBuilder<CollectionResource>();
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
+            ? OrderDirection.ASC
+            : OrderDirection.DESC;
+
+        return order
+            .addOrder(sortDirection, sortColumn.sort.field)
+            .getOrder();
+    } else {
+        return order.getOrder();
+    }
+};
+
 const collectionPanelDataExplorerIsNotSet = () =>
     snackbarActions.OPEN_SNACKBAR({
         message: 'Collection panel is not ready.',
diff --git a/src/store/data-explorer/data-explorer-action.ts b/src/store/data-explorer/data-explorer-action.ts
index 7ee3962c..22b786fd 100644
--- a/src/store/data-explorer/data-explorer-action.ts
+++ b/src/store/data-explorer/data-explorer-action.ts
@@ -18,7 +18,7 @@ export const dataExplorerActions = unionize({
     REQUEST_ITEMS: ofType<{ id: string, criteriaChanged?: boolean }>(),
     REQUEST_STATE: ofType<{ id: string, criteriaChanged?: boolean }>(),
     SET_FETCH_MODE: ofType<({ id: string, fetchMode: DataTableFetchMode })>(),
-    SET_COLUMNS: ofType<{ id: string, columns: DataColumns<any> }>(),
+    SET_COLUMNS: ofType<{ id: string, columns: DataColumns<any, any> }>(),
     SET_FILTERS: ofType<{ id: string, columnName: string, filters: DataTableFilters }>(),
     SET_ITEMS: ofType<{ id: string, items: any[], page: number, rowsPerPage: number, itemsAvailable: number }>(),
     APPEND_ITEMS: ofType<{ id: string, items: any[], page: number, rowsPerPage: number, itemsAvailable: number }>(),
@@ -42,7 +42,7 @@ export const bindDataExplorerActions = (id: string) => ({
         dataExplorerActions.REQUEST_ITEMS({ id, criteriaChanged }),
     SET_FETCH_MODE: (payload: { fetchMode: DataTableFetchMode }) =>
         dataExplorerActions.SET_FETCH_MODE({ ...payload, id }),
-    SET_COLUMNS: (payload: { columns: DataColumns<any> }) =>
+    SET_COLUMNS: (payload: { columns: DataColumns<any, any> }) =>
         dataExplorerActions.SET_COLUMNS({ ...payload, id }),
     SET_FILTERS: (payload: { columnName: string, filters: DataTableFilters }) =>
         dataExplorerActions.SET_FILTERS({ ...payload, id }),
diff --git a/src/store/data-explorer/data-explorer-middleware-service.ts b/src/store/data-explorer/data-explorer-middleware-service.ts
index f5f24495..347c7331 100644
--- a/src/store/data-explorer/data-explorer-middleware-service.ts
+++ b/src/store/data-explorer/data-explorer-middleware-service.ts
@@ -22,7 +22,7 @@ export abstract class DataExplorerMiddlewareService {
     }
 
     public getColumnFilters<T>(
-        columns: DataColumns<T>,
+        columns: DataColumns<T, any>,
         columnName: string
     ): DataTableFilters {
         return getDataExplorerColumnFilters(columns, columnName);
@@ -35,7 +35,7 @@ export abstract class DataExplorerMiddlewareService {
 }
 
 export const getDataExplorerColumnFilters = <T>(
-    columns: DataColumns<T>,
+    columns: DataColumns<T, any>,
     columnName: string
 ): DataTableFilters => {
     const column = columns.find((c) => c.name === columnName);
diff --git a/src/store/data-explorer/data-explorer-middleware.test.ts b/src/store/data-explorer/data-explorer-middleware.test.ts
index ef6cfe42..8bb10f0c 100644
--- a/src/store/data-explorer/data-explorer-middleware.test.ts
+++ b/src/store/data-explorer/data-explorer-middleware.test.ts
@@ -201,7 +201,7 @@ describe("DataExplorerMiddleware", () => {
 class ServiceMock extends DataExplorerMiddlewareService {
     constructor(private config: {
         id: string,
-        columns: DataColumns<any>,
+        columns: DataColumns<any, any>,
         requestItems: (api: MiddlewareAPI) => Promise<void>
     }) {
         super(config.id);
diff --git a/src/store/data-explorer/data-explorer-reducer.ts b/src/store/data-explorer/data-explorer-reducer.ts
index 68f80b3c..e93d291d 100644
--- a/src/store/data-explorer/data-explorer-reducer.ts
+++ b/src/store/data-explorer/data-explorer-reducer.ts
@@ -21,7 +21,7 @@ import { DataTableFilters } from 'components/data-table-filters/data-table-filte
 
 export interface DataExplorer {
     fetchMode: DataTableFetchMode;
-    columns: DataColumns<any>;
+    columns: DataColumns<any, any>;
     items: any[];
     itemsAvailable: number;
     page: number;
@@ -117,9 +117,9 @@ export const getDataExplorer = (state: DataExplorerState, id: string) => {
     return returnValue;
 };
 
-export const getSortColumn = (dataExplorer: DataExplorer) =>
+export const getSortColumn = <R>(dataExplorer: DataExplorer): DataColumn<any, R> | undefined =>
     dataExplorer.columns.find(
-        (c: any) => !!c.sortDirection && c.sortDirection !== SortDirection.NONE
+        (c: DataColumn<any, R>) => !!c.sort && c.sort.direction !== SortDirection.NONE
     );
 
 const update = (
@@ -129,8 +129,8 @@ const update = (
 ) => ({ ...state, [id]: updateFn(getDataExplorer(state, id)) });
 
 const canUpdateColumns = (
-    prevColumns: DataColumns<any>,
-    nextColumns: DataColumns<any>
+    prevColumns: DataColumns<any, any>,
+    nextColumns: DataColumns<any, any>
 ) => {
     if (prevColumns.length !== nextColumns.length) {
         return true;
@@ -146,7 +146,7 @@ const canUpdateColumns = (
 };
 
 const setColumns =
-    (columns: DataColumns<any>) => (dataExplorer: DataExplorer) => ({
+    (columns: DataColumns<any, any>) => (dataExplorer: DataExplorer) => ({
         ...dataExplorer,
         columns: canUpdateColumns(dataExplorer.columns, columns)
             ? columns
@@ -154,23 +154,23 @@ const setColumns =
     });
 
 const mapColumns =
-    (mapFn: (column: DataColumn<any>) => DataColumn<any>) =>
+    (mapFn: (column: DataColumn<any, any>) => DataColumn<any, any>) =>
         (dataExplorer: DataExplorer) => ({
             ...dataExplorer,
             columns: dataExplorer.columns.map(mapFn),
         });
 
-const toggleSort = (columnName: string) => (column: DataColumn<any>) =>
+const toggleSort = (columnName: string) => (column: DataColumn<any, any>) =>
     column.name === columnName
         ? toggleSortDirection(column)
         : resetSortDirection(column);
 
-const toggleColumn = (columnName: string) => (column: DataColumn<any>) =>
+const toggleColumn = (columnName: string) => (column: DataColumn<any, any>) =>
     column.name === columnName
         ? { ...column, selected: !column.selected }
         : column;
 
 const setFilters =
     (columnName: string, filters: DataTableFilters) =>
-        (column: DataColumn<any>) =>
+        (column: DataColumn<any, any>) =>
             column.name === columnName ? { ...column, filters } : column;
diff --git a/src/store/favorite-panel/favorite-panel-middleware-service.ts b/src/store/favorite-panel/favorite-panel-middleware-service.ts
index f88f7b91..0229834c 100644
--- a/src/store/favorite-panel/favorite-panel-middleware-service.ts
+++ b/src/store/favorite-panel/favorite-panel-middleware-service.ts
@@ -8,24 +8,20 @@ import { RootState } from "../store";
 import { getUserUuid } from "common/getuser";
 import { DataColumns } from "components/data-table/data-table";
 import { ServiceRepository } from "services/services";
-import { SortDirection } from "components/data-table/data-column";
 import { FilterBuilder } from "services/api/filter-builder";
 import { updateFavorites } from "../favorites/favorites-actions";
 import { favoritePanelActions } from "./favorite-panel-action";
 import { Dispatch, MiddlewareAPI } from "redux";
-import { OrderBuilder, OrderDirection } from "services/api/order-builder";
-import { LinkResource } from "models/link";
-import { GroupContentsResource, GroupContentsResourcePrefix } from "services/groups-service/groups-service";
 import { resourcesActions } from "store/resources/resources-actions";
 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
 import { progressIndicatorActions } from 'store/progress-indicator/progress-indicator-actions';
 import { getDataExplorer } from "store/data-explorer/data-explorer-reducer";
 import { loadMissingProcessesInformation } from "store/project-panel/project-panel-middleware-service";
-import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { getDataExplorerColumnFilters } from 'store/data-explorer/data-explorer-middleware-service';
 import { serializeSimpleObjectTypeFilters } from '../resource-type-filters/resource-type-filters';
 import { ResourceKind } from "models/resource";
 import { LinkClass } from "models/link";
+import { GroupContentsResource } from "services/groups-service/groups-service";
 
 export class FavoritePanelMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -37,25 +33,9 @@ export class FavoritePanelMiddlewareService extends DataExplorerMiddlewareServic
         if (!dataExplorer) {
             api.dispatch(favoritesPanelDataExplorerIsNotSet());
         } else {
-            const columns = dataExplorer.columns as DataColumns<string>;
-            const sortColumn = getSortColumn(dataExplorer);
+            const columns = dataExplorer.columns as DataColumns<string, GroupContentsResource>;
             const typeFilters = serializeSimpleObjectTypeFilters(getDataExplorerColumnFilters(columns, FavoritePanelColumnNames.TYPE));
 
-
-            const linkOrder = new OrderBuilder<LinkResource>();
-            const contentOrder = new OrderBuilder<GroupContentsResource>();
-
-            if (sortColumn && sortColumn.name === FavoritePanelColumnNames.NAME) {
-                const direction = sortColumn.sortDirection === SortDirection.ASC
-                    ? OrderDirection.ASC
-                    : OrderDirection.DESC;
-
-                linkOrder.addOrder(direction, "name");
-                contentOrder
-                    .addOrder(direction, "name", GroupContentsResourcePrefix.COLLECTION)
-                    .addOrder(direction, "name", GroupContentsResourcePrefix.PROCESS)
-                    .addOrder(direction, "name", GroupContentsResourcePrefix.PROJECT);
-            }
             try {
                 api.dispatch(progressIndicatorActions.START_WORKING(this.getId()));
                 const responseLinks = await this.services.linkService.list({
diff --git a/src/store/groups-panel/groups-panel-middleware-service.ts b/src/store/groups-panel/groups-panel-middleware-service.ts
index 3997e33c..7d7803f5 100644
--- a/src/store/groups-panel/groups-panel-middleware-service.ts
+++ b/src/store/groups-panel/groups-panel-middleware-service.ts
@@ -14,7 +14,6 @@ import { updateResources } from 'store/resources/resources-actions';
 import { OrderBuilder, OrderDirection } from 'services/api/order-builder';
 import { GroupResource, GroupClass } from 'models/group';
 import { SortDirection } from 'components/data-table/data-column';
-import { GroupsPanelColumnNames } from 'views/groups-panel/groups-panel';
 import { progressIndicatorActions } from "store/progress-indicator/progress-indicator-actions";
 
 export class GroupsPanelMiddlewareService extends DataExplorerMiddlewareService {
@@ -28,14 +27,14 @@ export class GroupsPanelMiddlewareService extends DataExplorerMiddlewareService
         } else {
             try {
                 api.dispatch(progressIndicatorActions.START_WORKING(this.getId()));
+                const sortColumn = getSortColumn<GroupResource>(dataExplorer);
                 const order = new OrderBuilder<GroupResource>();
-                const sortColumn = getSortColumn(dataExplorer);
-                if (sortColumn) {
+                if (sortColumn && sortColumn.sort) {
                     const direction =
-                        sortColumn.sortDirection === SortDirection.ASC && sortColumn.name === GroupsPanelColumnNames.GROUP
+                        sortColumn.sort.direction === SortDirection.ASC
                             ? OrderDirection.ASC
                             : OrderDirection.DESC;
-                    order.addOrder(direction, 'name');
+                    order.addOrder(direction, sortColumn.sort.field);
                 }
                 const filters = new FilterBuilder()
                     .addEqual('group_class', GroupClass.ROLE)
diff --git a/src/store/link-panel/link-panel-middleware-service.ts b/src/store/link-panel/link-panel-middleware-service.ts
index da849a59..cce313fb 100644
--- a/src/store/link-panel/link-panel-middleware-service.ts
+++ b/src/store/link-panel/link-panel-middleware-service.ts
@@ -15,7 +15,6 @@ import { ListResults } from 'services/common-service/common-service';
 import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { LinkResource } from 'models/link';
 import { linkPanelActions } from 'store/link-panel/link-panel-actions';
-import { LinkPanelColumnNames } from 'views/link-panel/link-panel-root';
 
 export class LinkMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -41,16 +40,15 @@ export const getParams = (dataExplorer: DataExplorer) => ({
 });
 
 const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<LinkResource>(dataExplorer);
     const order = new OrderBuilder<LinkResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
 
-        const columnName = sortColumn && sortColumn.name === LinkPanelColumnNames.NAME ? "name" : "modifiedAt";
         return order
-            .addOrder(sortDirection, columnName)
+            .addOrder(sortDirection, sortColumn.sort.field)
             .getOrder();
     } else {
         return order.getOrder();
diff --git a/src/store/project-panel/project-panel-middleware-service.ts b/src/store/project-panel/project-panel-middleware-service.ts
index d8a5d82d..72c5f811 100644
--- a/src/store/project-panel/project-panel-middleware-service.ts
+++ b/src/store/project-panel/project-panel-middleware-service.ts
@@ -109,7 +109,7 @@ export const getParams = (dataExplorer: DataExplorer, isProjectTrashed: boolean)
 });
 
 export const getFilters = (dataExplorer: DataExplorer) => {
-    const columns = dataExplorer.columns as DataColumns<string>;
+    const columns = dataExplorer.columns as DataColumns<string, ProjectResource>;
     const typeFilters = serializeResourceTypeFilters(getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.TYPE));
     const statusColumnFilters = getDataExplorerColumnFilters(columns, 'Status');
     const activeStatusFilter = Object.keys(statusColumnFilters).find(
@@ -137,18 +137,17 @@ export const getFilters = (dataExplorer: DataExplorer) => {
 };
 
 export const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<ProjectResource>(dataExplorer);
     const order = new OrderBuilder<ProjectResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
 
-        const columnName = sortColumn && sortColumn.name === ProjectPanelColumnNames.NAME ? "name" : "createdAt";
         return order
-            .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.COLLECTION)
-            .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.PROCESS)
-            .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.PROJECT)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.COLLECTION)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.PROCESS)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.PROJECT)
             .getOrder();
     } else {
         return order.getOrder();
diff --git a/src/store/public-favorites-panel/public-favorites-middleware-service.ts b/src/store/public-favorites-panel/public-favorites-middleware-service.ts
index dd21a380..48d27be5 100644
--- a/src/store/public-favorites-panel/public-favorites-middleware-service.ts
+++ b/src/store/public-favorites-panel/public-favorites-middleware-service.ts
@@ -10,17 +10,14 @@ import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
 import { getDataExplorer } from 'store/data-explorer/data-explorer-reducer';
 import { resourcesActions } from 'store/resources/resources-actions';
 import { FilterBuilder } from 'services/api/filter-builder';
-import { SortDirection } from 'components/data-table/data-column';
-import { OrderDirection, OrderBuilder } from 'services/api/order-builder';
-import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { FavoritePanelColumnNames } from 'views/favorite-panel/favorite-panel';
 import { publicFavoritePanelActions } from 'store/public-favorites-panel/public-favorites-action';
 import { DataColumns } from 'components/data-table/data-table';
 import { serializeSimpleObjectTypeFilters } from '../resource-type-filters/resource-type-filters';
-import { LinkResource, LinkClass } from 'models/link';
-import { GroupContentsResource, GroupContentsResourcePrefix } from 'services/groups-service/groups-service';
+import { LinkClass } from 'models/link';
 import { progressIndicatorActions } from 'store/progress-indicator/progress-indicator-actions';
 import { updatePublicFavorites } from 'store/public-favorites/public-favorites-actions';
+import { GroupContentsResource } from 'services/groups-service/groups-service';
 
 export class PublicFavoritesMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -32,25 +29,9 @@ export class PublicFavoritesMiddlewareService extends DataExplorerMiddlewareServ
         if (!dataExplorer) {
             api.dispatch(favoritesPanelDataExplorerIsNotSet());
         } else {
-            const columns = dataExplorer.columns as DataColumns<string>;
-            const sortColumn = getSortColumn(dataExplorer);
+            const columns = dataExplorer.columns as DataColumns<string, GroupContentsResource>;
             const typeFilters = serializeSimpleObjectTypeFilters(getDataExplorerColumnFilters(columns, FavoritePanelColumnNames.TYPE));
 
-
-            const linkOrder = new OrderBuilder<LinkResource>();
-            const contentOrder = new OrderBuilder<GroupContentsResource>();
-
-            if (sortColumn && sortColumn.name === FavoritePanelColumnNames.NAME) {
-                const direction = sortColumn.sortDirection === SortDirection.ASC
-                    ? OrderDirection.ASC
-                    : OrderDirection.DESC;
-
-                linkOrder.addOrder(direction, "name");
-                contentOrder
-                    .addOrder(direction, "name", GroupContentsResourcePrefix.COLLECTION)
-                    .addOrder(direction, "name", GroupContentsResourcePrefix.PROCESS)
-                    .addOrder(direction, "name", GroupContentsResourcePrefix.PROJECT);
-            }
             try {
                 api.dispatch(progressIndicatorActions.START_WORKING(this.getId()));
                 const uuidPrefix = api.getState().auth.config.uuidPrefix;
diff --git a/src/store/search-results-panel/search-results-middleware-service.ts b/src/store/search-results-panel/search-results-middleware-service.ts
index 4035e148..c13092d4 100644
--- a/src/store/search-results-panel/search-results-middleware-service.ts
+++ b/src/store/search-results-panel/search-results-middleware-service.ts
@@ -24,7 +24,7 @@ import { FilterBuilder, joinFilters } from 'services/api/filter-builder';
 import { DataColumns } from 'components/data-table/data-table';
 import { serializeResourceTypeFilters } from 'store//resource-type-filters/resource-type-filters';
 import { ProjectPanelColumnNames } from 'views/project-panel/project-panel';
-import { Resource, ResourceKind } from 'models/resource';
+import { ResourceKind } from 'models/resource';
 import { ContainerRequestResource } from 'models/container-request';
 
 export class SearchResultsMiddlewareService extends DataExplorerMiddlewareService {
@@ -81,7 +81,7 @@ export class SearchResultsMiddlewareService extends DataExplorerMiddlewareServic
     }
 }
 
-const typeFilters = (columns: DataColumns<string>) => serializeResourceTypeFilters(getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.TYPE));
+const typeFilters = (columns: DataColumns<string, GroupContentsResource>) => serializeResourceTypeFilters(getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.TYPE));
 
 export const getParams = (dataExplorer: DataExplorer, query: string, apiRevision: number) => ({
     ...dataExplorerToListParams(dataExplorer),
@@ -95,17 +95,17 @@ export const getParams = (dataExplorer: DataExplorer, query: string, apiRevision
 });
 
 const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<GroupContentsResource>(dataExplorer);
     const order = new OrderBuilder<GroupContentsResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
 
         return order
-            .addOrder(sortDirection, sortColumn.name as keyof Resource, GroupContentsResourcePrefix.COLLECTION)
-            .addOrder(sortDirection, sortColumn.name as keyof Resource, GroupContentsResourcePrefix.PROCESS)
-            .addOrder(sortDirection, sortColumn.name as keyof Resource, GroupContentsResourcePrefix.PROJECT)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.COLLECTION)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.PROCESS)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.PROJECT)
             .getOrder();
     } else {
         return order.getOrder();
diff --git a/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts b/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts
index 5f92637c..2f84fdc8 100644
--- a/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts
+++ b/src/store/shared-with-me-panel/shared-with-me-middleware-service.ts
@@ -17,7 +17,6 @@ import { GroupContentsResource, GroupContentsResourcePrefix } from 'services/gro
 import { SortDirection } from 'components/data-table/data-column';
 import { OrderBuilder, OrderDirection } from 'services/api/order-builder';
 import { ProjectResource } from 'models/project';
-import { ProjectPanelColumnNames } from 'views/project-panel/project-panel';
 import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { updatePublicFavorites } from 'store/public-favorites/public-favorites-actions';
 import { FilterBuilder } from 'services/api/filter-builder';
@@ -59,24 +58,18 @@ export const getParams = (dataExplorer: DataExplorer) => ({
 });
 
 export const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<ProjectResource>(dataExplorer);
     const order = new OrderBuilder<ProjectResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
-        const columnName = sortColumn && sortColumn.name === ProjectPanelColumnNames.NAME ? "name" : "createdAt";
-        if (columnName === 'name') {
-            return order
-                .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.COLLECTION)
-                .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.PROCESS)
-                .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.PROJECT)
-                .getOrder();
-        } else {
-            return order
-                .addOrder(sortDirection, columnName)
-                .getOrder();
-        }
+
+        return order
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.COLLECTION)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.PROCESS)
+            .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.PROJECT)
+            .getOrder();
     } else {
         return order.getOrder();
     }
diff --git a/src/store/subprocess-panel/subprocess-panel-middleware-service.ts b/src/store/subprocess-panel/subprocess-panel-middleware-service.ts
index c6223627..283f04f8 100644
--- a/src/store/subprocess-panel/subprocess-panel-middleware-service.ts
+++ b/src/store/subprocess-panel/subprocess-panel-middleware-service.ts
@@ -16,7 +16,6 @@ import { OrderDirection, OrderBuilder } from 'services/api/order-builder';
 import { ListResults } from 'services/common-service/common-service';
 import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { ProcessResource } from 'models/process';
-import { SubprocessPanelColumnNames } from 'views/subprocess-panel/subprocess-panel-root';
 import { FilterBuilder, joinFilters } from 'services/api/filter-builder';
 import { subprocessPanelActions } from './subprocess-panel-actions';
 import { DataColumns } from 'components/data-table/data-table';
@@ -67,16 +66,15 @@ export const getParams = (
     });
 
 const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<ProcessResource>(dataExplorer);
     const order = new OrderBuilder<ProcessResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
 
-        const columnName = sortColumn && sortColumn.name === SubprocessPanelColumnNames.NAME ? "name" : "modifiedAt";
         return order
-            .addOrder(sortDirection, columnName)
+            .addOrder(sortDirection, sortColumn.sort.field)
             .getOrder();
     } else {
         return order.getOrder();
@@ -86,7 +84,7 @@ const getOrder = (dataExplorer: DataExplorer) => {
 export const getFilters = (
     dataExplorer: DataExplorer,
     parentContainerRequest: ContainerRequestResource) => {
-        const columns = dataExplorer.columns as DataColumns<string>;
+        const columns = dataExplorer.columns as DataColumns<string, ProcessResource>;
         const statusColumnFilters = getDataExplorerColumnFilters(columns, 'Status');
         const activeStatusFilter = Object.keys(statusColumnFilters).find(
             filterName => statusColumnFilters[filterName].selected
diff --git a/src/store/trash-panel/trash-panel-middleware-service.ts b/src/store/trash-panel/trash-panel-middleware-service.ts
index 0319f729..779963af 100644
--- a/src/store/trash-panel/trash-panel-middleware-service.ts
+++ b/src/store/trash-panel/trash-panel-middleware-service.ts
@@ -15,8 +15,7 @@ import { FilterBuilder } from "services/api/filter-builder";
 import { trashPanelActions } from "./trash-panel-action";
 import { Dispatch, MiddlewareAPI } from "redux";
 import { OrderBuilder, OrderDirection } from "services/api/order-builder";
-import { GroupContentsResourcePrefix } from "services/groups-service/groups-service";
-import { ProjectResource } from "models/project";
+import { GroupContentsResource, GroupContentsResourcePrefix } from "services/groups-service/groups-service";
 import { ProjectPanelColumnNames } from "views/project-panel/project-panel";
 import { updateFavorites } from "store/favorites/favorites-actions";
 import { updatePublicFavorites } from 'store/public-favorites/public-favorites-actions';
@@ -27,6 +26,7 @@ import { getSortColumn } from "store/data-explorer/data-explorer-reducer";
 import { serializeResourceTypeFilters } from 'store//resource-type-filters/resource-type-filters';
 import { getDataExplorerColumnFilters } from 'store/data-explorer/data-explorer-middleware-service';
 import { joinFilters } from 'services/api/filter-builder';
+import { CollectionResource } from "models/collection";
 
 export class TrashPanelMiddlewareService extends DataExplorerMiddlewareService {
     constructor(private services: ServiceRepository, id: string) {
@@ -35,8 +35,8 @@ export class TrashPanelMiddlewareService extends DataExplorerMiddlewareService {
 
     async requestItems(api: MiddlewareAPI<Dispatch, RootState>) {
         const dataExplorer = api.getState().dataExplorer[this.getId()];
-        const columns = dataExplorer.columns as DataColumns<string>;
-        const sortColumn = getSortColumn(dataExplorer);
+        const columns = dataExplorer.columns as DataColumns<string, CollectionResource>;
+        const sortColumn = getSortColumn<GroupContentsResource>(dataExplorer);
 
         const typeFilters = serializeResourceTypeFilters(getDataExplorerColumnFilters(columns, ProjectPanelColumnNames.TYPE));
 
@@ -52,17 +52,16 @@ export class TrashPanelMiddlewareService extends DataExplorerMiddlewareService {
             otherFilters,
         );
 
-        const order = new OrderBuilder<ProjectResource>();
+        const order = new OrderBuilder<GroupContentsResource>();
 
-        if (sortColumn) {
-            const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+        if (sortColumn && sortColumn.sort) {
+            const sortDirection = sortColumn.sort.direction === SortDirection.ASC
                 ? OrderDirection.ASC
                 : OrderDirection.DESC;
 
-            const columnName = sortColumn && sortColumn.name === ProjectPanelColumnNames.NAME ? "name" : "createdAt";
             order
-                .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.COLLECTION)
-                .addOrder(sortDirection, columnName, GroupContentsResourcePrefix.PROJECT);
+                .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.COLLECTION)
+                .addOrder(sortDirection, sortColumn.sort.field, GroupContentsResourcePrefix.PROJECT);
         }
 
         const userUuid = getUserUuid(api.getState());
diff --git a/src/store/users/user-panel-middleware-service.ts b/src/store/users/user-panel-middleware-service.ts
index c0589a60..b062401c 100644
--- a/src/store/users/user-panel-middleware-service.ts
+++ b/src/store/users/user-panel-middleware-service.ts
@@ -57,26 +57,18 @@ const getParams = (dataExplorer: DataExplorer) => ({
 });
 
 export const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<UserResource>(dataExplorer);
     const order = new OrderBuilder<UserResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
-        switch (sortColumn.name) {
-            case UserPanelColumnNames.NAME:
-                order.addOrder(sortDirection, "firstName")
-                    .addOrder(sortDirection, "lastName");
-                break;
-            case UserPanelColumnNames.UUID:
-                order.addOrder(sortDirection, "uuid");
-                break;
-            case UserPanelColumnNames.EMAIL:
-                order.addOrder(sortDirection, "email");
-                break;
-            case UserPanelColumnNames.USERNAME:
-                order.addOrder(sortDirection, "username");
-                break;
+
+        if (sortColumn.name === UserPanelColumnNames.NAME) {
+            order.addOrder(sortDirection, "firstName")
+                .addOrder(sortDirection, "lastName");
+        } else {
+            order.addOrder(sortDirection, sortColumn.sort.field);
         }
     }
     return order.getOrder();
diff --git a/src/store/workflow-panel/workflow-middleware-service.ts b/src/store/workflow-panel/workflow-middleware-service.ts
index d3a1d055..14c80fe1 100644
--- a/src/store/workflow-panel/workflow-middleware-service.ts
+++ b/src/store/workflow-panel/workflow-middleware-service.ts
@@ -11,7 +11,6 @@ import { DataExplorer, getDataExplorer } from 'store/data-explorer/data-explorer
 import { updateResources } from 'store/resources/resources-actions';
 import { FilterBuilder } from 'services/api/filter-builder';
 import { SortDirection } from 'components/data-table/data-column';
-import { WorkflowPanelColumnNames } from 'views/workflow-panel/workflow-panel-view';
 import { OrderDirection, OrderBuilder } from 'services/api/order-builder';
 import { WorkflowResource } from 'models/workflow';
 import { ListResults } from 'services/common-service/common-service';
@@ -50,15 +49,15 @@ export const getFilters = (dataExplorer: DataExplorer) => {
 };
 
 export const getOrder = (dataExplorer: DataExplorer) => {
-    const sortColumn = getSortColumn(dataExplorer);
+    const sortColumn = getSortColumn<WorkflowResource>(dataExplorer);
     const order = new OrderBuilder<WorkflowResource>();
-    if (sortColumn) {
-        const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+    if (sortColumn && sortColumn.sort) {
+        const sortDirection = sortColumn.sort.direction === SortDirection.ASC
             ? OrderDirection.ASC
             : OrderDirection.DESC;
-        const columnName = sortColumn && sortColumn.name === WorkflowPanelColumnNames.NAME ? "name" : "modifiedAt";
+
         return order
-            .addOrder(sortDirection, columnName)
+            .addOrder(sortDirection, sortColumn.sort.field)
             .getOrder();
     } else {
         return order.getOrder();
@@ -75,4 +74,4 @@ const couldNotFetchWorkflows = () =>
     snackbarActions.OPEN_SNACKBAR({
         message: 'Could not fetch workflows.',
         kind: SnackbarKind.ERROR
-    });
\ No newline at end of file
+    });
diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx
index 48046987..59c389ac 100644
--- a/src/views-components/data-explorer/data-explorer.tsx
+++ b/src/views-components/data-explorer/data-explorer.tsx
@@ -39,7 +39,7 @@ const mapStateToProps = (state: RootState, { id }: Props) => {
 
 const mapDispatchToProps = () => {
     return (dispatch: Dispatch, { id, onRowClick, onRowDoubleClick, onContextMenu }: Props) => ({
-        onSetColumns: (columns: DataColumns<any>) => {
+        onSetColumns: (columns: DataColumns<any, any>) => {
             dispatch(dataExplorerActions.SET_COLUMNS({ id, columns }));
         },
 
@@ -47,15 +47,15 @@ const mapDispatchToProps = () => {
             dispatch(dataExplorerActions.SET_EXPLORER_SEARCH_VALUE({ id, searchValue }));
         },
 
-        onColumnToggle: (column: DataColumn<any>) => {
+        onColumnToggle: (column: DataColumn<any, any>) => {
             dispatch(dataExplorerActions.TOGGLE_COLUMN({ id, columnName: column.name }));
         },
 
-        onSortToggle: (column: DataColumn<any>) => {
+        onSortToggle: (column: DataColumn<any, any>) => {
             dispatch(dataExplorerActions.TOGGLE_SORT({ id, columnName: column.name }));
         },
 
-        onFiltersChange: (filters: DataTableFilters, column: DataColumn<any>) => {
+        onFiltersChange: (filters: DataTableFilters, column: DataColumn<any, any>) => {
             dispatch(dataExplorerActions.SET_FILTERS({ id, columnName: column.name, filters }));
         },
 
@@ -80,4 +80,3 @@ const mapDispatchToProps = () => {
 };
 
 export const DataExplorer = connect(mapStateToProps, mapDispatchToProps)(DataExplorerComponent);
-
diff --git a/src/views/all-processes-panel/all-processes-panel.tsx b/src/views/all-processes-panel/all-processes-panel.tsx
index 0e08a879..4914da62 100644
--- a/src/views/all-processes-panel/all-processes-panel.tsx
+++ b/src/views/all-processes-panel/all-processes-panel.tsx
@@ -25,7 +25,7 @@ import { ProcessIcon } from 'components/icon/icon';
 import { openProcessContextMenu } from 'store/context-menu/context-menu-actions';
 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
 import { navigateTo } from 'store/navigation/navigation-action';
-import { ContainerRequestState } from "models/container-request";
+import { ContainerRequestResource, ContainerRequestState } from "models/container-request";
 import { RootState } from 'store/store';
 import { createTree } from 'models/tree';
 import { getInitialProcessStatusFilters, getInitialProcessTypeFilters } from 'store/resource-type-filters/resource-type-filters';
@@ -60,12 +60,12 @@ export interface AllProcessesPanelFilter extends DataTableFilterItem {
     type: ResourceKind | ContainerRequestState;
 }
 
-export const allProcessesPanelColumns: DataColumns<string> = [
+export const allProcessesPanelColumns: DataColumns<string, ContainerRequestResource> = [
     {
         name: AllProcessesPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
@@ -95,7 +95,7 @@ export const allProcessesPanelColumns: DataColumns<string> = [
         name: AllProcessesPanelColumnNames.CREATED_AT,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.DESC, field: "createdAt"},
         filters: createTree(),
         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
     },
diff --git a/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx b/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx
index ddca138c..3d415744 100644
--- a/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx
+++ b/src/views/api-client-authorization-panel/api-client-authorization-panel-root.tsx
@@ -18,6 +18,7 @@ import {
     CommonUuid, TokenApiClientId, TokenApiToken, TokenCreatedByIpAddress, TokenDefaultOwnerUuid, TokenExpiresAt,
     TokenLastUsedAt, TokenLastUsedByIpAddress, TokenScopes, TokenUserId
 } from 'views-components/data-explorer/renderers';
+import { ApiClientAuthorization } from 'models/api-client-authorization';
 
 type CssRules = 'root';
 
@@ -41,12 +42,12 @@ export enum ApiClientAuthorizationPanelColumnNames {
     USER_ID = 'User ID'
 }
 
-export const apiClientAuthorizationPanelColumns: DataColumns<string> = [
+export const apiClientAuthorizationPanelColumns: DataColumns<string, ApiClientAuthorization> = [
     {
         name: ApiClientAuthorizationPanelColumnNames.UUID,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "uuid"},
         filters: createTree(),
         render: uuid => <CommonUuid uuid={uuid} />
     },
diff --git a/src/views/collection-content-address-panel/collection-content-address-panel.tsx b/src/views/collection-content-address-panel/collection-content-address-panel.tsx
index 34d56084..ea23ce51 100644
--- a/src/views/collection-content-address-panel/collection-content-address-panel.tsx
+++ b/src/views/collection-content-address-panel/collection-content-address-panel.tsx
@@ -67,12 +67,12 @@ enum CollectionContentAddressPanelColumnNames {
     LAST_MODIFIED = "Last modified"
 }
 
-export const collectionContentAddressPanelColumns: DataColumns<string> = [
+export const collectionContentAddressPanelColumns: DataColumns<string, CollectionResource> = [
     {
         name: CollectionContentAddressPanelColumnNames.COLLECTION_WITH_THIS_ADDRESS,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "uuid"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
@@ -94,7 +94,7 @@ export const collectionContentAddressPanelColumns: DataColumns<string> = [
         name: CollectionContentAddressPanelColumnNames.LAST_MODIFIED,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.DESC, field: "modifiedAt"},
         filters: createTree(),
         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
     }
diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx
index cb02f1ad..a74da762 100644
--- a/src/views/favorite-panel/favorite-panel.tsx
+++ b/src/views/favorite-panel/favorite-panel.tsx
@@ -9,7 +9,6 @@ import { connect, DispatchProp } from 'react-redux';
 import { DataColumns } from 'components/data-table/data-table';
 import { RouteComponentProps } from 'react-router';
 import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
-import { SortDirection } from 'components/data-table/data-column';
 import { ResourceKind } from 'models/resource';
 import { ArvadosTheme } from 'common/custom-theme';
 import { FAVORITE_PANEL_ID } from "store/favorite-panel/favorite-panel-action";
@@ -68,12 +67,12 @@ export interface FavoritePanelFilter extends DataTableFilterItem {
     type: ResourceKind | ContainerRequestState;
 }
 
-export const favoritePanelColumns: DataColumns<string> = [
+export const favoritePanelColumns: DataColumns<string, GroupContentsResource> = [
     {
         name: FavoritePanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        // sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
@@ -109,7 +108,7 @@ export const favoritePanelColumns: DataColumns<string> = [
         name: FavoritePanelColumnNames.LAST_MODIFIED,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        // sort: {direction: SortDirection.DESC, field: "modifiedAt"},
         filters: createTree(),
         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
     }
diff --git a/src/views/group-details-panel/group-details-panel.tsx b/src/views/group-details-panel/group-details-panel.tsx
index 311bc86e..798a7b67 100644
--- a/src/views/group-details-panel/group-details-panel.tsx
+++ b/src/views/group-details-panel/group-details-panel.tsx
@@ -19,6 +19,7 @@ import { AddIcon, UserPanelIcon, KeyIcon } from 'components/icon/icon';
 import { getUserUuid } from 'common/getuser';
 import { GroupResource, isBuiltinGroup } from 'models/group';
 import { ArvadosTheme } from 'common/custom-theme';
+import { PermissionResource } from 'models/permission';
 
 type CssRules = "root" | "content";
 
@@ -51,7 +52,7 @@ export enum GroupDetailsPanelPermissionsColumnNames {
 const MEMBERS_DEFAULT_MESSAGE = 'Members list is empty.';
 const PERMISSIONS_DEFAULT_MESSAGE = 'Permissions list is empty.';
 
-export const groupDetailsMembersPanelColumns: DataColumns<string> = [
+export const groupDetailsMembersPanelColumns: DataColumns<string, PermissionResource> = [
     {
         name: GroupDetailsPanelMembersColumnNames.FULL_NAME,
         selected: true,
@@ -96,7 +97,7 @@ export const groupDetailsMembersPanelColumns: DataColumns<string> = [
     },
 ];
 
-export const groupDetailsPermissionsPanelColumns: DataColumns<string> = [
+export const groupDetailsPermissionsPanelColumns: DataColumns<string, PermissionResource> = [
     {
         name: GroupDetailsPanelPermissionsColumnNames.NAME,
         selected: true,
diff --git a/src/views/groups-panel/groups-panel.tsx b/src/views/groups-panel/groups-panel.tsx
index 3251c729..33acad50 100644
--- a/src/views/groups-panel/groups-panel.tsx
+++ b/src/views/groups-panel/groups-panel.tsx
@@ -37,12 +37,12 @@ export enum GroupsPanelColumnNames {
     MEMBERS = "Members",
 }
 
-export const groupsPanelColumns: DataColumns<string> = [
+export const groupsPanelColumns: DataColumns<string, GroupResource> = [
     {
         name: GroupsPanelColumnNames.GROUP,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.ASC,
+        sort: {direction: SortDirection.ASC, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
diff --git a/src/views/link-panel/link-panel-root.tsx b/src/views/link-panel/link-panel-root.tsx
index c24d4637..f75275af 100644
--- a/src/views/link-panel/link-panel-root.tsx
+++ b/src/views/link-panel/link-panel-root.tsx
@@ -16,6 +16,7 @@ import {
 from 'views-components/data-explorer/renderers';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
+import { LinkResource } from 'models/link';
 
 type CssRules = "root";
 
@@ -33,12 +34,12 @@ export enum LinkPanelColumnNames {
     UUID = "UUID"
 }
 
-export const linkPanelColumns: DataColumns<string> = [
+export const linkPanelColumns: DataColumns<string, LinkResource> = [
     {
         name: LinkPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceLinkName uuid={uuid} />
     },
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index d08f6aae..684fd448 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -59,6 +59,7 @@ import { GroupContentsResource } from 'services/groups-service/groups-service';
 import { GroupClass, GroupResource } from 'models/group';
 import { CollectionResource } from 'models/collection';
 import { resourceIsFrozen } from 'common/frozen-resources';
+import { ProjectResource } from 'models/project';
 
 type CssRules = 'root' | "button";
 
@@ -97,12 +98,12 @@ export interface ProjectPanelFilter extends DataTableFilterItem {
     type: ResourceKind | ContainerRequestState;
 }
 
-export const projectPanelColumns: DataColumns<string> = [
+export const projectPanelColumns: DataColumns<string, ProjectResource> = [
     {
         name: ProjectPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
@@ -209,7 +210,7 @@ export const projectPanelColumns: DataColumns<string> = [
         name: ProjectPanelColumnNames.CREATED_AT,
         selected: false,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.NONE, field: "createdAt"},
         filters: createTree(),
         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
     },
@@ -217,7 +218,7 @@ export const projectPanelColumns: DataColumns<string> = [
         name: ProjectPanelColumnNames.LAST_MODIFIED,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.DESC, field: "modifiedAt"},
         filters: createTree(),
         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
     },
@@ -225,7 +226,7 @@ export const projectPanelColumns: DataColumns<string> = [
         name: ProjectPanelColumnNames.TRASH_AT,
         selected: false,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.NONE, field: "trashAt"},
         filters: createTree(),
         render: uuid => <ResourceTrashDate uuid={uuid} />
     },
@@ -233,7 +234,7 @@ export const projectPanelColumns: DataColumns<string> = [
         name: ProjectPanelColumnNames.DELETE_AT,
         selected: false,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.NONE, field: "deleteAt"},
         filters: createTree(),
         render: uuid => <ResourceDeleteDate uuid={uuid} />
     },
diff --git a/src/views/public-favorites-panel/public-favorites-panel.tsx b/src/views/public-favorites-panel/public-favorites-panel.tsx
index 8eb2a87c..0aa0e9fd 100644
--- a/src/views/public-favorites-panel/public-favorites-panel.tsx
+++ b/src/views/public-favorites-panel/public-favorites-panel.tsx
@@ -9,7 +9,6 @@ import { connect, DispatchProp } from 'react-redux';
 import { DataColumns } from 'components/data-table/data-table';
 import { RouteComponentProps } from 'react-router';
 import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
-import { SortDirection } from 'components/data-table/data-column';
 import { ResourceKind } from 'models/resource';
 import { ArvadosTheme } from 'common/custom-theme';
 import {
@@ -66,12 +65,12 @@ export interface FavoritePanelFilter extends DataTableFilterItem {
     type: ResourceKind | ContainerRequestState;
 }
 
-export const publicFavoritePanelColumns: DataColumns<string> = [
+export const publicFavoritePanelColumns: DataColumns<string, GroupContentsResource> = [
     {
         name: PublicFavoritePanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        // sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
@@ -107,7 +106,7 @@ export const publicFavoritePanelColumns: DataColumns<string> = [
         name: PublicFavoritePanelColumnNames.LAST_MODIFIED,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        // sort: {direction: SortDirection.DESC, field: "modifiedAt"},
         filters: createTree(),
         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
     }
diff --git a/src/views/search-results-panel/search-results-panel-view.tsx b/src/views/search-results-panel/search-results-panel-view.tsx
index e281035c..d9b9002e 100644
--- a/src/views/search-results-panel/search-results-panel-view.tsx
+++ b/src/views/search-results-panel/search-results-panel-view.tsx
@@ -29,6 +29,7 @@ import { StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { getSearchSessions } from 'store/search-bar/search-bar-actions';
 import { camelCase } from 'lodash';
+import { GroupContentsResource } from 'services/groups-service/groups-service';
 
 export enum SearchResultsPanelColumnNames {
     CLUSTER = "Cluster",
@@ -56,7 +57,7 @@ export interface WorkflowPanelFilter extends DataTableFilterItem {
     type: ResourceKind | ContainerRequestState;
 }
 
-export const searchResultsPanelColumns: DataColumns<string> = [
+export const searchResultsPanelColumns: DataColumns<string, GroupContentsResource> = [
     {
         name: SearchResultsPanelColumnNames.CLUSTER,
         selected: true,
@@ -68,7 +69,7 @@ export const searchResultsPanelColumns: DataColumns<string> = [
         name: SearchResultsPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: (uuid: string) => <ResourceName uuid={uuid} />
     },
@@ -104,7 +105,7 @@ export const searchResultsPanelColumns: DataColumns<string> = [
         name: SearchResultsPanelColumnNames.LAST_MODIFIED,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.DESC, field: "modifiedAt"},
         filters: createTree(),
         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
     }
diff --git a/src/views/subprocess-panel/subprocess-panel-root.tsx b/src/views/subprocess-panel/subprocess-panel-root.tsx
index 7da74f22..9cf1db77 100644
--- a/src/views/subprocess-panel/subprocess-panel-root.tsx
+++ b/src/views/subprocess-panel/subprocess-panel-root.tsx
@@ -19,6 +19,7 @@ import { ResourcesState } from 'store/resources/resources';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { StyleRulesCallback, Typography, WithStyles, withStyles } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
+import { ProcessResource } from 'models/process';
 
 type CssRules = 'iconHeader' | 'cardHeader';
 
@@ -44,12 +45,12 @@ export interface SubprocessPanelFilter extends DataTableFilterItem {
     type: ResourceKind | ContainerRequestState;
 }
 
-export const subprocessPanelColumns: DataColumns<string> = [
+export const subprocessPanelColumns: DataColumns<string, ProcessResource> = [
     {
         name: SubprocessPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
@@ -65,7 +66,7 @@ export const subprocessPanelColumns: DataColumns<string> = [
         name: SubprocessPanelColumnNames.CREATED_AT,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.DESC, field: "createdAt"},
         filters: createTree(),
         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
     },
diff --git a/src/views/trash-panel/trash-panel.tsx b/src/views/trash-panel/trash-panel.tsx
index 67326829..35020751 100644
--- a/src/views/trash-panel/trash-panel.tsx
+++ b/src/views/trash-panel/trash-panel.tsx
@@ -34,6 +34,7 @@ import { createTree } from 'models/tree';
 import {
     getTrashPanelTypeFilters
 } from 'store/resource-type-filters/resource-type-filters';
+import { CollectionResource } from 'models/collection';
 
 type CssRules = "toolbar" | "button" | "root";
 
@@ -83,12 +84,12 @@ export const ResourceRestore =
         </Tooltip>
     );
 
-export const trashPanelColumns: DataColumns<string> = [
+export const trashPanelColumns: DataColumns<string, CollectionResource> = [
     {
         name: TrashPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "name"},
         filters: createTree(),
         render: uuid => <ResourceName uuid={uuid} />
     },
@@ -96,7 +97,6 @@ export const trashPanelColumns: DataColumns<string> = [
         name: TrashPanelColumnNames.TYPE,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
         filters: getTrashPanelTypeFilters(),
         render: uuid => <ResourceType uuid={uuid} />,
     },
@@ -104,7 +104,7 @@ export const trashPanelColumns: DataColumns<string> = [
         name: TrashPanelColumnNames.FILE_SIZE,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "fileSizeTotal"},
         filters: createTree(),
         render: uuid => <ResourceFileSize uuid={uuid} />
     },
@@ -112,7 +112,7 @@ export const trashPanelColumns: DataColumns<string> = [
         name: TrashPanelColumnNames.TRASHED_DATE,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.DESC,
+        sort: {direction: SortDirection.DESC, field: "trashAt"},
         filters: createTree(),
         render: uuid => <ResourceTrashDate uuid={uuid} />
     },
@@ -120,7 +120,7 @@ export const trashPanelColumns: DataColumns<string> = [
         name: TrashPanelColumnNames.TO_BE_DELETED,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "deleteAt"},
         filters: createTree(),
         render: uuid => <ResourceDeleteDate uuid={uuid} />
     },
@@ -128,7 +128,6 @@ export const trashPanelColumns: DataColumns<string> = [
         name: '',
         selected: true,
         configurable: false,
-        sortDirection: SortDirection.NONE,
         filters: createTree(),
         render: uuid => <ResourceRestore uuid={uuid} />
     }
diff --git a/src/views/user-panel/user-panel.tsx b/src/views/user-panel/user-panel.tsx
index 8849c126..950262d8 100644
--- a/src/views/user-panel/user-panel.tsx
+++ b/src/views/user-panel/user-panel.tsx
@@ -51,12 +51,12 @@ export enum UserPanelColumnNames {
     USERNAME = "Username"
 }
 
-export const userPanelColumns: DataColumns<string> = [
+export const userPanelColumns: DataColumns<string, UserResource> = [
     {
         name: UserPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "firstName"},
         filters: createTree(),
         render: uuid => <UserResourceFullName uuid={uuid} link={true} />
     },
@@ -64,7 +64,7 @@ export const userPanelColumns: DataColumns<string> = [
         name: UserPanelColumnNames.UUID,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "uuid"},
         filters: createTree(),
         render: uuid => <ResourceUuid uuid={uuid} />
     },
@@ -72,7 +72,7 @@ export const userPanelColumns: DataColumns<string> = [
         name: UserPanelColumnNames.EMAIL,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "email"},
         filters: createTree(),
         render: uuid => <ResourceEmail uuid={uuid} />
     },
@@ -94,7 +94,7 @@ export const userPanelColumns: DataColumns<string> = [
         name: UserPanelColumnNames.USERNAME,
         selected: true,
         configurable: false,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "username"},
         filters: createTree(),
         render: uuid => <ResourceUsername uuid={uuid} />
     }
diff --git a/src/views/user-profile-panel/user-profile-panel-root.tsx b/src/views/user-profile-panel/user-profile-panel-root.tsx
index 53c0799f..6a556516 100644
--- a/src/views/user-profile-panel/user-profile-panel-root.tsx
+++ b/src/views/user-profile-panel/user-profile-panel-root.tsx
@@ -34,6 +34,7 @@ import { createTree } from 'models/tree';
 import { getResource, ResourcesState } from 'store/resources/resources';
 import { DefaultView } from 'components/default-view/default-view';
 import { CopyToClipboardSnackbar } from 'components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar';
+import { PermissionResource } from 'models/permission';
 
 type CssRules = 'root' | 'emptyRoot' | 'gridItem' | 'label' | 'readOnlyValue' | 'title' | 'description' | 'actions' | 'content' | 'copyIcon';
 
@@ -125,7 +126,7 @@ enum TABS {
 
 }
 
-export const userProfileGroupsColumns: DataColumns<string> = [
+export const userProfileGroupsColumns: DataColumns<string, PermissionResource> = [
     {
         name: UserProfileGroupsColumnNames.NAME,
         selected: true,
diff --git a/src/views/workflow-panel/workflow-panel-view.tsx b/src/views/workflow-panel/workflow-panel-view.tsx
index 44e14fd3..7d9d746d 100644
--- a/src/views/workflow-panel/workflow-panel-view.tsx
+++ b/src/views/workflow-panel/workflow-panel-view.tsx
@@ -63,12 +63,12 @@ export enum ResourceStatus {
 //     }
 // };
 
-export const workflowPanelColumns: DataColumns<string> = [
+export const workflowPanelColumns: DataColumns<string, WorkflowResource> = [
     {
         name: WorkflowPanelColumnNames.NAME,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.ASC,
+        sort: {direction: SortDirection.ASC, field: "name"},
         filters: createTree(),
         render: (uuid: string) => <ResourceWorkflowName uuid={uuid} />
     },
@@ -101,7 +101,7 @@ export const workflowPanelColumns: DataColumns<string> = [
         name: WorkflowPanelColumnNames.LAST_MODIFIED,
         selected: true,
         configurable: true,
-        sortDirection: SortDirection.NONE,
+        sort: {direction: SortDirection.NONE, field: "modifiedAt"},
         filters: createTree(),
         render: (uuid: string) => <ResourceLastModifiedDate uuid={uuid} />
     },

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list