feat: Made table headings sticky (#53)

implerhq · Nov 10, 2022 · 3c60cc7 · 3c60cc7
1 parent 9679978
commit 3c60cc7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/apps/widget/src/config/colors.config.ts b/apps/widget/src/config/colors.config.ts
@@ -10,4 +10,5 @@ export const colors = {
   lightDanger: '#FDEBEB',
   light: '#F2F9FE',
   white: '#FFFFFF',
+  gray: '#ebebeb',
 };
diff --git a/apps/widget/src/design-system/Table/Table.style.ts b/apps/widget/src/design-system/Table/Table.style.ts
@@ -7,6 +7,12 @@ export const getTableStyles = (theme: MantineTheme) => ({
   overflow: 'auto',
   display: 'block',
   whiteSpace: 'nowrap',
+  'thead tr th': {
+    position: 'sticky',
+    top: 0,
+    'z-index': 1,
+    background: colors.gray,
+  },
 });
 
 export const getHeadingStyles = (theme: MantineTheme): React.CSSProperties => ({