// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core';
+import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, IconButton } from '@material-ui/core';
+import classnames from 'classnames';
import { DataColumn, SortDirection } from './data-column';
import { DataTableDefaultView } from '../data-table-default-view/data-table-default-view';
import { DataTableFilters } from '../data-table-filters/data-table-filters-tree';
import { DataTableFiltersPopover } from '../data-table-filters/data-table-filters-popover';
import { countNodes } from '~/models/tree';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
export type DataColumns<T> = Array<DataColumn<T>>;
currentRoute?: string;
}
-type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell';
+type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | 'tableCell' | 'arrow' | 'arrowButton';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
},
tableCell: {
wordWrap: 'break-word'
+ },
+ arrow: {
+ margin: 0
+ },
+ arrowButton: {
+ color: theme.palette.text.primary
}
});
renderNoItemsPlaceholder = () => {
return this.props.defaultView
? this.props.defaultView
- : <DataTableDefaultView/>;
+ : <DataTableDefaultView />;
}
renderHeadCell = (column: DataColumn<T>, index: number) => {
? <TableSortLabel
active={sortDirection !== SortDirection.NONE}
direction={sortDirection !== SortDirection.NONE ? sortDirection : undefined}
+ IconComponent={this.ArrowIcon}
+ hideSortIcon
onClick={() =>
onSortToggle &&
onSortToggle(column)}>
</TableCell>;
}
+ ArrowIcon = ({className, ...props}: SvgIconProps) => (
+ <IconButton component='span' className={this.props.classes.arrowButton}>
+ <ArrowDownwardIcon {...props} className={classnames(className, this.props.classes.arrow)}/>
+ </IconButton>
+ )
+
renderBodyRow = (item: any, index: number) => {
const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid } = this.props;
return <TableRow