Skip to content

Commit bdf18a0

Browse files
connorabbasconnorabbas
committed
hydration mismatch fix for DataTable
1 parent c6c6b86 commit bdf18a0

File tree

1 file changed

+110
-107
lines changed

1 file changed

+110
-107
lines changed

‎resources/js/pages/admin/users/Index.vue

Lines changed: 110 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AlertCircle, EllipsisVertical, FunnelX, Pencil } from 'lucide-vue-next'
55
import { format, parseISO } from 'date-fns';
66
import { useLazyDataTable } from '@/composables/useLazyDataTable';
77
import AppLayout from '@/layouts/AppLayout.vue';
8+
import ClientOnly from '@/components/ClientOnly.vue';
89
import Menu from '@/components/primevue/menu/Menu.vue';
910
1011
const props = defineProps({
@@ -88,115 +89,117 @@ const {
8889
:model="userContextMenuItems"
8990
popup
9091
/>
91-
<DataTable
92-
ref="dataTable"
93-
v-model:filters="filters"
94-
lazy
95-
paginator
96-
removableSort
97-
resizableColumns
98-
:loading="processing"
99-
:value="props.users.data"
100-
:totalRecords="props.users.total"
101-
:sortField="sorting.field"
102-
:sortOrder="sorting.order"
103-
:rows="props.users.per_page"
104-
:rowsPerPageOptions="[10, 20, 50, 100]"
105-
:first="firstDatasetIndex"
106-
columnResizeMode="fit"
107-
filterDisplay="row"
108-
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
109-
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
110-
@filter="filter"
111-
@sort="sort"
112-
@page="paginate"
113-
>
114-
<template #empty>
115-
<div class="flex justify-center">
116-
<Message
117-
severity="warn"
118-
class="grow text-center flex justify-center"
119-
>
120-
<template #icon>
121-
<AlertCircle />
122-
</template>
123-
No Users found.
124-
</Message>
125-
</div>
126-
</template>
127-
<Column
128-
header="Name"
129-
field="name"
130-
sortable
131-
>
132-
<template #filter="{ filterModel, filterCallback }">
133-
<InputText
134-
v-model="filterModel.value"
135-
type="text"
136-
placeholder="Search by name"
137-
fluid
138-
@input="debounceInputFilter(filterCallback)"
139-
/>
140-
</template>
141-
<template #body="{ data }">
142-
{{ data.name }}
143-
</template>
144-
</Column>
145-
<Column
146-
header="Email"
147-
field="email"
148-
sortable
92+
<ClientOnly>
93+
<DataTable
94+
ref="dataTable"
95+
v-model:filters="filters"
96+
lazy
97+
paginator
98+
removableSort
99+
resizableColumns
100+
:loading="processing"
101+
:value="props.users.data"
102+
:totalRecords="props.users.total"
103+
:sortField="sorting.field"
104+
:sortOrder="sorting.order"
105+
:rows="props.users.per_page"
106+
:rowsPerPageOptions="[10, 20, 50, 100]"
107+
:first="firstDatasetIndex"
108+
columnResizeMode="fit"
109+
filterDisplay="row"
110+
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
111+
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
112+
@filter="filter"
113+
@sort="sort"
114+
@page="paginate"
149115
>
150-
<template #filter="{ filterModel, filterCallback }">
151-
<InputText
152-
v-model="filterModel.value"
153-
type="text"
154-
placeholder="Search by Email"
155-
fluid
156-
@input="debounceInputFilter(filterCallback)"
157-
/>
158-
</template>
159-
<template #body="{ data }">
160-
{{ data.email }}
161-
</template>
162-
</Column>
163-
<Column
164-
header="Created"
165-
field="created_at"
166-
dataType="date"
167-
sortable
168-
>
169-
<template #filter="{ filterModel, filterCallback }">
170-
<DatePicker
171-
v-model="filterModel.value"
172-
dateFormat="mm/dd/yy"
173-
placeholder="mm/dd/yyyy"
174-
showButtonBar
175-
fluid
176-
@update:modelValue="filterCallback"
177-
/>
178-
</template>
179-
<template #body="{ data }">
180-
{{ format(parseISO(data.created_at), 'MM/dd/yyyy') }}
181-
</template>
182-
</Column>
183-
<Column header="Action">
184-
<template #body="{ data }">
185-
<Button
186-
v-tooltip.top="'Show User Actions'"
187-
type="button"
188-
severity="secondary"
189-
rounded
190-
text
191-
@click="toggleUserContextMenu($event, data)"
192-
>
193-
<template #icon>
194-
<EllipsisVertical class="size-5!" />
195-
</template>
196-
</Button>
116+
<template #empty>
117+
<div class="flex justify-center">
118+
<Message
119+
severity="warn"
120+
class="grow text-center flex justify-center"
121+
>
122+
<template #icon>
123+
<AlertCircle />
124+
</template>
125+
No Users found.
126+
</Message>
127+
</div>
197128
</template>
198-
</Column>
199-
</DataTable>
129+
<Column
130+
header="Name"
131+
field="name"
132+
sortable
133+
>
134+
<template #filter="{ filterModel, filterCallback }">
135+
<InputText
136+
v-model="filterModel.value"
137+
type="text"
138+
placeholder="Search by name"
139+
fluid
140+
@input="debounceInputFilter(filterCallback)"
141+
/>
142+
</template>
143+
<template #body="{ data }">
144+
{{ data.name }}
145+
</template>
146+
</Column>
147+
<Column
148+
header="Email"
149+
field="email"
150+
sortable
151+
>
152+
<template #filter="{ filterModel, filterCallback }">
153+
<InputText
154+
v-model="filterModel.value"
155+
type="text"
156+
placeholder="Search by Email"
157+
fluid
158+
@input="debounceInputFilter(filterCallback)"
159+
/>
160+
</template>
161+
<template #body="{ data }">
162+
{{ data.email }}
163+
</template>
164+
</Column>
165+
<Column
166+
header="Created"
167+
field="created_at"
168+
dataType="date"
169+
sortable
170+
>
171+
<template #filter="{ filterModel, filterCallback }">
172+
<DatePicker
173+
v-model="filterModel.value"
174+
dateFormat="mm/dd/yy"
175+
placeholder="mm/dd/yyyy"
176+
showButtonBar
177+
fluid
178+
@update:modelValue="filterCallback"
179+
/>
180+
</template>
181+
<template #body="{ data }">
182+
{{ format(parseISO(data.created_at), 'MM/dd/yyyy') }}
183+
</template>
184+
</Column>
185+
<Column header="Action">
186+
<template #body="{ data }">
187+
<Button
188+
v-tooltip.top="'Show User Actions'"
189+
type="button"
190+
severity="secondary"
191+
rounded
192+
text
193+
@click="toggleUserContextMenu($event, data)"
194+
>
195+
<template #icon>
196+
<EllipsisVertical class="size-5!" />
197+
</template>
198+
</Button>
199+
</template>
200+
</Column>
201+
</DataTable>
202+
</ClientOnly>
200203
</template>
201204
</Card>
202205
</AppLayout>

0 commit comments

Comments
 (0)