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;
}
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 DataItem> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
const { items, classes } = this.props;
- return <div className={classes.tableContainer}>
+ return <div
+ className={classes.tableContainer}>
<Table>
<TableHead>
<TableRow>
renderHeadCell = (column: DataColumn<T>, index: number) => {
const { name, key, renderHeader, filters, sortDirection } = column;
const { onSortToggle, onFiltersChange } = this.props;
- return <TableCell key={key || index} style={{width: column.width, minWidth: column.width}}>
+ 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 { onRowClick, onRowContextMenu } = this.props;
+ const { onRowClick, onContextMenu } = this.props;
return <TableRow
hover
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";