import { DataColumn, SortDirection } from './data-column';
import DataTableFilters, { DataTableFilterItem } from "../data-table-filters/data-table-filters";
-export type DataColumns<T> = Array<DataColumn<T>>;
-
+export type DataColumns<T, F extends DataTableFilterItem = DataTableFilterItem> = Array<DataColumn<T, F>>;
+export interface DataItem {
+ key: React.Key;
+}
export interface DataTableProps<T> {
items: T[];
columns: DataColumns<T>;
onRowClick: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
- onRowContextMenu: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: T) => void;
onSortToggle: (column: DataColumn<T>) => void;
onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
}
-class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
+class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
const { items, classes } = this.props;
- return <div className={classes.tableContainer}>
- {items.length > 0 ?
- <Table>
- <TableHead>
- <TableRow>
- {this.mapVisibleColumns(this.renderHeadCell)}
- </TableRow>
- </TableHead>
- <TableBody className={classes.tableBody}>
- {items.map(this.renderBodyRow)}
- </TableBody>
- </Table> : <Typography
- className={classes.noItemsInfo}
- variant="body2"
- gutterBottom>
- No items
- </Typography>}
+ return <div
+ className={classes.tableContainer}>
+ <Table>
+ <TableHead>
+ <TableRow>
+ {this.mapVisibleColumns(this.renderHeadCell)}
+ </TableRow>
+ </TableHead>
+ <TableBody className={classes.tableBody}>
+ {items.map(this.renderBodyRow)}
+ </TableBody>
+ </Table>
</div>;
}
renderHeadCell = (column: DataColumn<T>, index: number) => {
const { name, key, renderHeader, filters, sortDirection } = column;
const { onSortToggle, onFiltersChange } = this.props;
- return <TableCell key={key || index}>
+ return <TableCell key={key || index} style={{ width: column.width, minWidth: column.width }}>
{renderHeader ?
renderHeader() :
filters
</DataTableFilters>
: sortDirection
? <TableSortLabel
- active={sortDirection !== "none"}
- direction={sortDirection !== "none" ? sortDirection : undefined}
+ active={sortDirection !== SortDirection.None}
+ direction={sortDirection !== SortDirection.None ? sortDirection : undefined}
onClick={() =>
onSortToggle &&
onSortToggle(column)}>
}
renderBodyRow = (item: T, index: number) => {
- const { columns, onRowClick, onRowContextMenu } = this.props;
+ const { onRowClick, onContextMenu } = this.props;
return <TableRow
hover
- key={index}
+ key={item.key}
onClick={event => onRowClick && onRowClick(event, item)}
- onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
+ onContextMenu={this.handleRowContextMenu(item)}>
{this.mapVisibleColumns((column, index) => (
<TableCell key={column.key || index}>
{column.render(item)}
return this.props.columns.filter(column => column.selected).map(fn);
}
+ handleRowContextMenu = (item: T) =>
+ (event: React.MouseEvent<HTMLElement>) =>
+ this.props.onContextMenu(event, item)
+
}
type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
tableContainer: {
- overflowX: 'auto'
+ overflowX: 'auto',
+ overflowY: 'hidden'
},
tableBody: {
background: theme.palette.background.paper