From d3ca0a235ffe78e8d91d099290de6353ce623f92 Mon Sep 17 00:00:00 2001
From: Jens Hansen <jens.hansen@mni.thm.de>
Date: Sun, 2 May 2021 20:54:34 +0200
Subject: [PATCH 1/3] fix(Table): create default react key for string type
 content cells

---
 src/collections/Table/TableRow.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js
index 9c9bb019d5..4e8e69e054 100644
--- a/src/collections/Table/TableRow.js
+++ b/src/collections/Table/TableRow.js
@@ -59,7 +59,17 @@ function TableRow(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      {_.map(cells, (cell) => TableCell.create(cell, { defaultProps: { as: cellAs } }))}
+      {_.map(cells, (cell, idx) => {
+        const defaultProps = { as: cellAs }
+
+        // generate a default react key for any string content created cells by this HOC
+        // required due the fact that without this, sibling cells with same content will result in React Same Key Error
+        if (typeof cell === 'string') {
+          defaultProps.key = `${idx}-${cell.toLocaleLowerCase().replace(' ', '-')}`
+        }
+
+        return TableCell.create(cell, { defaultProps })
+      })}
     </ElementType>
   )
 }

From 2cc042a929cb4be4cd2c0dead192aa9081092bf9 Mon Sep 17 00:00:00 2001
From: Jens Hansen <jens.hansen@mni.thm.de>
Date: Sun, 2 May 2021 20:57:24 +0200
Subject: [PATCH 2/3] test(Table): add test for same string content sibling
 cells

---
 test/specs/collections/Table/Table-test.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/test/specs/collections/Table/Table-test.js b/test/specs/collections/Table/Table-test.js
index d65894082a..2143b19093 100644
--- a/test/specs/collections/Table/Table-test.js
+++ b/test/specs/collections/Table/Table-test.js
@@ -97,6 +97,13 @@ describe('Table', () => {
       { name: 'Jill', lastName: undefined, status: undefined, notes: undefined },
     ]
 
+    const tableDataWithSameCellContentInSiblingCells = [
+      { name: undefined, status: 'repeat', notes: 'repeat' },
+      { name: 'Jimmy', status: 'Requires Action', notes: undefined },
+      { name: 'Jamie', status: undefined, notes: 'Hostile' },
+      { name: 'Jill', status: undefined, notes: undefined },
+    ]
+
     const renderBodyRowWithSpan = ({ name, lastName, status, notes }, index) => ({
       key: index,
       cells: [
@@ -170,5 +177,13 @@ describe('Table', () => {
       tfoot.find('tr').should.have.lengthOf(1)
       tfoot.find('tr').find('td').should.have.lengthOf(footerRow.length)
     })
+
+    it('renders table data with same string content in sibling cells', () => {
+      wrapperMount({
+        headerRow,
+        renderBodyRow,
+        tableData: tableDataWithSameCellContentInSiblingCells,
+      })
+    })
   })
 })

From a7dddc290aa5f4675ff33af562eb5e3746f4f232 Mon Sep 17 00:00:00 2001
From: Jens Hansen <jens.hansen@mni.thm.de>
Date: Sun, 2 May 2021 21:01:27 +0200
Subject: [PATCH 3/3] docs(Table): add example for table component using the
 tableData attribute

---
 .../Table/Variations/TableExampleTableData.js | 25 +++++++++++++++++++
 .../collections/Table/Variations/index.js     | 12 +++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 docs/src/examples/collections/Table/Variations/TableExampleTableData.js

diff --git a/docs/src/examples/collections/Table/Variations/TableExampleTableData.js b/docs/src/examples/collections/Table/Variations/TableExampleTableData.js
new file mode 100644
index 0000000000..d21463e5df
--- /dev/null
+++ b/docs/src/examples/collections/Table/Variations/TableExampleTableData.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Table } from 'semantic-ui-react'
+
+const headerRow = ['Name', 'Status', 'Notes']
+const renderBodyRow = ({ name, status, notes }, index) => ({
+  key: index,
+  cells: [name || { key: 0 }, status || { key: 1 }, notes || { key: 2 }],
+})
+
+const tableData = [
+  { name: undefined, status: 'Repeat', notes: 'Repeat' },
+  { name: 'Jimmy', status: 'Requires Action', notes: undefined },
+  { name: 'Jamie', status: undefined, notes: 'Hostile' },
+  { name: 'Jill', status: undefined, notes: undefined },
+]
+
+const TableExampleWithTableData = () => (
+  <Table
+    tableData={tableData}
+    headerRow={headerRow}
+    renderBodyRow={renderBodyRow}
+  />
+)
+
+export default TableExampleWithTableData
diff --git a/docs/src/examples/collections/Table/Variations/index.js b/docs/src/examples/collections/Table/Variations/index.js
index abba42cefa..837c75b648 100644
--- a/docs/src/examples/collections/Table/Variations/index.js
+++ b/docs/src/examples/collections/Table/Variations/index.js
@@ -159,6 +159,18 @@ const Variations = () => (
       examplePath='collections/Table/Variations/TableExampleSmall'
     />
     <ComponentExample examplePath='collections/Table/Variations/TableExampleLarge' />
+
+    <ComponentExample
+      title='TableData'
+      description='A table can receive a JSON object to create body rows.'
+      examplePath='collections/Table/Variations/TableExampleTableData'
+    >
+      <Message info>
+        Using the <code>tableData</code> attribute requires also to define the
+        Tables
+        <code>renderBodyRow</code> attribute.
+      </Message>
+    </ComponentExample>
   </ExampleSection>
 )