feat(table): fixed first column

src/theme/components/table.js

@@ -1,12 +1,21 @@
+const baseStyles = {
+    fontSize: '16px',
+    height: '35px',
+    table: {
+        background: 'brand.white',
+        borderRadius: '0 0 10px 10px'
+    }
+};
+
+const stickyTable = {
+    position: 'sticky',
+    left: '0'
+};
+
 const table = {
     variants: {
         reg: {
-            fontSize: '16px',
-            height: '35px',
-            table: {
-                background: 'brand.white',
-                borderRadius: '0 0 10px 10px'
-            },
+            ...baseStyles,
             thead: {
                 color: 'brand.primary'
             },
@@ -29,6 +38,28 @@ const table = {
                 textAlign: 'left',
                 padding: '10px 20px'
             }
+        },
+
+        fixedFirstColumn: {
+            ...baseStyles,
+            tr: {
+                '& th:first-of-type': {
+                    ...stickyTable,
+                    backgroundColor: 'brand.white'
+                },
+                '&: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': {
+                    ...stickyTable
+                }
+            }
         }
     }
 };