fallback styling

centrifuge · Oct 25, 2023 · 0d06f28 · 0d06f28
1 parent bc1ad1b
commit 0d06f28
Showing 1 changed file with 9 additions and 4 deletions.
diff --git 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',