Skip to content

Commit 8223782

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Updating options
1 parent e427b75 commit 8223782

File tree

3 files changed

+161
-6
lines changed

3 files changed

+161
-6
lines changed

‎src/playground/configs/templates/ClientTable.vue

Lines changed: 156 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<v-col cols="12">
99
<VDrilldownTable
10-
:color="tableSettings.color"
10+
v-model="selected"
1111
:colors="tableSettings.colors"
1212
:density="tableSettings.density"
1313
:drilldown-key="tableSettings.drilldownKey"
@@ -19,13 +19,13 @@
1919
:hover="tableSettings.hover"
2020
:item-children-key="tableSettings.itemChildrenKey"
2121
:item-props="tableSettings.itemProps"
22+
:item-selectable="tableSettings.itemSelectable"
2223
:items="tableSettings.items"
2324
:items-length="tableSettings.itemsLength"
2425
:items-per-page="tableSettings.itemsPerPage"
2526
:items-per-page-options="tableSettings.itemsPerPageOptions"
2627
:items-per-page-text="tableSettings.itemsPerPageText"
2728
:last-icon="tableSettings.lastIcon"
28-
:last-page-label="tableSettings.lastPageLabel"
2929
:level="tableSettings.level"
3030
:levels="tableSettings.levels"
3131
:loader-height="tableSettings.loaderHeight"
@@ -43,19 +43,154 @@
4343
:prev-page-label="tableSettings.prevPageLabel"
4444
:search-debounce="tableSettings.searchDebounce"
4545
:search-max-wait="tableSettings.searchMaxWait"
46+
:select-strategy="tableSettings.selectStrategy"
4647
:server="tableSettings.server"
4748
:show-current-page="tableSettings.showCurrentPage"
4849
:show-expand="tableSettings.showExpand"
4950
:show-footer-row="tableSettings.showFooterRow"
5051
:show-search="tableSettings.showSearch"
5152
:show-select="tableSettings.showSelect"
5253
:skelton-type="tableSettings.skeltonType"
54+
:sort-asc-icon="tableSettings.sortAscIcon"
5355
:sort-by="tableSettings.sortBy"
54-
:sort-icon-asc="tableSettings.sortAscIcon"
5556
:tag="tableSettings.tag"
5657
:theme="tableSettings.theme"
5758
@update:drilldown="fetchClientData($event)"
5859
>
60+
<!-- <template #loading>
61+
[loading Slot]
62+
</template> -->
63+
64+
<!-- <template #no-data>
65+
[no-data Slot]
66+
</template> -->
67+
68+
<!-- <template #top>
69+
[top Slot]
70+
</template> -->
71+
72+
<!-- <template
73+
v-if="isServerSide"
74+
#[`top.left`]
75+
>
76+
<v-col cols="4">
77+
<v-text-field
78+
v-model="tableSettings.search"
79+
class="mt-0 pt-0"
80+
density="compact"
81+
hide-details
82+
label="Search"
83+
single-line
84+
variant="outlined"
85+
></v-text-field>
86+
</v-col>
87+
</template> -->
88+
89+
<!-- <template #[`top.right`]="props">
90+
<v-col
91+
v-if="props.level === 1"
92+
class="d-flex align-center justify-end"
93+
>
94+
{{ props.search }}
95+
<v-btn
96+
class="ms-2"
97+
color="primary"
98+
@click="props.toggleSelectAll()"
99+
>Toggle Select</v-btn>
100+
<v-btn
101+
class="ms-2"
102+
color="primary"
103+
@click="props.selectAll(true)"
104+
>Select All</v-btn>
105+
<v-btn
106+
class="ms-2"
107+
color="primary"
108+
@click="props.selectAll(false)"
109+
>De-Select All</v-btn>
110+
</v-col>
111+
</template> -->
112+
113+
<!-- <template #[`header.data-table-select`]>
114+
<div class="d-flex justify-center">
115+
<v-icon>mdi mdi-vuetify</v-icon>
116+
</div>
117+
</template> -->
118+
119+
<!-- <template #[`header.sortIcon`]>
120+
<fa-icon icon="fa-solid fa-arrow-up"></fa-icon>
121+
</template> -->
122+
123+
<!-- <template #[`header.id`]="{ column }">
124+
[header cell Slot]: slot {{ column.title }}
125+
</template> -->
126+
127+
<!-- <template #thead="props">
128+
<thead>
129+
<tr>
130+
<td
131+
v-for="column in props.columns"
132+
:key="column"
133+
>
134+
{{ column.title }}
135+
</td>
136+
</tr>
137+
</thead>
138+
</template> -->
139+
140+
<!-- <template #body>
141+
[body Slot]
142+
</template> -->
143+
144+
<!-- <template #tbody="{ props }">
145+
<tbody>
146+
<tr>
147+
<td :colspan="Object.keys(tableSettings.headers.users).length">
148+
[tbody Slot] {{ props }}
149+
</td>
150+
</tr>
151+
</tbody>
152+
</template> -->
153+
154+
<!-- <template #[`item.id`]="{ item }">
155+
[item cell Slot]: {{ item.raw.id }}
156+
</template> -->
157+
158+
<!-- <template #[`item.data-table-select`]>
159+
<v-icon>mdi mdi-vuetify</v-icon>
160+
</template> -->
161+
162+
<!-- <template #[`item.data-table-expand`]>
163+
<fa-icon icon="fa-solid fa-chevron-down"></fa-icon>
164+
</template> -->
165+
166+
<!-- <template #tfoot="props">
167+
<tfoot>
168+
<tr>
169+
<td
170+
v-for="column in props.columns"
171+
:key="column"
172+
>
173+
{{ column.title }}
174+
</td>
175+
</tr>
176+
</tfoot>
177+
</template> -->
178+
179+
<!-- <template #[`tfoot.name`]>
180+
<td>
181+
[tfoot Slot]
182+
</td>
183+
</template> -->
184+
185+
<!-- <template #bottom>
186+
[bottom Slot]
187+
</template> -->
188+
189+
<!-- <template #[`footer.prepend`]>
190+
<div class="me-2">
191+
[footer.prepend Slot]
192+
</div>
193+
</template> -->
59194
</VDrilldownTable>
60195
</v-col>
61196
</template>
@@ -84,6 +219,7 @@ const props = defineProps({
84219
},
85220
});
86221
222+
const selected = ref([]);
87223
88224
const classes = inject('classes');
89225
const tableSettings = ref({ ...props.settings, ...props.colors });
@@ -144,6 +280,10 @@ const headers = {
144280
},
145281
],
146282
users: [
283+
// {
284+
// key: 'data-table-select',
285+
// title: '',
286+
// },
147287
{
148288
align: 'start',
149289
key: 'id',
@@ -153,11 +293,17 @@ const headers = {
153293
{
154294
align: 'start',
155295
key: 'name',
296+
renderer(value) {
297+
return value;
298+
},
156299
title: 'Name',
157300
},
158301
{
159302
align: 'start',
160303
key: 'email',
304+
renderItem(value) {
305+
return `<a href="mailto:${value}">${value}</a>`;
306+
},
161307
title: 'Email',
162308
},
163309
{
@@ -221,9 +367,16 @@ const footers = {
221367
},
222368
],
223369
users: [
370+
// {
371+
// key: 'data-table-select',
372+
// title: '',
373+
// },
224374
{
225375
align: 'start',
226376
key: 'id',
377+
renderFooter() {
378+
return '&nbsp;';
379+
},
227380
title: 'User ID',
228381
width: 350,
229382
},

‎src/playground/configs/templates/ServerTable.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<v-col cols="12">
99
<VDrilldownTable
10-
:color="tableSettings.color"
10+
v-model="selected"
1111
:colors="tableSettings.colors"
1212
:density="tableSettings.density"
1313
:drilldown-key="tableSettings.drilldownKey"
@@ -19,13 +19,13 @@
1919
:hover="tableSettings.hover"
2020
:item-children-key="tableSettings.itemChildrenKey"
2121
:item-props="tableSettings.itemProps"
22+
:item-selectable="tableSettings.itemSelectable"
2223
:items="tableSettings.items"
2324
:items-length="tableSettings.itemsLength"
2425
:items-per-page="tableSettings.itemsPerPage"
2526
:items-per-page-options="tableSettings.itemsPerPageOptions"
2627
:items-per-page-text="tableSettings.itemsPerPageText"
2728
:last-icon="tableSettings.lastIcon"
28-
:last-page-label="tableSettings.lastPageLabel"
2929
:level="tableSettings.level"
3030
:levels="tableSettings.levels"
3131
:loader-height="tableSettings.loaderHeight"
@@ -43,6 +43,7 @@
4343
:prev-page-label="tableSettings.prevPageLabel"
4444
:search-debounce="tableSettings.searchDebounce"
4545
:search-max-wait="tableSettings.searchMaxWait"
46+
:select-strategy="tableSettings.selectStrategy"
4647
:server="tableSettings.server"
4748
:show-current-page="tableSettings.showCurrentPage"
4849
:show-expand="tableSettings.showExpand"
@@ -73,6 +74,7 @@ const props = defineProps({
7374
},
7475
});
7576
77+
const selected = ref([]);
7678
7779
const classes = inject('classes');
7880
const tableSettings = ref({ ...props.settings });

‎src/playground/configs/templates/tableDefaults.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default {
3232
},
3333
// customFilter: undefined, // ? Needs Testing
3434
// customKeyFilter: undefined, // ? Needs Testing
35-
density: 'compact',
35+
density: 'default',
3636
drilldownKey: 'id',
3737
elevation: 5,
3838
// expanded: () => [], // ? Needs Testing

0 commit comments

Comments
 (0)