Allow custom css in table rows (#1410)

* Allow custom css classes for table rows * Add custom classname for table rows in ExecutionResults
trento-project · May 15, 2023 · bee8a43 · bee8a43
1 parent 2e40964
commit bee8a43
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git 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
@@ -1,18 +1,22 @@
 import React, { Fragment, useState } from 'react';
+import classNames from 'classnames';
 
 function CollapsibleTableRow({
   columns,
   item,
   collapsibleDetailRenderer,
   renderCells = () => {},
   colSpan = 1,
+  className,
 }) {
   const [rowExpanded, toggleRow] = useState(false);
 
   return (
     <>
       <tr
-        className={collapsibleDetailRenderer ? 'cursor-pointer' : ''}
+        className={classNames(className, {
+          'cursor-pointer': !!collapsibleDetailRenderer,
+        })}
         onClick={() => {
           if (collapsibleDetailRenderer) {
             toggleRow(!rowExpanded);

diff --git 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
@@ -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(
+      <Table
+        config={{ rowClassName: customRowClassName, ...tableConfig }}
+        data={data}
+        setSearchParams={() => {}}
+      />
+    );
+
+    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);