diff --git a/src/tables/components/table-row.js b/src/tables/components/table-row.js
index 4c74282d..b9210e5b 100644
--- a/src/tables/components/table-row.js
+++ b/src/tables/components/table-row.js
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import { get, identity, isNil, noop } from '../../utils'
+import { get, identity, isNil, noop, filterInvalidDOMProps} from '../../utils'
import { Types } from '../helpers'
const propTypes = {
@@ -14,8 +14,8 @@ const propTypes = {
}
const DefaultRowComponent = ({ children }) =>
{ children }
// eslint-disable-line
-const DefaultCellComponent = ({ className, onClick, placeholder, value }) => // eslint-disable-line
- { isNil(value) ? placeholder : value } |
+const DefaultCellComponent = ({ className, onClick, placeholder, value, ...rest }) => // eslint-disable-line
+ { isNil(value) ? placeholder : value } |
function TableRow ({
columns,
diff --git a/stories/tables/sortable-table.story.js b/stories/tables/sortable-table.story.js
index 1ce473c4..0843888c 100644
--- a/stories/tables/sortable-table.story.js
+++ b/stories/tables/sortable-table.story.js
@@ -101,6 +101,13 @@ storiesOf('SortableTable', module)
))
+ .add('with additional valid DOM properties on cell component (per column)', () => (
+
+
+
+
+
+ ))
.add('with custom cell component and its row data', () => (
diff --git a/test/tables/sortable-table.test.js b/test/tables/sortable-table.test.js
index 878a35c9..0cd0b46c 100644
--- a/test/tables/sortable-table.test.js
+++ b/test/tables/sortable-table.test.js
@@ -367,3 +367,21 @@ test('invalid arbitrary props filtered out', () => {
)
expect(wrapper.find('table').first().prop('invalidProp')).toBe(undefined)
})
+
+test('passes valid DOM props to cells', () => {
+ const wrapper = mount(
+
+
+
+ )
+ expect(wrapper.find('td').first().prop('data-cy')).toEqual('name')
+})
+
+test('does not pass invalid DOM props to cells', () => {
+ const wrapper = mount(
+
+
+
+ )
+ expect(wrapper.find('td').first().prop('customAttribute')).toBe(undefined)
+})