- const { items, columns, classes, onItemClick } = this.props;
- return (
- <div className={classes.tableContainer}>
- {
- items.length > 0 ? (
- <Table>
- <TableHead>
- <TableRow>
- {
- columns
- .filter(column => column.selected)
- .map(({ header, renderHeader, key }, index) => (
- <TableCell key={key || index}>
- {renderHeader ? renderHeader() : header}
- </TableCell>
- ))
- }
+ const { items, columns, classes, onRowClick, onRowContextMenu } = this.props;
+ return <div className={classes.tableContainer}>
+ {items.length > 0 ?
+ <Table>
+ <TableHead>
+ <TableRow>
+ {columns
+ .filter(column => column.selected)
+ .map(({ name, renderHeader, key, sortDirection, onSortToggle }, index) =>
+ <TableCell key={key || index}>
+ {renderHeader ?
+ renderHeader() :
+ <TableSortLabel
+ active={!!sortDirection}
+ direction={sortDirection}
+ onClick={() => onSortToggle && onSortToggle()}>
+ {name}
+ </TableSortLabel>}
+ </TableCell>
+ )}
+ </TableRow>
+ </TableHead>
+ <TableBody className={classes.tableBody}>
+ {items
+ .map((item, index) =>
+ <TableRow
+ hover
+ key={index}
+ onClick={event => onRowClick && onRowClick(event, item)}
+ onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
+ {columns
+ .filter(column => column.selected)
+ .map((column, index) => (
+ <TableCell key={column.key || index}>
+ {column.render(item)}
+ </TableCell>
+ ))}