From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Wed, 4 Jul 2018 10:20:45 +0000 (+0200)
Subject: Create DataItem type to ensure table rows use key attr to properly rerender
X-Git-Tag: 1.2.0~59^2~28
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/4433dd83d5967d35cde06f4ed5185c2b20ec0c0b

Create DataItem type to ensure table rows use key attr to properly rerender

Feature #13703

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index e8a5b24e..e96839e5 100644
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -8,7 +8,9 @@ import { DataColumn, SortDirection } from './data-column';
 import DataTableFilters, { DataTableFilterItem } from "../data-table-filters/data-table-filters";
 
 export type DataColumns<T> = Array<DataColumn<T>>;
-
+export interface DataItem {
+    key: React.Key;
+}
 export interface DataTableProps<T> {
     items: T[];
     columns: DataColumns<T>;
@@ -18,7 +20,7 @@ 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}>
@@ -66,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) => (