feat: add className to DataTable td element

openedx · Sep 7, 2021 · e8b5bf5 · e8b5bf5
1 parent 7c13754
commit e8b5bf5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/DataTable/TableCell.jsx b/src/DataTable/TableCell.jsx
@@ -3,8 +3,13 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const TableCell = ({ getCellProps, render, column }) => (
-  <td {...getCellProps()}>
-    <span className={classNames('pgn__data-table-cell-wrap', column.cellClassName)}>
+  <td {...getCellProps([
+    {
+      className: column.tdClassName,
+    },
+  ])}
+  >
+    <span className={classNames('pgn__data-table-cell-wrap', column.cellWrapperClassName)}>
       {render('Cell')}
     </span>
   </td>
@@ -17,7 +22,10 @@ TableCell.propTypes = {
   render: PropTypes.func.isRequired,
   /** Table column */
   column: PropTypes.shape({
-    cellClassName: PropTypes.string,
+    /** Class names for the cell wrapper */
+    cellWrapperClassName: PropTypes.string,
+    /** Class names for the td element */
+    tdClassName: PropTypes.string,
   }).isRequired,
 };
 

diff --git a/src/DataTable/tests/TableCell.test.jsx b/src/DataTable/tests/TableCell.test.jsx
@@ -34,7 +34,7 @@ describe('<TableCell />', () => {
       <table>
         <tbody>
           <tr>
-            <TableCell {...{ ...props, column: { cellClassName: addedClass } }} />
+            <TableCell {...{ ...props, column: { cellWrapperClassName: addedClass } }} />
           </tr>
         </tbody>
       </table>,