src/components/data-table/data-table.tsx

   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 { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, Typography } from '@material-ui/core';
   7 import { DataColumn, SortDirection } from './data-column';
   8 import DataTableFilters, { DataTableFilterItem } from "../data-table-filters/data-table-filters";
   9
  10 export type DataColumns<T> = Array<DataColumn<T>>;
  11
  12 export interface DataTableProps<T> {
  13     items: T[];
  14     columns: DataColumns<T>;
  15     onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
  16     onRowContextMenu: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
  17     onSortToggle: (column: DataColumn<T>) => void;
  18     onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
  19 }
  20
  21 class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
  22     render() {
  23         const { items, classes } = this.props;
  24         return <div className={classes.tableContainer}>
  25             {items.length > 0 ?
  26                 <Table>
  27                     <TableHead>
  28                         <TableRow>
  29                             {this.mapVisibleColumns(this.renderHeadCell)}
  30                         </TableRow>
  31                     </TableHead>
  32                     <TableBody className={classes.tableBody}>
  33                         {items.map(this.renderBodyRow)}
  34                     </TableBody>
  35                 </Table> : <Typography
  36                     className={classes.noItemsInfo}
  37                     variant="body2"
  38                     gutterBottom>
  39                     No items
  40                 </Typography>}
  41         </div>;
  42     }
  43
  44     renderHeadCell = (column: DataColumn<T>, index: number) => {
  45         const { name, key, renderHeader, filters, sortDirection } = column;
  46         const { onSortToggle, onFiltersChange } = this.props;
  47         return <TableCell key={key || index}>
  48             {renderHeader ?
  49                 renderHeader() :
  50                 filters
  51                     ? <DataTableFilters
  52                         name={`${name} filters`}
  53                         onChange={filters =>
  54                             onFiltersChange &&
  55                             onFiltersChange(filters, column)}
  56                         filters={filters}>
  57                         {name}
  58                     </DataTableFilters>
  59                     : sortDirection
  60                         ? <TableSortLabel
  61                             active={sortDirection !== "none"}
  62                             direction={sortDirection !== "none" ? sortDirection : undefined}
  63                             onClick={() =>
  64                                 onSortToggle &&
  65                                 onSortToggle(column)}>
  66                             {name}
  67                         </TableSortLabel>
  68                         : <span>
  69                             {name}
  70                         </span>}
  71         </TableCell>;
  72     }
  73
  74     renderBodyRow = (item: T, index: number) => {
  75         const { columns, onRowClick, onRowContextMenu } = this.props;
  76         return <TableRow
  77             hover
  78             key={index}
  79             onClick={event => onRowClick && onRowClick(event, item)}
  80             onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
  81             {this.mapVisibleColumns((column, index) => (
  82                 <TableCell key={column.key || index}>
  83                     {column.render(item)}
  84                 </TableCell>
  85             ))}
  86         </TableRow>;
  87     }
  88
  89     mapVisibleColumns = (fn: (column: DataColumn<T>, index: number) => React.ReactElement<any>) => {
  90         return this.props.columns.filter(column => column.selected).map(fn);
  91     }
  92
  93 }
  94
  95 type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
  96
  97 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  98     tableContainer: {
  99         overflowX: 'auto'
 100     },
 101     tableBody: {
 102         background: theme.palette.background.paper
 103     },
 104     noItemsInfo: {
 105         textAlign: "center",
 106         padding: theme.spacing.unit
 107     }
 108 });
 109
 110 export default withStyles(styles)(DataTable);