Fix cell indentation for sub-rows in rtl mode (#745)

KevinVandy · Oct 20, 2023 · 5de854c · 5de854c
1 parent c26a9c5
commit 5de854c
Showing 1 changed file with 34 additions and 35 deletions.
diff --git a/packages/material-react-table/src/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/body/MRT_TableBodyCell.tsx
@@ -123,37 +123,37 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       columnSizingInfo.isResizingColumn === column.id
         ? `2px solid ${draggingBorderColor} !important`
         : isDraggingColumn || isDraggingRow
-        ? `1px dashed ${theme.palette.grey[500]} !important`
-        : isHoveredColumn ||
-          isHoveredRow ||
-          columnSizingInfo.isResizingColumn === column.id
-        ? `2px dashed ${draggingBorderColor} !important`
-        : undefined;
+          ? `1px dashed ${theme.palette.grey[500]} !important`
+          : isHoveredColumn ||
+            isHoveredRow ||
+            columnSizingInfo.isResizingColumn === column.id
+            ? `2px dashed ${draggingBorderColor} !important`
+            : undefined;
 
     if (columnSizingInfo.isResizingColumn === column.id) {
       return { borderRight: borderStyle };
     }
 
     return borderStyle
       ? {
-          borderBottom:
-            isDraggingRow || isHoveredRow || isLastRow
-              ? borderStyle
-              : undefined,
-          borderLeft:
-            isDraggingColumn ||
+        borderBottom:
+          isDraggingRow || isHoveredRow || isLastRow
+            ? borderStyle
+            : undefined,
+        borderLeft:
+          isDraggingColumn ||
             isHoveredColumn ||
             ((isDraggingRow || isHoveredRow) && isFirstColumn)
-              ? borderStyle
-              : undefined,
-          borderRight:
-            isDraggingColumn ||
+            ? borderStyle
+            : undefined,
+        borderRight:
+          isDraggingColumn ||
             isHoveredColumn ||
             ((isDraggingRow || isHoveredRow) && isLastColumn)
-              ? borderStyle
-              : undefined,
-          borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
-        }
+            ? borderStyle
+            : undefined,
+        borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+      }
       : undefined;
   }, [
     columnSizingInfo.isResizingColumn,
@@ -238,22 +238,21 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               ? '0 0.5rem'
               : '0.5rem'
             : density === 'comfortable'
-            ? columnDefType === 'display'
-              ? '0.5rem 0.75rem'
-              : '1rem'
-            : columnDefType === 'display'
-            ? '1rem 1.25rem'
-            : '1.5rem',
-        pl:
+              ? columnDefType === 'display'
+                ? '0.5rem 0.75rem'
+                : '1rem'
+              : columnDefType === 'display'
+                ? '1rem 1.25rem'
+                : '1.5rem',
+        [theme.direction === 'rtl' ? 'pr' : 'pl']:
           column.id === 'mrt-row-expand'
-            ? `${
-                row.depth +
-                (density === 'compact'
-                  ? 0.5
-                  : density === 'comfortable'
-                  ? 0.75
-                  : 1.25)
-              }rem`
+            ? `${row.depth +
+            (density === 'compact'
+              ? 0.5
+              : density === 'comfortable'
+                ? 0.75
+                : 1.25)
+            }rem`
             : undefined,
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         whiteSpace: