diff --git a/assets/js/components/ExecutionResults/ExecutionResults.jsx b/assets/js/components/ExecutionResults/ExecutionResults.jsx index 983acd1671..68899ecaff 100644 --- a/assets/js/components/ExecutionResults/ExecutionResults.jsx +++ b/assets/js/components/ExecutionResults/ExecutionResults.jsx @@ -24,6 +24,7 @@ import ExecutionContainer from './ExecutionContainer'; const resultsTableConfig = { usePadding: false, + rowClassName: 'tn-check-result-row', columns: [ { title: 'Id', diff --git a/assets/js/components/Table/CollapsibleTableRow.jsx b/assets/js/components/Table/CollapsibleTableRow.jsx index 6c60cef60c..9f6f1f7f5f 100644 --- a/assets/js/components/Table/CollapsibleTableRow.jsx +++ b/assets/js/components/Table/CollapsibleTableRow.jsx @@ -1,4 +1,5 @@ import React, { Fragment, useState } from 'react'; +import classNames from 'classnames'; function CollapsibleTableRow({ columns, @@ -6,13 +7,16 @@ function CollapsibleTableRow({ collapsibleDetailRenderer, renderCells = () => {}, colSpan = 1, + className, }) { const [rowExpanded, toggleRow] = useState(false); return ( <> { if (collapsibleDetailRenderer) { toggleRow(!rowExpanded); diff --git a/assets/js/components/Table/Table.jsx b/assets/js/components/Table/Table.jsx index 4974a51440..a77a18e99d 100644 --- a/assets/js/components/Table/Table.jsx +++ b/assets/js/components/Table/Table.jsx @@ -65,6 +65,7 @@ function Table({ const { columns, collapsibleDetailRenderer = undefined, + rowClassName = '', pagination, usePadding = true, } = config; @@ -187,6 +188,7 @@ function Table({ renderCells={renderCells} columns={columns} colSpan={columns.length} + className={rowClassName} /> )) )} diff --git a/assets/js/components/Table/Table.test.jsx b/assets/js/components/Table/Table.test.jsx index 11e49a040e..34348ae0f3 100644 --- a/assets/js/components/Table/Table.test.jsx +++ b/assets/js/components/Table/Table.test.jsx @@ -62,6 +62,24 @@ describe('Table component', () => { column3: faker.animal.dog(), })); + it('should allow custom classes for table rows', () => { + const data = tableDataFactory.buildList(10); + const customRowClassName = 'custom-row-classname'; + + render( + {}} + /> + ); + + screen + .getByRole('table') + .querySelectorAll('tbody > tr') + .forEach((tableRow) => expect(tableRow).toHaveClass(customRowClassName)); + }); + describe('filtering', () => { it('should filter by the chosen filter option with default filter', async () => { const data = tableDataFactory.buildList(10);