ColToggle DataTable showing as blank

[ilatine]

I am trying to use the PrimeVue ColToggle DataTable but unsuccessful. I copied the code and tweaked it. I am using the Vue 3 Script Setup composition api with TypeScript. My table renders but with no values.

Code: Select all

<script setup lang="ts">
  import { ref } from 'vue';
  import DataTable from 'primevue/datatable';
  import Column from 'primevue/column';
  import TabPanel from 'primevue/tabpanel';
  import { mockDocumentData } from '../../mockData';

  const searchResults = ref(mockDocumentData);

  const columns = ref([
    { field: 'Subject', header: 'SUBJECT' },
    { field: 'description', header: 'DESCRIPTION' },
    { field: 'dateOfInformation', header: 'DATE OF INFORMATION' },
    { field: 'assetchoice', header: 'ASSET CHOICE' },
    { field: 'summary', header: 'SUMMARY' }
  ]);

  let selectedColumns = ref(columns.value);
  function onToggle(value: any) {
    selectedColumns.value = columns.value.filter((col) => value.includes(col));
  }
</script>

<template>
  <TabView>
    <TabPanel>
      <DataTable :value="searchResults" responsive-layout="scroll">
        <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" />
          </div>
        </template>
        <Column v-for="(col, index) of selectedColumns" :key="col.field + '_' + index" :field="col.field" :header="col.header"></Column>
      </DataTable>
    </TabPanel>
  </TabView>
</template>

<style lang="scss" scoped></style>

Here's what my data looks like kept in a TS file:

Code: Select all

export const mockData = {
  subject: 'ipsum dolor sit amet, consectetur adipiscing eli',
  description: 'ipsum dolor sit amet, consectetur adipiscing eli',
  dateOfInformation: '8/21/22',
  summary:'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Amet tellus cras adipiscing enim eu turpis egestas pretium'
};

The only squiggly line I get is on the :value attribute of the DataTable.
Any ideas of why my data is not rendering in my cells?

[tugce.kucukoglu]

mockData must be an array of objects.