Vue - Datatable customer col header template not displayed on mobile view

[tarakeshp]

Code: Select all

<DataTable :value="priceCards" :paginator="false" responsiveLayout="stack" breakpoint="960px">
                        <!-- <template #loading> Loading calls data. Please wait. </template> -->
                        <Column>
                            <template #header>
                                <i class="pi pi-check text-sm mr-1"></i>I am working
                            </template>
                            <template #body="{ data }">
                                {{ data.data.is_working_day }}
                            </template>
                        </Column>
                        <Column>
                            <template #header>
                                <i class="pi pi-calendar text-sm mr-1"></i>Day
                            </template>
                            <template #body="{ data }">
                                {{ data.price_card_day.description }}
                            </template>
                        </Column>
</DataTable>

The above code renders datatable perfectly in Desktop view but the customer header templates are vanished in Mobile view (responsive view)
DesktopView


Mobile or Responsive View

[tugce.kucukoglu]

Cannot see the images. Please provide a reproducer link.