render() {
const { items, columns, classes, onItemClick, onColumnToggle } = this.props;
return (
- <div>
- <Grid container justify="flex-end">
- <ColumnsConfigurator {...{ columns, onColumnToggle }} />
- </Grid>
- <div className={classes.tableContainer}>
- {
- items.length > 0 ? (
- <Table>
- <TableHead>
- <TableRow>
- {
- columns.filter(column => column.selected).map(({ header, renderHeader }, index) => (
- <TableCell key={index}>
- {renderHeader ? renderHeader() : header}
- </TableCell>
- ))
- }
- </TableRow>
- </TableHead>
- <TableBody className={classes.tableBody}>
+ <div className={classes.tableContainer}>
+ {
+ items.length > 0 ? (
+ <Table>
+ <TableHead>
+ <TableRow>
{
- items.map((item, index) => (
- <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
- {
- columns.filter(column => column.selected).map((column, index) => (
- <TableCell key={index}>
- {column.render(item)}
- </TableCell>
- ))
- }
- </TableRow>
+ columns.filter(column => column.selected).map(({ header, renderHeader, key }, index) => (
+ <TableCell key={key || index}>
+ {renderHeader ? renderHeader() : header}
+ </TableCell>
))
}
- </TableBody>
- </Table>
- ) : (
- <Typography>No items</Typography>
- )
- }
+ </TableRow>
+ </TableHead>
+ <TableBody className={classes.tableBody}>
+ {
+ items.map((item, index) => (
+ <TableRow key={index} hover onClick={() => onItemClick && onItemClick(item)}>
+ {
+ columns.filter(column => column.selected).map((column, index) => (
+ <TableCell key={index}>
+ {column.render(item)}
+ </TableCell>
+ ))
+ }
+ </TableRow>
+ ))
+ }
+ </TableBody>
+ </Table>
+ ) : (
+ <Typography>No items</Typography>
+ )
+ }
- </div>
</div>
);
}
import * as React from 'react';
import DataExplorer, { DataExplorerProps } from "../../components/data-explorer/data-explorer";
+import ColumnsConfigurator from "../../components/data-explorer/columns-configurator/columns-configurator";
import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
import { Column } from '../../components/data-explorer/column';
import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
},
{
header: "Actions",
+ key: "Actions",
selected: true,
configurable: false,
- renderHeader: () => <span/>,
+ renderHeader: () => (
+ <Grid container justify="flex-end">
+ <ColumnsConfigurator
+ columns={this.state.columns}
+ onColumnToggle={this.toggleColumn}
+ />
+ </Grid>
+ ),
render: item => (
<Grid container justify="flex-end">
<Popover triggerComponent={ItemActionsTrigger}>