rowKey function for table rows

assets/js/components/Table/Table.jsx

@@ -12,6 +12,7 @@ import {
 import CollapsibleTableRow from './CollapsibleTableRow';
 import Pagination from './Pagination';
 import EmptyState from './EmptyState';
+import { defaultRowKey } from './defaultRowKey';
 
 const defaultCellRender = (content) => (
   <p className="text-gray-900 whitespace-no-wrap">{content}</p>
@@ -61,6 +62,7 @@ function Table({
   setSearchParams,
   emptyStateText = 'No data available',
   withPadding = true,
+  rowKey = defaultRowKey,
 }) {
   const {
     columns,
@@ -181,18 +183,22 @@ function Table({
                     emptyStateText={emptyStateText}
                   />
                 ) : (
-                  renderedData.map((item, index) => (
-                    <CollapsibleTableRow
-                      item={item}
-                      key={index}
-                      collapsibleDetailRenderer={collapsibleDetailRenderer}
-                      renderCells={renderCells}
-                      columns={columns}
-                      colSpan={columns.length}
-                      className={rowClassName}
-                      collapsedRowClassName={collapsedRowClassName}
-                    />
-                  ))
+                  renderedData.map((item, index) => {
+                    const key = rowKey(item, index);
+
+                    return (
+                      <CollapsibleTableRow
+                        item={item}
+                        key={key}
+                        collapsibleDetailRenderer={collapsibleDetailRenderer}
+                        renderCells={renderCells}
+                        columns={columns}
+                        colSpan={columns.length}
+                        className={rowClassName}
+                        collapsedRowClassName={collapsedRowClassName}
+                      />
+                    );
+                  })
                 )}
               </tbody>
             </table>

assets/js/components/Table/Table.test.jsx

@@ -138,7 +138,7 @@ describe('Table component', () => {
       });
     });
 
-    test('should return empty state message when data is empty', () => {
+    it('should return empty state message when data is empty', () => {
       const data = [];
       const emptyStateText = faker.random.words(5);
       render(
@@ -157,4 +157,30 @@ describe('Table component', () => {
       expect(tableCell).toHaveTextContent(emptyStateText);
     });
   });
+
+  describe('rowKey function', () => {
+    it('is used to determine keys for rows', async () => {
+      const rowKey = jest.fn((_item, index) => index);
+      const data = tableDataFactory.buildList(5);
+
+      render(
+        <Table
+          config={tableConfig}
+          data={data}
+          setSearchParams={() => {}}
+          rowKey={rowKey}
+        />
+      );
+
+      await waitFor(() => {
+        const table = screen.getByRole('table');
+        expect(table.querySelectorAll('tbody > tr')).toHaveLength(5);
+      });
+
+      expect(rowKey).toHaveBeenCalledTimes(5);
+      expect(rowKey).toHaveBeenCalledWith(data[0], 0);
+      expect(rowKey).toHaveBeenCalledWith(data[1], 1);
+      expect(rowKey).toHaveBeenCalledWith(data[2], 2);
+    });
+  });
 });

assets/js/components/Table/defaultRowKey.js

@@ -0,0 +1,3 @@
+import { get } from 'lodash';
+
+export const defaultRowKey = (item, index) => get(item, 'key', index);