13
13
Developer Playground
14
14
</h2 >
15
15
16
- <div >
17
- <p class =" mb-3" >
18
- In order to gain a comprehensive understanding of utilizing this component, we highly recommend utilizing the
19
- developer Playground. The Playground serves as a complete exemplification of how to effectively employ this
20
- component, equipped with most of the available properties. It serves as a comprehensive model that can serve as
21
- an ideal launching pad for your own project. You have the flexibility to customize the settings and observe
22
- their direct impact on the table.
23
- </p >
24
- <p >
25
- After you have forked and/or cloned the repository, run the following commands to start the Playground example:
26
- </p >
27
- </div >
28
- </v-col >
29
16
30
- <v-col cols =" 12" >
17
+ <p class =" mb-4" >
18
+ In order to gain a comprehensive understanding of utilizing this component, we highly recommend utilizing the
19
+ developer Playground. The Playground serves as a complete exemplification of how to effectively employ this
20
+ component, equipped with most of the available properties. It serves as a comprehensive model that can serve as
21
+ an ideal launching pad for your own project. You have the flexibility to customize the settings and observe
22
+ their direct impact on the table.
23
+ </p >
24
+
25
+ <h3 class =" mb-2 text-secondary" >Setup the Playground</h3 >
26
+
27
+ <CodeBlock
28
+ code =" git clone git@github.com:webdevnerdstuff/vuetify-drilldown-table.git"
29
+ :highlightjs =" codeBlockSettings.plugin === 'highlightjs'"
30
+ lang =" plain"
31
+ :prismjs =" codeBlockSettings.plugin === 'prismjs'"
32
+ :theme =" codeBlockSettings.theme"
33
+ >
34
+ <template #label >
35
+ First clone the <a
36
+ :href =" store.links.github"
37
+ target =" blank"
38
+ >repository:</a >
39
+ </template >
40
+ </CodeBlock >
41
+
31
42
<CodeBlock
32
43
code =" pnpm i && pnpm play"
33
44
:highlightjs =" codeBlockSettings.plugin === 'highlightjs'"
34
45
lang =" plain"
35
46
:prismjs =" codeBlockSettings.plugin === 'prismjs'"
36
47
:theme =" codeBlockSettings.theme"
37
- />
48
+ >
49
+ <template #label >
50
+ Next run the following command to setup the Playground:
51
+ </template >
52
+ </CodeBlock >
38
53
</v-col >
39
54
40
55
<v-col cols =" 12" >
46
61
</v-col >
47
62
48
63
<v-col cols =" 12" >
49
- <h3 class =" mb-1 " >PlaygroundPage.vue</h3 >
64
+ <h3 class =" mb-2 text-secondary " >PlaygroundPage.vue</h3 >
50
65
51
66
<p >
52
67
This file includes the import of two table components. Feel free to add and customize them as needed, but the
56
71
</v-col >
57
72
58
73
<v-col cols =" 12" >
59
- <h3 class =" mb-1 " >tableDefaults.ts</h3 >
74
+ <h3 class =" mb-2 text-secondary " >tableDefaults.ts</h3 >
60
75
61
76
<p class =" mb-3" >
62
77
This file imports two table components, which you can freely modify and customize according to your needs.
71
86
</v-col >
72
87
73
88
<v-col cols =" 12" >
74
- <h3 class =" mb-1 " >ClientTable.vue</h3 >
89
+ <h3 class =" mb-2 text-secondary " >ClientTable.vue</h3 >
75
90
76
91
<p >
77
92
This file contains the <code class =" inline-code" >VDrilldownTable</code > component and an example of how to use it
80
95
</v-col >
81
96
82
97
<v-col cols =" 12" >
83
- <h3 class =" mb-1 " >ServerTable.vue</h3 >
98
+ <h3 class =" mb-2 text-secondary " >ServerTable.vue</h3 >
84
99
85
100
<p >
86
- his file contains the <code class =" inline-code" >VDrilldownTable</code > component and an example of how to use it
101
+ This file contains the <code class =" inline-code" >VDrilldownTable</code > component and an example of how to use it
87
102
as a server side table.
88
103
</p >
89
104
</v-col >
92
107
93
108
<script setup>
94
109
import { computed , inject } from ' vue' ;
110
+ import { useCoreStore } from ' @/stores/index' ;
95
111
96
112
const props = defineProps ({
97
113
codeBlockOptions: {
@@ -103,4 +119,5 @@ const props = defineProps({
103
119
104
120
const codeBlockSettings = computed (() => props .codeBlockOptions );
105
121
const classes = inject (' classes' );
122
+ const store = useCoreStore ();
106
123
</script >
0 commit comments