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);