projects
/
arvados-workbench2.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
15672: Adds mutually exclusive data explorer column filters
[arvados-workbench2.git]
/
src
/
components
/
data-table
/
data-column.ts
diff --git
a/src/components/data-table/data-column.ts
b/src/components/data-table/data-column.ts
index d4e23ab5b5eb95afc9f68414639e8348b235f545..aada41391f5d8c13bb157f23c0aee3317a5abd35 100644
(file)
--- a/
src/components/data-table/data-column.ts
+++ b/
src/components/data-table/data-column.ts
@@
-2,19
+2,25
@@
//
// SPDX-License-Identifier: AGPL-3.0
//
// SPDX-License-Identifier: AGPL-3.0
-import { DataTableFilterItem } from "../data-table-filters/data-table-filters";
import * as React from "react";
import * as React from "react";
+import { DataTableFilters } from "../data-table-filters/data-table-filters-tree";
+import { createTree } from '~/models/tree';
-export interface DataColumn<T
, F extends DataTableFilterItem = DataTableFilterItem
> {
+export interface DataColumn<T> {
key?: React.Key;
name: string;
selected: boolean;
configurable: boolean;
key?: React.Key;
name: string;
selected: boolean;
configurable: boolean;
- sortDirection: SortDirection;
- filters: F[];
+
+ /**
+ * If set to true, filters on this column will be displayed in a
+ * radio group and only one filter can be selected at a time.
+ */
+ mutuallyExclusiveFilters?: boolean;
+ sortDirection?: SortDirection;
+ filters: DataTableFilters;
render: (item: T) => React.ReactElement<any>;
renderHeader?: () => React.ReactElement<any>;
render: (item: T) => React.ReactElement<any>;
renderHeader?: () => React.ReactElement<any>;
- width?: string;
}
export enum SortDirection {
}
export enum SortDirection {
@@
-34,3
+40,14
@@
export const toggleSortDirection = <T>(column: DataColumn<T>): DataColumn<T> =>
export const resetSortDirection = <T>(column: DataColumn<T>): DataColumn<T> => {
return column.sortDirection ? { ...column, sortDirection: SortDirection.NONE } : column;
};
export const resetSortDirection = <T>(column: DataColumn<T>): DataColumn<T> => {
return column.sortDirection ? { ...column, sortDirection: SortDirection.NONE } : column;
};
+
+export const createDataColumn = <T>(dataColumn: Partial<DataColumn<T>>): DataColumn<T> => ({
+ key: '',
+ name: '',
+ selected: true,
+ configurable: true,
+ sortDirection: SortDirection.NONE,
+ filters: createTree(),
+ render: () => React.createElement('span'),
+ ...dataColumn,
+});