feat: header+pagination sticky

acdh-oeaw · Oct 18, 2024 · a7b519d · a7b519d
1 parent 6bfc6e9
commit a7b519d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/components/data-table/data-table.vue b/components/data-table/data-table.vue
@@ -14,6 +14,7 @@ const emit = defineEmits(["table-ready", "columnFiltersChange", "globalFilterCha
 interface Props {
 	items: Array<never>;
 	columns: Array<ColumnDef<never>>;
+	header: boolean;
 }
 
 const props = defineProps<Props>();
@@ -71,7 +72,7 @@ onMounted(() => {
 
 <template>
 	<Table>
-		<TableHeader class="bg-primary font-bold text-on-primary">
+		<TableHeader v-if="header" class="bg-primary font-bold text-on-primary">
 			<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
 				<TableHead v-for="header in headerGroup.headers" :key="header.id">
 					{{ header.column.columnDef.header }}

diff --git a/components/geojson-table-window-content.vue b/components/geojson-table-window-content.vue
@@ -81,15 +81,22 @@ function registerTable(table: Table<FeatureType>) {
 		<Centered v-if="isPending">
 			<LoadingIndicator />
 		</Centered>
-		<div class="grid justify-items-end py-2">
-			<DataTablePagination
-				v-if="tables.get('0')"
-				:table="tables.get('0') as unknown as Table<never>"
-			/>
+		<div class="sticky top-0 z-10">
+			<div v-if="tables.get('0')" class="grid justify-items-end bg-white py-2">
+				<DataTablePagination :table="tables.get('0') as unknown as Table<never>" />
+			</div>
+			<TableHeader class="bg-primary font-bold text-on-primary">
+				<TableRow v-for="headerGroup in tables.get('0')!.getHeaderGroups()" :key="headerGroup.id">
+					<TableHead v-for="header in headerGroup.headers" :key="header.id">
+						{{ header.column.columnDef.header }}
+					</TableHead>
+				</TableRow>
+			</TableHeader>
 		</div>
 		<DataTable
 			v-if="!isPending && data && data[0]"
 			:columns="columns as unknown as Array<ColumnDef<never>>"
+			:header="false"
 			:items="data[0].features as Array<never>"
 			@table-ready="registerTable"
 		></DataTable>