Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

97
Vistas
Primevue MultiSelect in DataTable not rendering correctly

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.

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.