Skip to content

Commit

Permalink
chore: optionally hide first table header row(s)
Browse files Browse the repository at this point in the history
  • Loading branch information
katharinawuensche committed Oct 30, 2024
1 parent 4f0234b commit de141e3
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 45 deletions.
8 changes: 7 additions & 1 deletion components/data-table/data-table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const emit = defineEmits(["table-ready", "columnFiltersChange", "globalFilterCha
interface Props {
items: Array<never>;
columns: Array<ColumnDef<never>>;
minHeaderDepth?: number;
}
const props = defineProps<Props>();
Expand Down Expand Up @@ -72,7 +73,12 @@ onMounted(() => {
<template>
<Table>
<TableHeader class="bg-primary font-bold text-on-primary">
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
<TableRow
v-for="headerGroup in table
.getHeaderGroups()
.filter((header) => header.depth >= (props.minHeaderDepth ?? 0))"
:key="headerGroup.id"
>
<TableHead v-for="header in headerGroup.headers" :key="header.id">
{{ header.column.columnDef.header }}
</TableHead>
Expand Down
91 changes: 47 additions & 44 deletions components/geojson-table-window-content.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,50 +21,52 @@ const columnHelper = createColumnHelper();
const columns = computed(() => {
const columnHeadings = fetchedData.value.get(url)?.properties.column_headings;
const categories = [...new Set(columnHeadings?.flatMap((heading) => heading.category))];
const groupedColumns = categories.map((categoryName: string | undefined) => {
switch (typeof categoryName) {
case "string":
return columnHelper.group({
header: categoryName,
//@ts-expect-error type mismatch in accessorFn
columns: columnHeadings
?.filter((heading) => heading.category === categoryName)
.map((heading) => {
return {
id: Object.keys(heading).find((key) => /ft_*/.test(key)) ?? "",
header: heading[Object.keys(heading).find((key) => /ft_*/.test(key)) ?? ""],
cell: (cell: CellContext<FeatureType, never>) => {
return h(resolveComponent("GeojsonTablePropertyCell"), {
value: cell.row.original.properties[cell.column.columnDef.id!],
});
},
};
}),
});
default:
return columnHelper.group({
header: "-",
enableHiding: false,
//@ts-expect-error type mismatch in accessorFn
columns: columnHeadings
?.filter((heading) => heading.category === categoryName)
.map((heading) => {
return {
id: Object.keys(heading)[0],
header: Object.values(heading)[0],
enableHiding: false,
cell: ({ cell }: CellContext<FeatureType, never>) => {
return h(
"span",
{ class: "max-w-[500px] truncate font-medium" },
cell.row.original.properties[cell.column.columnDef.id!],
);
},
};
}),
});
}
});
const groupedColumns = categories
.map((categoryName: string | undefined) => {
switch (typeof categoryName) {
case "string":
return columnHelper.group({
header: categoryName,
//@ts-expect-error type mismatch in accessorFn
columns: columnHeadings
?.filter((heading) => heading.category === categoryName)
.map((heading) => {
return {
id: Object.keys(heading).find((key) => /ft_*/.test(key)) ?? "",
header: heading[Object.keys(heading).find((key) => /ft_*/.test(key)) ?? ""],
cell: (cell: CellContext<FeatureType, never>) => {
return h(resolveComponent("GeojsonTablePropertyCell"), {
value: cell.row.original.properties[cell.column.columnDef.id!],
});
},
};
}),
});
default:
return columnHelper.group({
header: "-",
enableHiding: false,
//@ts-expect-error type mismatch in accessorFn
columns: columnHeadings
?.filter((heading) => heading.category === categoryName)
.map((heading) => {
return {
id: Object.keys(heading)[0],
header: Object.values(heading)[0],
enableHiding: false,
cell: ({ cell }: CellContext<FeatureType, never>) => {
return h(
"span",
{ class: "max-w-[500px] truncate font-medium" },
cell.row.original.properties[cell.column.columnDef.id!],
);
},
};
}),
});
}
})
.sort((a, b) => String(a.header).localeCompare(String(b.header)));
return groupedColumns;
});
Expand Down Expand Up @@ -109,6 +111,7 @@ function registerTable(table: Table<FeatureType>) {
v-if="!isPending"
:columns="columns as unknown as Array<ColumnDef<never>>"
:items="fetchedData.get(url)?.features as Array<never>"
:min-header-depth="1"
@table-ready="registerTable"
></DataTable>
<div class="grid justify-items-end py-2">
Expand Down

0 comments on commit de141e3

Please sign in to comment.