src/components/data-explorer/data-explorer.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 DataExplorerProps<T> {
  11     items: T[];
  12     columns: Array<Column<T>>;
  13     onColumnToggle: (column: Column<T>) => void;
  14     onItemClick?: (item: T) => void;
  15 }
  16
  17 class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<CssRules>> {
  18     render() {
  19         const { items, columns, classes, onItemClick, onColumnToggle } = this.props;
  20         return (
  21             <div>
  22                 <Grid container justify="flex-end">
  23                     <ColumnsConfigurator {...{ columns, onColumnToggle }} />
  24                 </Grid>
  25                 <div className={classes.tableContainer}>
  26                     {
  27                         items.length > 0 ? (
  28                             <Table>
  29                                 <TableHead>
  30                                     <TableRow>
  31                                         {
  32                                             columns.filter(column => column.selected).map((column, index) => (
  33                                                 <TableCell key={index}>{column.header}</TableCell>
  34                                             ))
  35                                         }
  36                                     </TableRow>
  37                                 </TableHead>
  38                                 <TableBody className={classes.tableBody}>
  39                                     {
  40                                         items.map((item, index) => (
  41                                             <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
  42                                                 {
  43                                                     columns.filter(column => column.selected).map((column, index) => (
  44                                                         <TableCell key={index}>
  45                                                             {column.render(item)}
  46                                                         </TableCell>
  47                                                     ))
  48                                                 }
  49                                             </TableRow>
  50                                         ))
  51                                     }
  52                                 </TableBody>
  53                             </Table>
  54                         ) : (
  55                                 <Typography>No items</Typography>
  56                             )
  57                     }
  58
  59                 </div>
  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)(DataExplorer);