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 = () => (
+
+)
+
+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'
/>
+
+
+
+ Using the tableData
attribute requires also to define the
+ Tables
+ renderBodyRow
attribute.
+
+
)
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 (
- {_.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 })
+ })}
)
}
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,
+ })
+ })
})
})