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) +})