Merge pull request #60 from NadavShaar/removing-key-indexes

Keys update.

Author: NadavShaar

src/components/ColumnVisibility.jsx

@@ -21,7 +21,7 @@ const ColumnVisibility = ({
             buttonChildren={columnVisibilityIcon}
             popoverChildren={
                 columns.filter(column => column.label).map((column, idx) => (
-                    <div key={idx} className='rgt-clickable rgt-columns-manager-popover-row'>
+                    <div key={column.id} className='rgt-clickable rgt-columns-manager-popover-row'>
                         <label 
                             htmlFor={`checkbox-${idx}`} 
                             title={column.label} 

src/components/PageSize.jsx

@@ -23,7 +23,7 @@ const PageSize = ({
                 value={value} 
                 onChange={event => { onChange(event.target.value);}}
             >
-                { options.map((option, idx) => <option key={idx} value={option}>{option}</option>) }
+                { options.map((option, idx) => <option key={option} value={option}>{option}</option>) }
             </select>
         </div>
     )

src/components/Row.jsx

@@ -18,14 +18,14 @@ const Row = ({
 
     if (isVirtualScroll) {
         if (index === 'virtual-start') {
-            return visibleColumns.map((visibleColumn, colIndex) => (
-                <div key={index + colIndex} style={{ minHeight: virtualItems[0]?.start }} />
-            ));
+            return visibleColumns.map(visibleColumn =>
+                <div key={`${index}-${visibleColumn.id}`} style={{ minHeight: virtualItems[0]?.start }} />
+            );
         }
         if (index === 'virtual-end') {
-            return visibleColumns.map((visibleColumn, colIndex) => (
-                <div key={index + colIndex} style={{ minHeight: totalSize - virtualItems[virtualItems.length - 1]?.end || 0 }} />
-            ));
+            return visibleColumns.map(visibleColumn =>
+                <div key={`${index}-${visibleColumn.id}`} style={{ minHeight: totalSize - virtualItems[virtualItems.length - 1]?.end || 0 }} />
+            );
         }
     }
 
@@ -34,24 +34,22 @@ const Row = ({
     let disableSelection = !data || !getIsRowSelectable(data);
     let isSelected = !!data && !!(selectedRowsIds.find(selectedRowId => selectedRowId === rowId));
     let isEdit = !!data && editRow?.[rowIdField] === rowId && !!getIsRowEditable(data);
-
-    return visibleColumns.map((visibleColumn, colIndex) => {
-        return (
-            <CellContainer 
-                key={rowIndex+colIndex}
-                rowId={rowId}
-                data={rowId && (editRow?.[rowIdField] === rowId) ? editRow : data} 
-                rowIndex={rowIndex} 
-                colIndex={colIndex}
-                column={visibleColumn}
-                isSelected={isSelected}
-                isEdit={isEdit}
-                disableSelection={disableSelection}
-                forwardRef={colIndex === 0 ? measureRef : undefined}
-                tableManager={tableManager}
-            />
-        )
-    })
+    
+    return visibleColumns.map((visibleColumn, colIndex) =>
+        <CellContainer 
+            key={`${visibleColumn.id}-${rowId}`}
+            rowId={rowId}
+            data={rowId && (editRow?.[rowIdField] === rowId) ? editRow : data} 
+            rowIndex={rowIndex} 
+            colIndex={colIndex}
+            column={visibleColumn}
+            isSelected={isSelected}
+            isEdit={isEdit}
+            disableSelection={disableSelection}
+            forwardRef={colIndex === 0 ? measureRef : undefined}
+            tableManager={tableManager}
+        />
+    )
 };
 
 export default Row;

src/index.js

@@ -16,6 +16,7 @@ const GridTable = props => {
         isLoading,
         config: {
             isVirtualScroll,
+            rowIdField,
             components: { Header, Footer, Loader, NoResults, DragHandle },
         },
         refs: { rgtRef, tableRef },
@@ -55,8 +56,8 @@ const GridTable = props => {
                 }}
             >
                 {
-                    visibleColumns.map((cd, idx) => (
-                        <HeaderCellContainer key={idx} index={idx} column={cd} tableManager={tableManager}/>
+                    visibleColumns.map((visibleColumn, idx) => (
+                        <HeaderCellContainer key={visibleColumn.id} index={idx} column={visibleColumn} tableManager={tableManager}/>
                     ))
                 }
                 {
@@ -68,7 +69,7 @@ const GridTable = props => {
                                 <Row key={'virtual-end'} index={'virtual-end'} tableManager={tableManager} />
                             ]
                             :
-                            pageRows.map((rowData, index) => <Row key={index} index={index} data={rowData} tableManager={tableManager} />)
+                            pageRows.map((rowData, index) => <Row key={rowData?.[rowIdField]} index={index} data={rowData} tableManager={tableManager} />)
                         :
                         <div className='rgt-container-overlay'>
                             {