Add custom wrapper support for helper components on DataTable and TreeTable

[mertsincan]

Currently, primevue components such as DataTable need a helper component within themselves. These helper components must be directly child components. But sometimes users may need to wrap them with a custom wrapper instead of using them directly as children. Exp;

<DataTable :value="products" tableStyle="min-width: 50rem">
     <MyColumn key="uid_1" field="code" header="Code"></MyColumn>
     <MyColumnWrapper key="uid_2" :fields="['name', 'category']"></MyColumnWrapper>
     <Column field="quantity" header="Quantity"></Column>
</DataTable>

🚨 Note: Users must use a key prop with a unique value to render helper components in the correct order in the custom wrapper components.

---

Affected Components;

	Components	Helper Components
✅	DataTable	Column, Row, ColumnGroup
✅	TreeTable	Column

[moyoakala]

@mertsincan, would this also work for DataTables with expandable rows?

<template>
  <CustomDataTable 
    v-model:expandedRows="expandedRows"
    :value="products"
    data-key="name"
  >
    <Column expander />
    <CustomColumn field="price" header="Price" sortable>
      <template #body="product">
        {{ product.data.price }}
      </template>
    </CustomColumn >
    <template #expansion="subrow">
      <CustomDataTable :value="subrow.data.sub_rows" data-key="name">
        <CustomColumn  field="price" header="Price">
          <template #body="subrow">
            {{ subrow.data.price }}
          </template>
        </CustomColumn >
      </CustomDataTable >
    </template>
  </CustomDataTable >
</template>

[mertsincan]

Hi @moyoakala yes, you can use it.

[hackjackhack]

Why is this commit reverted may I ask?

[mertsincan]

I only reverted my fixes for TabView and Accordion. Since they do not contain default slots, it was not technically possible to establish a structure like DataTable and TreeTable. We plan to make improvements to them in future versions. Currently, you can create custom wrapper components for DataTable and TreeTable.

Best Regards,

[hackjackhack]

Cool. I was trying to create custom dynamic async tabpanel, which are loaded based on runtime conditions without v-if.Will the future improvement of tabview cover this?

[fhnaumann]

I only reverted my fixes for TabView and Accordion. Since they do not contain default slots, it was not technically possible to establish a structure like DataTable and TreeTable. We plan to make improvements to them in future versions. Currently, you can create custom wrapper components for DataTable and TreeTable.

Best Regards,

Do you know a way to create custom wrapper components for Accordion (including AccordionTab)? Was really looking forward to that.

[mertsincan]

Unfortunately, there is no way for now :/ I plan to make improvements to them in future versions.

[oliviermattei]

I'm trying a similar approach to create a custom multiple selection column. But nothing is rendered

TriStateSelectionColumn.vue

<script lang="ts" setup>
const emits = defineEmits(['select'])
const selectionMode = ref(null)
</script>

<template>
  <Column
    :pt="{
      headerCheckbox: {
        class: 'hidden',
      },
    }"
    header-style="width: 3rem"
    selection-mode="multiple"
  >
    <template #header>
      <TriStateCheckbox
        v-model="selectionMode"
        @update:model-value="emits('select', $event)"
      >
        <template #checkicon>
          <Icon
            color="white"
            icon="minus"
          />
        </template>
        <template #uncheckicon>
          <Icon
            color="white"
            icon="check"
          />
        </template>
      </TriStateCheckbox>
    </template>
  </Column>
</template>

<DataTable 
    :selection="selectedValues"
    :value="values"
>
    <TriStateSelectionColumn
         key="uid"
         @select="onSelectChange"
     />
</Datatable>

but nothing is rendered, Have you and idea ?

[nikolay-kornev]

@mertsincan Could you please provide example of working wrapper component for Column? I cannot make it render, no matter what I do. In my specific case, I am creating a custom UI library. I wrap PrimeVue components as described here - https://tailwind.primevue.org/guides/building-ui-library/.

I have wrapped DataTable, and Column components. When I try using them, all I see is pagination. Columns are not rendering.

[luizottavioc]

I'm having the same problem. My custom columns are not rendered in the DataTable component