@dazzadev/vuetify-datatable 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -66
- package/dist/config.d.ts +2 -2
- package/dist/index.d.ts +4 -4
- package/dist/types.d.ts +2 -2
- package/package.json +39 -39
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @dazzadev/vuetify-datatable
|
|
2
2
|
|
|
3
3
|
Reusable server-side DataTable component for Vuetify 3. Includes action buttons (view, edit, delete), configurable icons, and a built-in confirmation modal.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @
|
|
8
|
+
npm install @dazzadev/vuetify-datatable
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Setup
|
|
@@ -14,8 +14,8 @@ npm install @dazza-dev/vuetify-datatable
|
|
|
14
14
|
|
|
15
15
|
```ts
|
|
16
16
|
// main.ts
|
|
17
|
-
import { createApp } from
|
|
18
|
-
import VuetifyDatatable from
|
|
17
|
+
import { createApp } from "vue";
|
|
18
|
+
import VuetifyDatatable from "@dazzadev/vuetify-datatable";
|
|
19
19
|
|
|
20
20
|
const app = createApp(App);
|
|
21
21
|
app.use(VuetifyDatatable);
|
|
@@ -24,23 +24,23 @@ app.use(VuetifyDatatable);
|
|
|
24
24
|
### Or import individually
|
|
25
25
|
|
|
26
26
|
```ts
|
|
27
|
-
import { DataTable, ConfirmationModal } from
|
|
27
|
+
import { DataTable, ConfirmationModal } from "@dazzadev/vuetify-datatable";
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
## Basic Usage
|
|
31
31
|
|
|
32
32
|
```vue
|
|
33
33
|
<template>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
34
|
+
<DataTable
|
|
35
|
+
:headers="headers"
|
|
36
|
+
:items="items"
|
|
37
|
+
:loading="loading"
|
|
38
|
+
:total-items="totalItems"
|
|
39
|
+
:search="search"
|
|
40
|
+
@onLoadData="loadData"
|
|
41
|
+
@editItem="editItem"
|
|
42
|
+
@deleteItem="deleteItem"
|
|
43
|
+
/>
|
|
44
44
|
</template>
|
|
45
45
|
```
|
|
46
46
|
|
|
@@ -68,9 +68,9 @@ Icons can be configured at 4 levels of priority (highest to lowest):
|
|
|
68
68
|
|
|
69
69
|
```vue
|
|
70
70
|
<DataTable
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
view-icon="mdi-magnify"
|
|
72
|
+
edit-icon="mdi-square-edit-outline"
|
|
73
|
+
delete-icon="mdi-delete"
|
|
74
74
|
/>
|
|
75
75
|
```
|
|
76
76
|
|
|
@@ -78,17 +78,19 @@ Icons can be configured at 4 levels of priority (highest to lowest):
|
|
|
78
78
|
|
|
79
79
|
```ts
|
|
80
80
|
// main.ts
|
|
81
|
-
import { createDataTableConfig } from
|
|
82
|
-
import { IconEye, IconPencil, IconTrash } from
|
|
81
|
+
import { createDataTableConfig } from "@dazzadev/vuetify-datatable";
|
|
82
|
+
import { IconEye, IconPencil, IconTrash } from "@tabler/icons-vue";
|
|
83
83
|
|
|
84
|
-
app.use(
|
|
84
|
+
app.use(
|
|
85
|
+
createDataTableConfig({
|
|
85
86
|
icons: {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
view: IconEye,
|
|
88
|
+
edit: IconPencil,
|
|
89
|
+
delete: IconTrash,
|
|
89
90
|
},
|
|
90
|
-
iconProps: {
|
|
91
|
-
})
|
|
91
|
+
iconProps: { "stroke-width": 1.5 },
|
|
92
|
+
}),
|
|
93
|
+
);
|
|
92
94
|
```
|
|
93
95
|
|
|
94
96
|
This works with any icon library: Tabler, FontAwesome, Heroicons, or any Vue component.
|
|
@@ -103,53 +105,53 @@ If no configuration is provided, the component uses Material Design Icons (inclu
|
|
|
103
105
|
|
|
104
106
|
## Props
|
|
105
107
|
|
|
106
|
-
| Prop
|
|
107
|
-
|
|
108
|
-
| `headers`
|
|
109
|
-
| `items`
|
|
110
|
-
| `loading`
|
|
111
|
-
| `totalItems`
|
|
112
|
-
| `itemsPerPage`
|
|
113
|
-
| `search`
|
|
114
|
-
| `itemValue`
|
|
115
|
-
| `tableClass`
|
|
116
|
-
| `showExpand`
|
|
117
|
-
| `showViewButton`
|
|
118
|
-
| `showEditButton`
|
|
119
|
-
| `showDeleteButton`
|
|
120
|
-
| `viewButtonText`
|
|
121
|
-
| `editButtonText`
|
|
122
|
-
| `deleteButtonText`
|
|
123
|
-
| `deleteModalTitle`
|
|
124
|
-
| `deleteModalMessage`
|
|
125
|
-
| `deleteModalConfirmButtonText` | `string`
|
|
126
|
-
| `deleteModalCancelButtonText`
|
|
127
|
-
| `viewIcon`
|
|
128
|
-
| `editIcon`
|
|
129
|
-
| `deleteIcon`
|
|
108
|
+
| Prop | Type | Default | Description |
|
|
109
|
+
| ------------------------------ | --------------- | -------------------------- | -------------------------------------- |
|
|
110
|
+
| `headers` | `TableHeader[]` | `[]` | Table column headers |
|
|
111
|
+
| `items` | `T[]` | `[]` | Table row data |
|
|
112
|
+
| `loading` | `boolean` | `false` | Show loading state |
|
|
113
|
+
| `totalItems` | `number` | `0` | Total items for server-side pagination |
|
|
114
|
+
| `itemsPerPage` | `number` | `10` | Items per page |
|
|
115
|
+
| `search` | `string` | — | Search query |
|
|
116
|
+
| `itemValue` | `string` | `'id'` | Unique item identifier key |
|
|
117
|
+
| `tableClass` | `string` | `'border rounded-md mt-5'` | CSS class for the table |
|
|
118
|
+
| `showExpand` | `boolean` | `false` | Show expandable rows |
|
|
119
|
+
| `showViewButton` | `boolean` | `false` | Show view action button |
|
|
120
|
+
| `showEditButton` | `boolean` | `true` | Show edit action button |
|
|
121
|
+
| `showDeleteButton` | `boolean` | `true` | Show delete action button |
|
|
122
|
+
| `viewButtonText` | `string` | — | View button tooltip text |
|
|
123
|
+
| `editButtonText` | `string` | — | Edit button tooltip text |
|
|
124
|
+
| `deleteButtonText` | `string` | — | Delete button tooltip text |
|
|
125
|
+
| `deleteModalTitle` | `string` | — | Delete confirmation modal title |
|
|
126
|
+
| `deleteModalMessage` | `string` | — | Delete confirmation modal message |
|
|
127
|
+
| `deleteModalConfirmButtonText` | `string` | — | Confirm button text |
|
|
128
|
+
| `deleteModalCancelButtonText` | `string` | — | Cancel button text |
|
|
129
|
+
| `viewIcon` | `string` | — | View icon name override |
|
|
130
|
+
| `editIcon` | `string` | — | Edit icon name override |
|
|
131
|
+
| `deleteIcon` | `string` | — | Delete icon name override |
|
|
130
132
|
|
|
131
133
|
## Events
|
|
132
134
|
|
|
133
|
-
| Event
|
|
134
|
-
|
|
135
|
+
| Event | Payload | Description |
|
|
136
|
+
| ------------ | ---------------- | ------------------------------------------------ |
|
|
135
137
|
| `onLoadData` | `LoadDataParams` | Triggered on pagination, sort, or search changes |
|
|
136
|
-
| `editItem`
|
|
137
|
-
| `deleteItem` | `T`
|
|
138
|
-
| `viewItem`
|
|
138
|
+
| `editItem` | `T` | Triggered when edit button is clicked |
|
|
139
|
+
| `deleteItem` | `T` | Triggered when delete is confirmed |
|
|
140
|
+
| `viewItem` | `T` | Triggered when view button is clicked |
|
|
139
141
|
|
|
140
142
|
## Slots
|
|
141
143
|
|
|
142
|
-
| Slot
|
|
143
|
-
|
|
144
|
-
| `item.{key}`
|
|
145
|
-
| `expanded-row`
|
|
146
|
-
| `item.data-table-expand` | Custom expand toggle button
|
|
147
|
-
| `before-actions`
|
|
148
|
-
| `after-actions`
|
|
149
|
-
| `view-icon`
|
|
150
|
-
| `edit-icon`
|
|
151
|
-
| `delete-icon`
|
|
152
|
-
| `item.tfoot`
|
|
144
|
+
| Slot | Description |
|
|
145
|
+
| ------------------------ | ------------------------------------------ |
|
|
146
|
+
| `item.{key}` | Custom render for any column by header key |
|
|
147
|
+
| `expanded-row` | Content for expandable rows |
|
|
148
|
+
| `item.data-table-expand` | Custom expand toggle button |
|
|
149
|
+
| `before-actions` | Content before action buttons |
|
|
150
|
+
| `after-actions` | Content after action buttons |
|
|
151
|
+
| `view-icon` | Custom view icon |
|
|
152
|
+
| `edit-icon` | Custom edit icon |
|
|
153
|
+
| `delete-icon` | Custom delete icon |
|
|
154
|
+
| `item.tfoot` | Table footer content |
|
|
153
155
|
|
|
154
156
|
## Peer Dependencies
|
|
155
157
|
|
package/dist/config.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { InjectionKey, App } from
|
|
2
|
-
import type { DataTableConfig } from
|
|
1
|
+
import type { InjectionKey, App } from "vue";
|
|
2
|
+
import type { DataTableConfig } from "./types";
|
|
3
3
|
export declare const DATA_TABLE_CONFIG_KEY: InjectionKey<DataTableConfig>;
|
|
4
4
|
export declare function createDataTableConfig(config: DataTableConfig): {
|
|
5
5
|
install(app: App): void;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import type { App } from
|
|
2
|
-
import DataTable from
|
|
3
|
-
import { createDataTableConfig, DATA_TABLE_CONFIG_KEY } from
|
|
1
|
+
import type { App } from "vue";
|
|
2
|
+
import DataTable from "./components/DataTable.vue";
|
|
3
|
+
import { createDataTableConfig, DATA_TABLE_CONFIG_KEY } from "./config";
|
|
4
4
|
export { DataTable };
|
|
5
5
|
export { createDataTableConfig, DATA_TABLE_CONFIG_KEY };
|
|
6
|
-
export type { DataTableConfig, DataTableIconConfig, TableHeader, SortItem, LoadDataParams } from
|
|
6
|
+
export type { DataTableConfig, DataTableIconConfig, TableHeader, SortItem, LoadDataParams, } from "./types";
|
|
7
7
|
declare const _default: {
|
|
8
8
|
install(app: App): void;
|
|
9
9
|
};
|
package/dist/types.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Component } from
|
|
1
|
+
import type { Component } from "vue";
|
|
2
2
|
export interface TableHeader {
|
|
3
3
|
key: string;
|
|
4
4
|
title?: string;
|
|
@@ -8,7 +8,7 @@ export interface TableHeader {
|
|
|
8
8
|
}
|
|
9
9
|
export interface SortItem {
|
|
10
10
|
key: string;
|
|
11
|
-
order:
|
|
11
|
+
order: "asc" | "desc";
|
|
12
12
|
}
|
|
13
13
|
export interface DataTableIconConfig {
|
|
14
14
|
view?: string | Component;
|
package/package.json
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
2
|
+
"name": "@dazzadev/vuetify-datatable",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Reusable server-side DataTable component for Vuetify 3",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/vuetify-datatable.umd.cjs",
|
|
7
|
+
"module": "./dist/vuetify-datatable.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/vuetify-datatable.js",
|
|
13
|
+
"require": "./dist/vuetify-datatable.umd.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "vite build && vue-tsc --emitDeclarationOnly",
|
|
21
|
+
"prepublishOnly": "npm run build"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"vue": "^3.3.0",
|
|
25
|
+
"vuetify": "^3.0.0"
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"debounce": "^2.0.0"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@types/node": "^25.5.2",
|
|
32
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
33
|
+
"typescript": "~5.6.0",
|
|
34
|
+
"vite": "^6.0.0",
|
|
35
|
+
"vite-plugin-dts": "^4.0.0",
|
|
36
|
+
"vue": "^3.5.0",
|
|
37
|
+
"vue-tsc": "^2.0.0",
|
|
38
|
+
"vuetify": "^3.7.0"
|
|
39
|
+
},
|
|
40
|
+
"license": "MIT"
|
|
41
41
|
}
|