From 0d06f28dd9ea6b2b2f5fda59c3ce52aced19400e Mon Sep 17 00:00:00 2001
From: Onno Visser <23527729+onnovisser@users.noreply.github.com>
Date: Wed, 25 Oct 2023 13:17:17 +0200
Subject: [PATCH] fallback styling

---
 centrifuge-app/src/components/DataTable.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
index 048645e871..d9bdfaec2d 100644
--- a/centrifuge-app/src/components/DataTable.tsx
+++ b/centrifuge-app/src/components/DataTable.tsx
@@ -95,7 +95,7 @@ export const DataTable = <T extends Record<string, any>>({
       minWidth={scrollWidth > 0 ? scrollWidth : 'auto'}
     >
       {showHeader && (
-        <HeaderRow>
+        <HeaderRow templateColumns={templateColumns}>
           {columns.map((col, i) => (
             <HeaderCol key={i} align={col?.align}>
               <Text variant="body3">
@@ -117,6 +117,7 @@ export const DataTable = <T extends Record<string, any>>({
           to={onRowClicked && (() => onRowClicked(row))}
           key={keyField ? row[keyField] : i}
           tabIndex={onRowClicked ? 0 : undefined}
+          templateColumns={templateColumns}
         >
           {columns.map((col, index) => (
             <DataCol variant="body2" align={col?.align} key={index}>
@@ -127,7 +128,7 @@ export const DataTable = <T extends Record<string, any>>({
       ))}
       {/* summary row is not included in sorting */}
       {summary && (
-        <DataRow>
+        <DataRow templateColumns={templateColumns}>
           {columns.map((col, i) => (
             <DataCol variant="body2" key={`${col.sortKey}-${i}`} align={col?.align}>
               {col.cell(summary, i)}
@@ -146,14 +147,18 @@ export const DataTable = <T extends Record<string, any>>({
 
 const TableGrid = styled(Grid)``
 
-const Row = styled('div')`
+const Row = styled('div')<any>`
   display: grid;
+  // Fallback for browsers that don't support subgrid
+  // Tables will look a bit wonky in those browsers
+  // TODO: Remove when browser support is sufficient
+  grid-template-columns: ${(props) => props.templateColumns};
   grid-template-columns: subgrid;
   grid-column: start / end;
   box-shadow: ${({ theme }) => `-1px 0 0 0 ${theme.colors.borderSecondary}, 1px 0 0 0 ${theme.colors.borderSecondary}`};
 `
 
-const HeaderRow = styled(Row)(
+const HeaderRow = styled(Row)<any>(
   css({
     backgroundColor: 'backgroundSecondary',
     borderStyle: 'solid',