1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core';
7 import { DataColumn, SortDirection } from './data-column';
8 import { DataTableFilters, DataTableFilterItem } from "../data-table-filters/data-table-filters";
9 import { DefaultView } from '~/components/default-view/default-view';
10 import { DetailsIcon } from '~/components/icon/icon';
12 export type DataColumns<T, F extends DataTableFilterItem = DataTableFilterItem> = Array<DataColumn<T, F>>;
14 export interface DataTableDataProps<T> {
16 columns: DataColumns<T>;
17 onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
18 onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
19 onRowDoubleClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
20 onSortToggle: (column: DataColumn<T>) => void;
21 onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
22 extractKey?: (item: T) => React.Key;
23 noItemsPlaceholder?: React.ReactNode;
26 type CssRules = "tableBody" | "root" | "content" | "noItemsInfo" | "noItemsPlaceholder";
28 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
34 display: 'inline-block',
37 background: theme.palette.background.paper
41 padding: theme.spacing.unit
44 marginTop: theme.spacing.unit * 4,
45 marginBottom: theme.spacing.unit * 4,
49 type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
51 export const DataTable = withStyles(styles)(
52 class Component<T> extends React.Component<DataTableProps<T>> {
54 const { items, classes } = this.props;
55 return <div className={classes.root}>
56 <div className={classes.content}>
60 {this.mapVisibleColumns(this.renderHeadCell)}
63 <TableBody className={classes.tableBody}>
64 {items.map(this.renderBodyRow)}
67 {items.length === 0 && this.renderNoItemsPlaceholder()}
72 renderNoItemsPlaceholder = () => {
73 return this.props.noItemsPlaceholder
74 ? this.props.noItemsPlaceholder
75 : <div className={this.props.classes.noItemsPlaceholder}>
76 <DefaultView icon={DetailsIcon} messages={['No items found']} />
80 renderHeadCell = (column: DataColumn<T>, index: number) => {
81 const { name, key, renderHeader, filters, sortDirection } = column;
82 const { onSortToggle, onFiltersChange } = this.props;
83 return <TableCell key={key || index} style={{ width: column.width, minWidth: column.width }}>
88 name={`${name} filters`}
91 onFiltersChange(filters, column)}
97 active={sortDirection !== SortDirection.NONE}
98 direction={sortDirection !== SortDirection.NONE ? sortDirection : undefined}
101 onSortToggle(column)}>
110 renderBodyRow = (item: T, index: number) => {
111 const { onRowClick, onRowDoubleClick, extractKey } = this.props;
114 key={extractKey ? extractKey(item) : index}
115 onClick={event => onRowClick && onRowClick(event, item)}
116 onContextMenu={this.handleRowContextMenu(item)}
117 onDoubleClick={event => onRowDoubleClick && onRowDoubleClick(event, item)}>
118 {this.mapVisibleColumns((column, index) => (
119 <TableCell key={column.key || index}>
120 {column.render(item)}
126 mapVisibleColumns = (fn: (column: DataColumn<T>, index: number) => React.ReactElement<any>) => {
127 return this.props.columns.filter(column => column.selected).map(fn);
130 handleRowContextMenu = (item: T) =>
131 (event: React.MouseEvent<HTMLElement>) =>
132 this.props.onContextMenu(event, item)