X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/5fd5db805554d3eddd46cc911a5108fbb74b3cfc..0b1b9f181db6c43a8bbc9b2b2d6ab48a51003b2d:/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 e86113ef..5372128f 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -7,8 +7,10 @@ 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;
+}
 export interface DataTableProps<T> {
     items: T[];
     columns: DataColumns<T>;
@@ -18,33 +20,27 @@ export interface DataTableProps<T> {
     onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn<T>) => void;
 }
 
-class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
+class DataTable<T extends DataItem> extends React.Component<DataTableProps<T> & WithStyles<CssRules>> {
     render() {
         const { items, classes } = this.props;
         return <div className={classes.tableContainer}>
-            {items.length > 0 ?
-                <Table>
-                    <TableHead>
-                        <TableRow>
-                            {this.mapVisibleColumns(this.renderHeadCell)}
-                        </TableRow>
-                    </TableHead>
-                    <TableBody className={classes.tableBody}>
-                        {items.map(this.renderBodyRow)}
-                    </TableBody>
-                </Table> : <Typography
-                    className={classes.noItemsInfo}
-                    variant="body2"
-                    gutterBottom>
-                    No items
-                </Typography>}
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        {this.mapVisibleColumns(this.renderHeadCell)}
+                    </TableRow>
+                </TableHead>
+                <TableBody className={classes.tableBody}>
+                    {items.map(this.renderBodyRow)}
+                </TableBody>
+            </Table>
         </div>;
     }
 
     renderHeadCell = (column: DataColumn<T>, index: number) => {
         const { name, key, renderHeader, filters, sortDirection } = column;
         const { onSortToggle, onFiltersChange } = this.props;
-        return <TableCell key={key || index}>
+        return <TableCell key={key || index} style={{width: column.width, minWidth: column.width}}>
             {renderHeader ?
                 renderHeader() :
                 filters
@@ -58,8 +54,8 @@ class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRul
                     </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)}>
@@ -72,10 +68,10 @@ class DataTable<T> extends React.Component<DataTableProps<T> & WithStyles<CssRul
     }
 
     renderBodyRow = (item: T, index: number) => {
-        const { columns, onRowClick, onRowContextMenu } = this.props;
+        const { onRowClick, onRowContextMenu } = this.props;
         return <TableRow
             hover
-            key={index}
+            key={item.key}
             onClick={event => onRowClick && onRowClick(event, item)}
             onContextMenu={event => onRowContextMenu && onRowContextMenu(event, item)}>
             {this.mapVisibleColumns((column, index) => (
@@ -96,7 +92,8 @@ type CssRules = "tableBody" | "tableContainer" | "noItemsInfo";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     tableContainer: {
-        overflowX: 'auto'
+        overflowX: 'auto',
+        overflowY: 'hidden'
     },
     tableBody: {
         background: theme.palette.background.paper