chore: use global filter to hide empty rows

components/data-table/data-table-filter-columns.vue

@@ -36,8 +36,10 @@ function toggleCategory(category: Column<never>) {
 			targetVisibility = true;
 	}
 	category.columns.forEach((c) => {
-		c.toggleVisibility(targetVisibility);
-		if (!targetVisibility) c.setFilterValue([]);
+		if (c.getIsVisible() !== targetVisibility) {
+			c.setFilterValue([]);
+			c.toggleVisibility(targetVisibility);
+		}
 	});
 }
 function getAllColumnsVisibilityState() {
@@ -56,8 +58,9 @@ function toggleAllCategories() {
 		default:
 			targetVisibility = true;
 	}
+
+	if (!targetVisibility) props.table.resetColumnFilters(true);
 	props.table.toggleAllColumnsVisible(targetVisibility);
-	if (!targetVisibility) props.table.resetColumnFilters();
 }
 
 const isCollapsibleOpen = ref(columns.value.map(() => false));

components/data-table/data-table.vue

@@ -2,6 +2,7 @@
 import {
 	type ColumnDef,
 	type ColumnFiltersState,
+	type FilterFn,
 	FlexRender,
 	getCoreRowModel,
 	getFacetedRowModel,
@@ -26,6 +27,7 @@ interface Props {
 	minHeaderDepth?: number;
 	enableFilterOnColumns?: boolean;
 	initialColumnVisibility?: Record<string, boolean>;
+	globalFilterFn?: FilterFn<never>;
 }
 
 const props = defineProps<Props>();
@@ -88,6 +90,7 @@ const table = useVueTable({
 	getFilteredRowModel: getFilteredRowModel(),
 	getFacetedRowModel: getFacetedRowModel(),
 	getFacetedUniqueValues: customFacetedUniqueValues,
+	globalFilterFn: props.globalFilterFn,
 });
 
 onMounted(() => {

components/geojson-table-window-content.vue

@@ -3,6 +3,7 @@ import {
 	type CellContext,
 	type ColumnDef,
 	createColumnHelper,
+	type Row,
 	type Table,
 } from "@tanstack/vue-table";
 
@@ -47,11 +48,8 @@ const columns = computed(() => {
 										);
 									},
 									filterFn: (row, columnId, filterValue) => {
-										if (
-											!row.getValue(columnId) ||
-											(row.getValue(columnId) as Array<string>).length === 0
-										) {
-											return false;
+										if (!row.getVisibleCells().find((cell) => cell.column.id === columnId)) {
+											return true;
 										}
 										if (Object.keys(filterValue).length === 0) return true;
 										const filter = Object.values(filterValue).some((val) =>
@@ -82,10 +80,11 @@ const columns = computed(() => {
 											cell.row.original.properties[cell.column.columnDef.id!],
 										);
 									},
-									accessorFn: (cell: FeatureType) =>
-										cell.properties[String(Object.keys(heading)[0])],
+									accessorFn: (cell: FeatureType) => {
+										return cell.properties[String(Object.keys(heading)[0])];
+									},
 									enableColumnFilter: false,
-									enableGlobalFilter: false,
+									enableGlobalFilter: true,
 								};
 							}),
 					});
@@ -101,7 +100,20 @@ const columnVisibility = computed(() => {
 	);
 });
 
+function filterEmptyRows(row: Row<never>) {
+	const hidableVisibleCells = row.getVisibleCells().filter((cell) => cell.column.getCanHide());
+	if (
+		hidableVisibleCells.length > 0 &&
+		hidableVisibleCells.every(
+			(cell) => !cell.getValue() || (cell.getValue() as string).length === 0,
+		)
+	)
+		return false;
+	return true;
+}
+
 function applyGlobalFilter(table: Table<FeatureType>) {
+	// re-apply global filter to remove empty lines from the table
 	table.resetGlobalFilter(true);
 	table.setGlobalFilter(true);
 }
@@ -154,6 +166,7 @@ function registerTable(table: Table<FeatureType>) {
 			v-if="!isPending"
 			:columns="columns as unknown as Array<ColumnDef<never>>"
 			:enable-filter-on-columns="true"
+			:global-filter-fn="filterEmptyRows"
 			:initial-column-visibility="columnVisibility"
 			:items="fetchedData.get(url)?.features as Array<never>"
 			:min-header-depth="1"