FIX: Allow left align override on last column header and cell (#31)

* Left align override on last col header and cell * Update test
lifeomic · Oct 29, 2020 · 94412cf · 94412cf
1 parent 279f9e0
commit 94412cf
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/components/TableModule/TableHeaderCell.tsx b/src/components/TableModule/TableHeaderCell.tsx
@@ -123,9 +123,10 @@ export const TableHeaderCell: React.FC<TableHeaderCellProps> = ({
         //   then it is left-aligned
         // - If this is the last header and there is more than one column, then
         //   it is right-aligned
+        // - Allow for left alignment override on last header
         // - Fallback behavior is left aligned (specified by root class)
-        ((header.align && header.align === 'right') ||
-          (headingsCount > 1 && index === headingsCount - 1)) &&
+        ((!header.align && headingsCount > 1 && index === headingsCount - 1) ||
+          header?.align === 'right') &&
           classes.rootAlignRight,
         header.className
       )}

diff --git a/src/components/TableModule/TableModuleCell.test.tsx b/src/components/TableModule/TableModuleCell.test.tsx
@@ -86,7 +86,7 @@ test('it renders with "isLastCellInRow"', async () => {
     </RenderInTable>
   );
   const root = await findByTestId(testIds.bodyCell);
-  expect(root).toHaveClass('ChromaTableModule-tableRowCellAlignRight');
+  expect(root).toHaveClass('ChromaTableModule-tableRowCell');
 });
 
 test('it renders with cell "align: right"', async () => {

diff --git a/src/components/TableModule/TableModuleCell.tsx b/src/components/TableModule/TableModuleCell.tsx
@@ -27,10 +27,12 @@ export const TableModuleCell: React.FC<TableModuleCell> = React.memo(
         //   then it is left-aligned
         // - If this is the last cell and there is more than one column, then
         //   it is right-aligned
+        // - Allow for left alignment override on last cell
         // - Fallback behavior is left aligned (specified by tableRowCell class)
         className={clsx(
           classes.tableRowCell,
-          ((cell.align && cell.align === 'right') || isLastCellInRow) &&
+          ((isLastCellInRow && cell?.align !== 'left') ||
+            cell?.align === 'right') &&
             classes.tableRowCellAlignRight,
           maxCellWidth && classes.tableRowCellTruncate,
           {