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, StyleRulesCallback, Theme, WithStyles, withStyles, Typography } from '@material-ui/core';
7 import { DataColumn } from './data-column';
9 export interface DataTableProps<T> {
11 columns: Array<DataColumn<T>>;
12 onItemClick?: (item: T) => void;
15 class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
17 const { items, columns, classes, onItemClick } = this.props;
18 return <div className={classes.tableContainer}>
24 .filter(column => column.selected)
25 .map(({ name, renderHeader, key }, index) =>
26 <TableCell key={key || index}>
27 {renderHeader ? renderHeader() : name}
32 <TableBody className={classes.tableBody}>
38 onClick={() => onItemClick && onItemClick(item)}>
40 .filter(column => column.selected)
41 .map((column, index) => (
42 <TableCell key={column.key || index}>
49 </Table> : <Typography
50 className={classes.noItemsInfo}
59 type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
61 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
66 background: theme.palette.background.paper
70 padding: theme.spacing.unit
74 export default withStyles(styles)(DataTable);