I am using primevue and creating a datatable that has sort, search and the show/hide column functionality. The sort and search work some of the time and the show/hide does not work at all. The drop down that shows the columns to select to show/hide does not show. Below is a snippet of the code:
const searchResults = ref(mockDocumentData);
const filters1 = ref({ 'global': {value: null, matchMode: FilterMatchMode.CONTAINS}});
const columns = ref([
{ field: 'subject', header: 'TITLE' },
{ field: 'description', header: 'DESCRIPTION' },
{ field: 'dateOfclose', header: 'DATE OF Close' },
{ field: 'dateOfInterview', header: 'DATE OF INTERVIEW' },
{ field: 'Summary', header: 'SUMMARY' }
]);
const selectedColumns = ref(columns.value);
const onToggle = (val: string) => {
selectedColumns.value = columns.value.filter((col) => val.includes(col));
}
</script>
<template>
<DataTable
:value="searchResults"
responsive-layout="scroll"
v-model:filters="filters1"
selectionMode="single"
stateStorage="session"
stateKey="dt-state-demo-session"
dataKey="id"
>
<template #header>
<div style="text-align: left">
<MultiSelect
:model-value="selectedColumns"
:options="columns"
option-label="header"
placeholder="Select Columns"
style="width: 20em"
@update:model-value="onToggle" />
<span>
<i class="pi_pi-search" />
<InputText v-model="filters1['global'].value" placeholder="Global Search" />
</span>
</div>
</template>
<Column
v-for="(col, index) of selectedColumns"
:key="col.field + '_' + index"
:field="col.field"
:header="col.header"
:sortable="true"></Column>
</DataTable>
</template>
Here's the code.