chore(react): add table sticky header

wwnorton · Nov 26, 2024 · a314c2d · a314c2d
1 parent 335444e
commit a314c2d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/core/src/components/table/index.scss b/packages/core/src/components/table/index.scss
@@ -121,7 +121,7 @@
 	--header-text: var(--header-text-ghost);
 	--sort-button-text: var(--sort-button-background);
 
-	border: none;
+	border-color: transparent;
 
 	tbody {
 		border: 1px solid var(--border-out-color);
@@ -134,7 +134,7 @@
 	--sort-button-text: var(--sort-button-background);
 
 	& tbody {
-		border-top: 1px solid var(--cell-border-color);
+		border-top: 1px groove var(--cell-border-color);
 	}
 }
 
@@ -208,6 +208,15 @@
 			@include ghost;
 		}
 
+		.nds-table--sticky {
+			& thead {
+				@include device.media-up('sm') {
+					position: sticky;
+					top: -1px;
+				}
+			}
+		}
+
 		.nds-table-sort-button {
 			display: none;
 			padding: 0;

diff --git a/packages/react/src/components/Table/BaseTable/BaseTable.tsx b/packages/react/src/components/Table/BaseTable/BaseTable.tsx
@@ -13,6 +13,7 @@ export const BaseTable = ({
 	variant = 'solid',
 	color = 'navy',
 	className,
+	stickyHeader = false,
 	...others
 }: BaseTableProps) => {
 	const resolvedClassName = classNames(
@@ -23,6 +24,7 @@ export const BaseTable = ({
 			[`nds-table--${variant}`]: !!variant,
 			[`nds-table--${color}`]: !!color,
 			'nds-table--striped': !isNotStriped,
+			'nds-table--sticky': stickyHeader,
 		},
 		className,
 	);

diff --git a/packages/react/src/components/Table/Table.stories.tsx b/packages/react/src/components/Table/Table.stories.tsx
@@ -21,7 +21,7 @@ export default meta;
 
 type Story = StoryObj<typeof Table>;
 
-const ROWS = 10;
+const ROWS = 50;
 
 const data: TableData = {
 	headers: [