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 { Column } from './column';
   8
   9 export interface DataTableProps<T> {
  10     items: T[];
  11     columns: Array<Column<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 (
  19             <div className={classes.tableContainer}>
  20                 {
  21                     items.length > 0 ? (
  22                         <Table>
  23                             <TableHead>
  24                                 <TableRow>
  25                                     {
  26                                         columns
  27                                             .filter(column => column.selected)
  28                                             .map(({ header, renderHeader, key }, index) => (
  29                                                 <TableCell key={key || index}>
  30                                                     {renderHeader ? renderHeader() : header}
  31                                                 </TableCell>
  32                                             ))
  33                                     }
  34                                 </TableRow>
  35                             </TableHead>
  36                             <TableBody className={classes.tableBody}>
  37                                 {
  38                                     items
  39                                         .map((item, index) => (
  40                                             <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
  41                                                 {
  42                                                     columns
  43                                                         .filter(column => column.selected)
  44                                                         .map((column, index) => (
  45                                                             <TableCell key={column.key || index}>
  46                                                                 {column.render(item)}
  47                                                             </TableCell>
  48                                                         ))
  49                                                 }
  50                                             </TableRow>
  51                                         ))
  52                                 }
  53                             </TableBody>
  54                         </Table>
  55                     ) : (
  56                             <Typography>No items</Typography>
  57                         )
  58                 }
  59
  60             </div>
  61         );
  62     }
  63 }
  64
  65 type CssRules = "tableBody" | "tableContainer";
  66
  67 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
  68     tableContainer: {
  69         overflowX: 'auto'
  70     },
  71     tableBody: {
  72         background: theme.palette.background.paper
  73     }
  74 });
  75
  76 export default withStyles(styles)(DataTable);