Skip to content

Commit e13ef4f

Browse files
uwlauwla
committed
chore: add SelectableCell to DemoPage
1 parent 9ae19ef commit e13ef4f

File tree

3 files changed

+117
-82
lines changed

3 files changed

+117
-82
lines changed

‎src/demo/App.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,8 @@ form select {
5353
display: block;
5454
padding: 0.75em;
5555
}
56+
57+
.btn-group {
58+
display: flex;
59+
gap: .5em;
60+
}

‎src/demo/App.ts‎

Lines changed: 102 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ type User = {
1313
email_verified_at: String;
1414
fruits: String[];
1515
gender: "Male" | "Female";
16-
id: Number;
16+
id: number;
1717
info: String;
1818
job: String;
1919
name: String;
@@ -31,88 +31,104 @@ type User = {
3131

3232
type UserField = keyof User;
3333

34+
const params1 = {
35+
sortingMode: "single",
36+
columns: [
37+
{
38+
title: ".",
39+
component: "vdt-cell-selectable",
40+
},
41+
{ key: "name" },
42+
{ key: "email", title: "Email address" },
43+
{ key: "job" },
44+
{
45+
cssClass: "minwidth",
46+
component: "vdt-actions",
47+
componentProps: { actions: ["view"] },
48+
title: "view",
49+
},
50+
{
51+
cssClass: "minwidth",
52+
component: "vdt-actions",
53+
componentProps: { actions: ["edit"] },
54+
title: "edit",
55+
},
56+
{
57+
cssClass: "minwidth",
58+
component: "vdt-actions",
59+
componentProps: { actions: ["delete"] },
60+
title: "delete",
61+
},
62+
],
63+
vKey: "id",
64+
};
65+
66+
const params2 = {
67+
columns: [
68+
{ key: "name", editable: true },
69+
{ key: "email", editable: true },
70+
{ key: "job", editable: true },
71+
{
72+
title: "actions",
73+
cssClass: "minwidth",
74+
component: "vdt-actions",
75+
componentProps: { actions: ["view", "delete"] },
76+
},
77+
],
78+
vKey: "id",
79+
};
80+
81+
const params3 = {
82+
defaultPerPage: 25,
83+
defaultColumn: { sortable: false },
84+
columns: [
85+
{ key: "name" },
86+
{
87+
title: "Top 3 Favorite fruits",
88+
component: "CellList",
89+
searchFunction: (data: any, search: String) => {
90+
return data.fruits.some((f: String) =>
91+
f.toLowerCase().includes(search.toLowerCase())
92+
);
93+
},
94+
searchable: true,
95+
},
96+
{
97+
title: "Image",
98+
component: "CellImage",
99+
cssClass: "minwidth",
100+
},
101+
],
102+
vKey: "id",
103+
};
104+
34105
export default {
35106
data() {
107+
36108
return {
109+
title: "UPDATE USER",
110+
37111
// user which will be edited or added
38112
user: {} as User,
39-
title: "UPDATE USER",
40113

41114
// data for both tables
42115
data: users as User[],
43116

44-
//
117+
// selected users
118+
selected: [] as User[],
119+
120+
// is user being shown/edited?
45121
userView: false,
46122
userEdit: false,
47123

48124
// parameters for the first table
49-
params1: {
50-
sortingMode: "single",
51-
columns: [
52-
{ key: "name" },
53-
{ key: "email", title: "Email address" },
54-
{ key: "job" },
55-
{
56-
cssClass: "minwidth",
57-
component: "vdt-actions",
58-
componentProps: { actions: ["view"] },
59-
title: "view",
60-
},
61-
{
62-
cssClass: "minwidth",
63-
component: "vdt-actions",
64-
componentProps: { actions: ["edit"] },
65-
title: "edit",
66-
},
67-
{
68-
cssClass: "minwidth",
69-
component: "vdt-actions",
70-
componentProps: { actions: ["delete"] },
71-
title: "delete",
72-
},
73-
],
74-
},
125+
params1: params1,
75126

76127
// parameters for the second table
77-
params2: {
78-
columns: [
79-
{ key: "name", editable: true },
80-
{ key: "email", editable: true },
81-
{ key: "job", editable: true },
82-
{
83-
title: "actions",
84-
cssClass: "minwidth",
85-
component: "vdt-actions",
86-
componentProps: { actions: ["view", "delete"] },
87-
},
88-
],
89-
},
128+
params2: params2,
90129

91130
// parameters for the third table
92-
params3: {
93-
defaultPerPage: 25,
94-
defaultColumn: {
95-
sortable: false,
96-
},
97-
columns: [
98-
{ key: "name" },
99-
{
100-
title: "Top 3 Favorite fruits",
101-
component: "CellList",
102-
searchFunction: (data: any, search: String) => {
103-
return data.fruits.some((f: String) =>
104-
f.toLowerCase().includes(search.toLowerCase())
105-
);
106-
},
107-
searchable: true,
108-
},
109-
{
110-
title: "Image",
111-
component: "CellImage",
112-
cssClass: "minwidth",
113-
},
114-
],
115-
},
131+
params3: params3,
116132
};
117133
},
118134

@@ -139,6 +155,10 @@ export default {
139155
case "updateCell":
140156
let { key, value } = payload;
141157
this.updateUserField(user, key, value);
158+
break;
159+
case "select":
160+
let { selected } = payload;
161+
this.updateSelection(user, selected);
142162
}
143163
},
144164
addUser(user: User) {
@@ -147,13 +167,26 @@ export default {
147167
this.showSuccessMessage("User added!");
148168
},
149169
deleteUser(user: User) {
150-
this.data = this.data.filter((u) => u.id != user.id);
170+
this.data = this.data.filter((u: User) => u.id != user.id);
171+
},
172+
deleteSelected() {
173+
const ids = {};
174+
this.selected.forEach((u: User) => ids[u.id] = true);
175+
this.data = this.data.filter((u: User) => ids[u.id] !== true);
176+
this.selected = [];
151177
},
152178
updateUser(user: User) {
153-
let index = this.data.findIndex((u) => u.id == user.id);
179+
let index = this.data.findIndex((u: User) => u.id == user.id);
154180
this.data.splice(index, 1, user);
155181
this.showSuccessMessage("User updated!");
156182
},
183+
updateSelection(user: User, selected: boolean) {
184+
if (selected) {
185+
this.selected.push(user);
186+
} else {
187+
this.selected = this.selected.filter((u: User) => u.id != user.id);
188+
}
189+
},
157190
showUser(user: User) {
158191
this.user = { ...user };
159192
this.title = user.name;
@@ -209,4 +242,4 @@ export default {
209242
else this.addUser(user);
210243
},
211244
},
212-
};
245+
};

‎src/demo/App.vue‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,26 @@
22
<main>
33
<h1>VUE DATA TABLE DEMO</h1>
44

5-
<p>
6-
This is a sample dashboard using Vue Data Table.
7-
You can add, edit, delete and view users.
8-
</p>
9-
<p>
10-
There are three tables to showcase VDT's functionalities.
11-
</p>
5+
<p>This is a sample dashboard using Vue Data Table. You can add, edit, delete and view users.</p>
6+
<p>There are three tables to showcase VDT's functionalities.</p>
127

13-
<Button @click="showCreateForm()">
14-
ADD USER
15-
</Button>
8+
<div class="btn-group">
9+
<Button @click="showCreateForm()">
10+
ADD USER
11+
</Button>
12+
<Button @click="deleteSelected()" severity="danger">
13+
DELETE SELECTED
14+
</Button>
15+
</div>
1616

17-
<!-- TABLE 1 -->
1817
<h2>TABLE 1</h2>
1918
<p>This table shows a generic dashboard.</p>
2019
<vue-data-table v-bind="params1" :data="data" @userEvent="handleUserEvent" />
2120

22-
<!-- TABLE 2 -->
2321
<h2>TABLE 2</h2>
2422
<p>This table allows editing cells.</p>
2523
<vue-data-table v-bind="params2" :data="data" @userEvent="handleUserEvent" />
2624

27-
<!-- TABLE 3 -->
2825
<h2>TABLE 3</h2>
2926
<p>This table shows lists and images.</p>
3027
<vue-data-table v-bind="params3" :data="data" @userEvent="handleUserEvent" />

0 commit comments

Comments
 (0)