// 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>>;
+ columns: DataColumns<T>;
onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
onRowContextMenu?: (event: React.MouseEvent<HTMLTableRowElement>, item: T) => void;
}
<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>
)}
</TableBody>
- </Table> : <Typography
+ </Table> : <Typography
className={classes.noItemsInfo}
variant="body2"
gutterBottom>