data-table.vue
2.47 KB
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<script setup>
import * as demoCode from '@/views/demos/forms/tables/data-table/demoCodeDataTable'
</script>
<template>
<VRow>
<VCol cols="12">
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
no-padding
>
<DemoDataTableBasic />
</AppCardCode>
</VCol>
<VCol>
<!-- 👉 Dense -->
<AppCardCode
title="Dense"
:code="demoCode.dense"
no-padding
>
<DemoDataTableDense />
</AppCardCode>
</VCol>
<!-- 👉 Table Cell Slot -->
<VCol cols="12">
<AppCardCode
title="Cell Slot"
:code="demoCode.cellSlot"
no-padding
>
<DemoDataTableCellSlot />
</AppCardCode>
</VCol>
<!-- 👉 Table Row selection -->
<VCol cols="12">
<AppCardCode
title="Row Selection"
:code="demoCode.rowSelection"
no-padding
>
<DemoDataTableRowSelection />
</AppCardCode>
</VCol>
<!-- 👉 Fixed Header -->
<VCol cols="12">
<AppCardCode
title="Fixed Header"
:code="demoCode.fixedHeader"
no-padding
>
<DemoDataTableFixedHeader />
</AppCardCode>
</VCol>
<!-- 👉 Expandable rows -->
<VCol cols="12">
<AppCardCode
title="Expandable Rows"
:code="demoCode.expandableRows"
no-padding
>
<DemoDataTableExpandableRows />
</AppCardCode>
</VCol>
<!-- 👉 Grouping Rows -->
<VCol cols="12">
<AppCardCode
title="Grouping Rows"
:code="demoCode.groupingRows"
no-padding
>
<DemoDataTableGroupingRows />
</AppCardCode>
</VCol>
<!-- 👉 Row Editing via Dialog -->
<VCol cols="12">
<AppCardCode
title="Row Editing via Dialog"
:code="demoCode.rowEditingViaDialog"
no-padding
>
<DemoDataTableRowEditingViaDialog />
</AppCardCode>
</VCol>
<!-- 👉 External Pagination -->
<VCol cols="12">
<AppCardCode
title="External Pagination"
:code="demoCode.externalPagination"
no-padding
>
<DemoDataTableExternalPagination />
</AppCardCode>
</VCol>
<!-- 👉 Kitchen Sink -->
<VCol cols="12">
<AppCardCode
title="Kitchen Sink"
:code="demoCode.kitchenSink"
no-padding
>
<DemoDataTableKitchenSink />
</AppCardCode>
</VCol>
</VRow>
</template>