It's been working great so far and produces the filter row. I upgraded to Laravel 10, did not touch the Vue or Datatable code at all (or the data being passed to it) and now all of a sudden the filter row is missing. It's not even in the DOM after the page loads (so not hidden either). I'm not sure why it doesn't display anymore. There are no errors in the console. The API response comes back fine and the data and headers in the DataTable populate perfectly. I'm just missing the column filters.
Anyone experience this before? Any ideas on what to try? I am completely blind as there are no errors anywhere yet it doesn't show the #filter row.
Code: Select all
<DataTable
:value="tableData"
:alwaysShowPaginator="alwaysShowPaginator"
:paginator="paginator"
:lazy="true"
:loading="loading"
:rows="rows"
:totalRecords="totalRecords"
:sortField="sort.sortBy"
:sortOrder="sort.sortDir"
ref="dt"
dataKey="id"
class="p-datatable"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
@page="onPage($event)"
@sort="onSort($event)"
responsiveLayout="scroll"
:stripedRows="true"
>
<template #empty>
<div class="text-center">No matching records found.</div>
</template>
<template #loading>
<div class="text-center">Loading data. Please wait.</div>
</template>
<Column v-if="hasBefore" bodyStyle="text-align:left" :style="beforeSlotStyle" :headerStyle="beforeSlotStyle">
<template #body="slotProps">
<slot name="before" :slotProps="slotProps"></slot>
</template>
</Column>
<Column
v-for="col of columns"
:field="col.field"
:header="col.header"
:key="col.field"
:headerStyle="col.style"
:sortable="col.sortable"
:style="col.style"
>
<template #filter>
<InputText
type="text"
v-if="col.filter === 'text'"
v-model="filters[col.field]"
class="p-column-filter"
placeholder="Search..."
@keyup="onFilter"
/>
<Dropdown
v-if="col.filter === 'select'"
v-model="filters[col.field]"
:options="col.options"
:showClear="true"
placeholder="Select..."
optionLabel="label"
optionValue="id"
@change="onSelect($event)"
>
</Dropdown>
</template>
<template #body="slotProps">
<span v-if="col.class" :class="col.class + ` bg-status-` + slotProps.data[col.field].replace(/\s+/g, '-').toLowerCase()">
<template v-if="col.currency">
<template v-if="parseInt(slotProps.data[col.field])!==0">
<div class="text-nowrap">
{{ (slotProps.data['currency'] === 'usd') ? '$' + parseFloat(slotProps.data[col.field]).toFixed(2) : '£' + parseFloat(slotProps.data[col.field]).toFixed(2) }}
</div>
</template>
<template v-else>--</template>
</template>
<template v-else>
{{ slotProps.data[col.field] }}
</template>
</span>
<span v-else>
<template v-if="col.currency">
<template v-if="parseInt(slotProps.data[col.field])!==0">
<div class="text-nowrap">
{{ (slotProps.data['currency'] === 'usd') ? '$' + parseFloat(slotProps.data[col.field]).toFixed(2) : '£' + parseFloat(slotProps.data[col.field]).toFixed(2) }}
</div>
</template>
<template v-else>--</template>
</template>
<template v-else>
{{ slotProps.data[col.field] }}
</template>
</span>
<span v-if="col.badge && slotProps.data.id === slotProps.data[col.badgeColumn]" :class="col.badgeClass">{{ col.badgeText }}</span>
</template>
</Column>
<Column v-if="hasAfter" bodyStyle="text-align:left" :style="afterSlotStyle" :headerStyle="afterSlotStyle">
<template #body="slotProps">
<slot name="after" :slotProps="slotProps"></slot>
</template>
</Column>
<template #paginatorLeft v-if="totalRecords">
<div class="p-l-sm">Showing {{ from }} to {{ to }} of {{ totalRecords }} records</div>
</template>
</DataTable>