Refactor data-explorer to make it background more customizable, add slot for custom...
[arvados-workbench2.git] / src / components / data-table / data-column.ts
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from "react";
6 import { DataTableFilters } from "../data-table-filters/data-table-filters-tree";
7 import { createTree } from '~/models/tree';
8
9 export interface DataColumn<T> {
10     key?: React.Key;
11     name: string;
12     selected: boolean;
13     configurable: boolean;
14     sortDirection?: SortDirection;
15     filters: DataTableFilters;
16     render: (item: T) => React.ReactElement<any>;
17     renderHeader?: () => React.ReactElement<any>;
18 }
19
20 export enum SortDirection {
21     ASC = "asc",
22     DESC = "desc",
23     NONE = "none"
24 }
25
26 export const toggleSortDirection = <T>(column: DataColumn<T>): DataColumn<T> => {
27     return column.sortDirection
28         ? column.sortDirection === SortDirection.ASC
29             ? { ...column, sortDirection: SortDirection.DESC }
30             : { ...column, sortDirection: SortDirection.ASC }
31         : column;
32 };
33
34 export const resetSortDirection = <T>(column: DataColumn<T>): DataColumn<T> => {
35     return column.sortDirection ? { ...column, sortDirection: SortDirection.NONE } : column;
36 };
37
38 export const createDataColumn = <T>(dataColumn: Partial<DataColumn<T>>): DataColumn<T> => ({
39     key: '',
40     name: '',
41     selected: true,
42     configurable: true,
43     sortDirection: SortDirection.NONE,
44     filters: createTree(),
45     render: () => React.createElement('span'),
46     ...dataColumn,
47 });