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, StyleRulesCallback, Theme, WithStyles, withStyles, Typography } from '@material-ui/core';
   7 import { DataColumn } from './data-column';
   8
   9 export interface DataTableProps<T> {
  10     items: T[];
  11     columns: Array<DataColumn<T>>;
  12     onItemClick?: (item: T) => void;
  13 }
  14
  15 class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
  16     render() {
  17         const { items, columns, classes, onItemClick } = this.props;
  18         return <div className={classes.tableContainer}>
  19             {items.length > 0 ?
  20                 <Table>
  21                     <TableHead>
  22                         <TableRow>
  23                             {columns
  24                                 .filter(column => column.selected)
  25                                 .map(({ name, renderHeader, key }, index) =>
  26                                     <TableCell key={key || index}>
  27                                         {renderHeader ? renderHeader() : name}
  28                                     </TableCell>
  29                                 )}
  30                         </TableRow>
  31                     </TableHead>
  32                     <TableBody className={classes.tableBody}>
  33                         {items
  34                             .map((item, index) =>
  35                                 <TableRow
  36                                     hover
  37                                     key={index}
  38                                     onClick={() => onItemClick && onItemClick(item)}>
  39                                     {columns
  40                                         .filter(column => column.selected)
  41                                         .map((column, index) => (
  42                                             <TableCell key={column.key || index}>
  43                                                 {column.render(item)}
  44                                             </TableCell>
  45                                         ))}
  46                                 </TableRow>
  47                             )}
  48                     </TableBody>
  49                 </Table> : <Typography
  50                     className={classes.noItemsInfo}
  51                     variant="body2"
  52                     gutterBottom>
  53                     No items
  54                 </Typography>}
  55         </div>;
  56     }
  57 }
  58
  59 type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
  60
  61 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  62     tableContainer: {
  63         overflowX: 'auto'
  64     },
  65     tableBody: {
  66         background: theme.palette.background.paper
  67     },
  68     noItemsInfo: {
  69         textAlign: "center",
  70         padding: theme.spacing.unit
  71     }
  72 });
  73
  74 export default withStyles(styles)(DataTable);