feat(table): fixed first column (#106)

* feat(table): fixed first column * feat(table): fixs from comments * feat(table): fix style name * feat(table): fixs from comments * feat(table): fixs from comments
indec-it · Feb 8, 2024 · da7efba · da7efba
1 parent 930cd78
commit da7efba
Showing 1 changed file with 31 additions and 6 deletions.
diff --git a/src/theme/components/table.js b/src/theme/components/table.js
@@ -1,12 +1,22 @@
+const baseStyles = {
+    fontSize: '16px',
+    height: '35px',
+    table: {
+        background: 'brand.white',
+        borderRadius: '0 0 10px 10px'
+    }
+};
+
+const fixedFirstColumnStyles = {
+    position: 'sticky',
+    left: '0',
+    backgroundColor: 'brand.white'
+};
+
 const table = {
     variants: {
         reg: {
-            fontSize: '16px',
-            height: '35px',
-            table: {
-                background: 'brand.white',
-                borderRadius: '0 0 10px 10px'
-            },
+            ...baseStyles,
             thead: {
                 color: 'brand.primary'
             },
@@ -29,6 +39,21 @@ const table = {
                 textAlign: 'left',
                 padding: '10px 20px'
             }
+        },
+        fixedFirstColumn: {
+            ...baseStyles,
+            tr: {
+                'th:first-of-type': fixedFirstColumnStyles,
+                '&:nth-of-type(even) td:first-of-type': {
+                    backgroundColor: 'brand.neutral50'
+                },
+                '&:nth-of-type(odd) td:first-of-type': {
+                    backgroundColor: 'brand.white'
+                }
+            },
+            td: {
+                '&:first-of-type': fixedFirstColumnStyles
+            }
         }
     }
 };