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