diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue index 3c2785845..4000c592e 100644 --- a/frontend/src/components/DataTable.vue +++ b/frontend/src/components/DataTable.vue @@ -49,6 +49,7 @@ const updatePage = (index: number) => { const columnSpan = computed(() => (columns.value.length + (allowMultiSelect.value ? 1 : 0))); const selectedRows = ref([]); const mutableDataList = ref(null); +const selectedFilters = {}; const clearSelectedRows = () => { selectedRows.value = []; @@ -118,8 +119,24 @@ const onFieldSelect = (evt: Event, row: TableDataRow) => { emit('fieldSelect', selectedRows.value); }; -const onColumnFilter = (evt: Event, filter: TableFilter) => { - mutableDataList.value = filter.fn((evt as HTMLInputElementEvent).target.value, dataList.value); +const onColumnFilter = (evt: Event, eventFilter: TableFilter, filters: TableFilter[]) => { + mutableDataList.value = dataList.value; + selectedFilters[eventFilter.name] = (evt as HTMLInputElementEvent).target.value; + + // We need to loop through all filters to re-apply them on filter change + filters.forEach((filter: TableFilter) => { + if (mutableDataList.value === null || !(filter.name in selectedFilters)) { + return; + } + + // The normal convention is to return null if we don't want to filter + // So only apply the results if we're not null. + const filteredDataList = filter.fn(selectedFilters[filter.name], mutableDataList.value); + if (filteredDataList !== null) { + mutableDataList.value = filteredDataList; + } + }); + if (mutableDataList.value === dataList.value) { mutableDataList.value = null; } @@ -136,7 +153,7 @@ const onColumnFilter = (evt: Event, filter: TableFilter) => {