// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Table, TableBody, TableRow, TableCell, TableHead, StyleRulesCallback, Theme, WithStyles, withStyles, Typography } from '@material-ui/core';
+import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, StyleRulesCallback, Theme, WithStyles, withStyles, Typography } from '@material-ui/core';
import { DataColumn } from './data-column';
+export type DataColumns<T> = Array<DataColumn<T>>;
+
export interface DataTableProps<T> {
items: T[];
- columns: Array<DataColumn<T>>;
- onItemClick?: (item: T) => void;
+ columns: DataColumns<T>;
+ onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
+ onRowContextMenu?: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
}
class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
render() {
- const { items, columns, classes, onItemClick } = this.props;
+ const { items, columns, classes, onRowClick, onRowContextMenu } = this.props;
return <div className={classes.tableContainer}>
{items.length > 0 ?
<Table>
<TableRow>
{columns
.filter(column => column.selected)
- .map(({ name, renderHeader, key }, index) =>
+ .map(({ name, renderHeader, key, sortDirection, onSortToggle }, index) =>
<TableCell key={key || index}>
- {renderHeader ? renderHeader() : name}
+ {renderHeader ?
+ renderHeader() :
+ <TableSortLabel
+ active={!!sortDirection}
+ direction={sortDirection}
+ onClick={() => onSortToggle && onSortToggle()}>
+ {name}
+ </TableSortLabel>}
</TableCell>
)}
</TableRow>
<TableRow
hover
key={index}
- onClick={() => onItemClick && onItemClick(item)}>
+ onClick={event => onRowClick && onRowClick(event, item)}
+ onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
{columns
.filter(column => column.selected)
.map((column, index) => (
</TableRow>
)}
</TableBody>
- </Table> : <Typography
+ </Table> : <Typography
className={classes.noItemsInfo}
variant="body2"
gutterBottom>