From 8468884a79fc8f64be9a4364d07c7d70e3d87ab4 Mon Sep 17 00:00:00 2001
From: Kelly Phan <keelly.p@gmail.com>
Date: Thu, 5 Dec 2024 11:06:20 +0100
Subject: [PATCH] feat: add tdCellClassName in table columns

---
 src/components/creditNote/CreditNotesTable.tsx | 11 +++--------
 src/components/designSystem/Table/Table.tsx    | 13 +++++++++++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/creditNote/CreditNotesTable.tsx b/src/components/creditNote/CreditNotesTable.tsx
index 7a81d94da..b1b2772ee 100644
--- a/src/components/creditNote/CreditNotesTable.tsx
+++ b/src/components/creditNote/CreditNotesTable.tsx
@@ -326,11 +326,12 @@ const CreditNotesTable = ({
                         key: 'invoice.customer.displayName',
                         title: translate('text_63ac86d797f728a87b2f9fb3'),
                         content: (creditNote: CreditNoteTableItemFragment) => (
-                          <CustomerColumn variant="body" color="grey600" noWrap>
+                          <Typography variant="body" color="grey600" noWrap>
                             {creditNote.invoice?.customer.displayName}
-                          </CustomerColumn>
+                          </Typography>
                         ),
                         maxSpace: true,
+                        tdCellClassName: 'hidden md:table-cell',
                       } as TableColumn<CreditNoteTableItemFragment>,
                     ]
                   : []),
@@ -383,9 +384,3 @@ const Grid = () => css`
 const SkeletonLine = styled(BaseListItem)`
   ${Grid()}
 `
-
-const CustomerColumn = styled(Typography)`
-  ${theme.breakpoints.down('md')} {
-    display: none;
-  }
-`
diff --git a/src/components/designSystem/Table/Table.tsx b/src/components/designSystem/Table/Table.tsx
index 9c6df358e..92fa3d5e8 100644
--- a/src/components/designSystem/Table/Table.tsx
+++ b/src/components/designSystem/Table/Table.tsx
@@ -45,6 +45,7 @@ export type TableColumn<T> = {
   maxSpace?: boolean
   minWidth?: number
   truncateOverflow?: boolean
+  tdCellClassName?: string
 }
 
 type DataItem = {
@@ -139,6 +140,7 @@ const TableCell = ({
   hasPlaceholderDisplayed,
   isBlurred,
   maxSpace,
+  tdCellClassName,
   ...props
 }: PropsWithChildren &
   TableCellProps & {
@@ -146,10 +148,11 @@ const TableCell = ({
     isBlurred?: boolean
     hasPlaceholderDisplayed?: boolean
     maxSpace?: number
+    tdCellClassName?: string
   }) => {
   return (
     <MUITableCell
-      className={tw('lago-table-cell', 'w-auto whitespace-nowrap p-0', className)}
+      className={tw('lago-table-cell', 'w-auto whitespace-nowrap p-0', className, tdCellClassName)}
       style={{
         width: !!maxSpace ? `${maxSpace}%` : 'auto',
         borderBottom: !!hasPlaceholderDisplayed ? 'none' : `1px solid ${theme.palette.grey[300]}`,
@@ -248,7 +251,11 @@ const LoadingRows = <T,>({
   return Array.from({ length: LOADING_ROW_COUNT }).map((_, i) => (
     <TableRow key={`${id}-loading-row-${i}`}>
       {columns.map((col, j) => (
-        <TableCell hasPlaceholderDisplayed={false} key={`${id}-loading-cell-${i}-${j}`}>
+        <TableCell
+          tdCellClassName={col.tdCellClassName}
+          hasPlaceholderDisplayed={false}
+          key={`${id}-loading-cell-${i}-${j}`}
+        >
           <TableInnerCell minWidth={col.minWidth} align={col.textAlign}>
             <div
               style={{
@@ -465,6 +472,7 @@ export const Table = <T extends DataItem>({
                   key={`${TABLE_ID}-head-${i}`}
                   align={column.textAlign || 'left'}
                   maxSpace={column.maxSpace ? 100 / maxSpaceColumns : undefined}
+                  tdCellClassName={column.tdCellClassName}
                 >
                   <TableInnerCell
                     className="min-h-10 text-grey-600"
@@ -502,6 +510,7 @@ export const Table = <T extends DataItem>({
                       key={`${TABLE_ID}-cell-${i}-${j}`}
                       align={column.textAlign || 'left'}
                       maxSpace={column.maxSpace ? 100 / maxSpaceColumns : undefined}
+                      tdCellClassName={column.tdCellClassName}
                     >
                       <TableInnerCell
                         minWidth={column.minWidth}