allow cell to take custom properties like aria and data-cy per cell b… (

#503) * allow cell to take custom properties like aria and data-cy per cell by column * versioning to 5.4.3 * add filterInvalidProps to DefaultCellComponent render * add back space * add sortable-table.test.js test for addition; * remove custom class for valid dom prop * add test for invalid DOM props on column * Tweak formatting * Remove unnecessary attributes Co-authored-by: Conor Hawes <[email protected]>
LaunchPadLab · Jun 15, 2022 · 640526b · 640526b
1 parent 016a81d
commit 640526b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git 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 }) => <tr>{ children }</tr> // eslint-disable-line
-const DefaultCellComponent = ({ className, onClick, placeholder, value }) => // eslint-disable-line
-  <td { ...{ className, onClick }}>{ isNil(value) ? placeholder : value }</td>
+const DefaultCellComponent = ({ className, onClick, placeholder, value, ...rest }) => // eslint-disable-line
+  <td { ...{ className, onClick, ...filterInvalidDOMProps(rest) }}>{ isNil(value) ? placeholder : value }</td>
 
 function TableRow ({
   columns,

diff --git a/stories/tables/sortable-table.story.js b/stories/tables/sortable-table.story.js
@@ -101,6 +101,13 @@ storiesOf('SortableTable', module)
       <Column name="active" component={CustomCell} />
     </SortableTable>
   ))
+  .add('with additional valid DOM properties on cell component (per column)', () => (
+    <SortableTable data={tableData}>
+      <Column name="name" tabIndex="-1" />
+      <Column name="age"  data-cy="age" />
+      <Column name="active" aria-label="Active" />
+    </SortableTable>
+  ))
   .add('with custom cell component and its row data', () => (
     <SortableTable data={tableData}>
       <Column name="name" />

diff --git 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(
+      <SortableTable data={tableData}>
+        <Column name="name" data-cy="name"/>
+      </SortableTable>
+    )
+  expect(wrapper.find('td').first().prop('data-cy')).toEqual('name')
+})
+
+test('does not pass invalid DOM props to cells', () => {
+  const wrapper = mount(
+      <SortableTable data={tableData}>
+        <Column name="name" customAttribute="custom"/>
+      </SortableTable>
+    )
+  expect(wrapper.find('td').first().prop('customAttribute')).toBe(undefined)
+})