X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/a918d09702ac7b1ac111ea12ded1cdb2bd801e88..0c8dea6be6e43f6331655cbf916946e5750b5aa9:/src/components/data-table/data-table.tsx

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e96839e5..854b3220 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -7,7 +7,7 @@ import { Table, TableBody, TableRow, TableCell, TableHead, TableSortLabel, Style
 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;
 }
@@ -15,7 +15,7 @@ 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;
 }
@@ -23,7 +23,8 @@ export interface DataTableProps<T> {
 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>
@@ -40,7 +41,7 @@ class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> &
     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
@@ -54,8 +55,8 @@ class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> &
                     </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)}>
@@ -68,12 +69,12 @@ class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> &
     }
 
     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)}
@@ -86,6 +87,10 @@ class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> &
         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";