Merge pull request #363 from navikt/sticky-header

Gjer tabell-header sticky

Author: ingfo

src/components/user-table/header/user-table-header.tsx

@@ -1,9 +1,13 @@
 import { Table } from '@navikt/ds-react';
 import { OrderByField } from '../../../rest/api';
 
-export const UserTableHeader = () => {
+interface Props {
+	stickyHeader: boolean;
+}
+
+export const UserTableHeader = ({ stickyHeader }: Props) => {
 	return (
-		<Table.Header>
+		<Table.Header className={stickyHeader ? 'sticky-table-header' : undefined}>
 			<Table.Row>
 				<Table.ColumnHeader sortKey={OrderByField.BRUKER_ETTERNAVN} sortable>
 					Etternavn, Fornavn

src/components/user-table/user-table.css

@@ -12,3 +12,24 @@
 	/* Set tekst i tabell-celler til 1rem, utan å miste padding-mengder frå tabellstorleik medium */
 	font-size: var(--a-font-size-medium);
 }
+
+/* Sticky header på tabell (start)*/
+table.user-table {
+	/* Gjer at borders "heng fast" i dei sticky cellene */
+	border-collapse: separate; /* Ikkje automagisk slå saman border-top og border-bottom */
+	border-spacing: 0; /* Unngå mellomrom/"mini-gap" mellom celler */
+}
+
+.user-table:has(.sticky-table-header) {
+	/* For at sticky-header skal fungere må header-cellene ha ein forelder med position-relative */
+	position: relative;
+}
+
+.user-table .sticky-table-header th {
+	/* Gjer header-cellene sticky og låsar dei til toppen av tabellen */
+	position: sticky;
+	top: 0;
+	/* Gjev cellene kvit bakgrunn, slik at dei skjular innhaldet som scroller forbi under dei */
+	background: var(--a-bg-default);
+}
+/* (end) Sticky headre på tabell */

src/components/user-table/user-table.tsx

@@ -44,7 +44,7 @@ export const UserTable = () => {
 				className="user-table"
 				zebraStripes={true}
 			>
-				<UserTableHeader />
+				<UserTableHeader stickyHeader={true} />
 				<UserTableBody />
 			</Table>
 		</div>