import * as React from 'react';
import { DataTable, DataTableProps, DataColumn, ColumnSelector } from "../../components/data-table";
-import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText } from '@material-ui/core';
+import { Typography, Grid, ListItem, Divider, List, ListItemIcon, ListItemText, Paper, Toolbar } from '@material-ui/core';
import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
import MoreVertIcon from "@material-ui/icons/MoreVert";
import Popover from '../popover/popover';
name: "Actions",
selected: true,
configurable: false,
- renderHeader: () => this.renderActionsHeader(),
+ renderHeader: () => null,
render: renderItemActions
}
]
};
render() {
- return <DataTable
- columns={this.state.columns}
- items={this.props.items} />;
+ return <Paper>
+ <Toolbar>
+ <Grid container justify="flex-end">
+ <ColumnSelector
+ columns={this.state.columns}
+ onColumnToggle={this.toggleColumn} />
+ </Grid>
+ </Toolbar>
+ <DataTable
+ columns={this.state.columns}
+ items={this.props.items} />
+ <Toolbar />
+ </Paper>;
}
toggleColumn = (column: DataColumn<DataItem>) => {
this.setState({ columns });
}
- renderActionsHeader = () =>
- <Grid container justify="flex-end">
- <ColumnSelector
- columns={this.state.columns}
- onColumnToggle={this.toggleColumn} />
- </Grid>
-
renderName = (item: DataItem) =>
<Grid
container
</TableRow>
)}
</TableBody>
- </Table> : <Typography>No items</Typography>}
+ </Table> : <Typography
+ className={classes.noItemsInfo}
+ variant="body2"
+ gutterBottom>
+ No items
+ </Typography>}
</div>;
}
}
-type CssRules = "tableBody" | "tableContainer";
+type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
tableContainer: {
},
tableBody: {
background: theme.palette.background.paper
+ },
+ noItemsInfo: {
+ textAlign: "center",
+ padding: theme.spacing.unit
}
});