vcomply-design-system 1.0.0

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.
Files changed (180) hide show
  1. package/README.md +22 -0
  2. package/css-build/css/alignment/alignment.css +33 -0
  3. package/css-build/css/animate/animate-fade-in-left.css +28 -0
  4. package/css-build/css/animate/animate-fade-in-right.css +28 -0
  5. package/css-build/css/animate/animate-fade-in.css +20 -0
  6. package/css-build/css/animate/animate-fade-out.css +20 -0
  7. package/css-build/css/animate/animate-slide-down.css +26 -0
  8. package/css-build/css/animate/animate-slide-left.css +26 -0
  9. package/css-build/css/animate/animate-slide-right.css +26 -0
  10. package/css-build/css/animate/animate-slide-up.css +26 -0
  11. package/css-build/css/animate/animation.css +58 -0
  12. package/css-build/css/animate/index.css +258 -0
  13. package/css-build/css/avatars/avatars.css +83 -0
  14. package/css-build/css/button/button.css +237 -0
  15. package/css-build/css/color/color.css +152 -0
  16. package/css-build/css/dialog/dialog.css +421 -0
  17. package/css-build/css/display/display.css +24 -0
  18. package/css-build/css/forms/check-box.css +97 -0
  19. package/css-build/css/forms/forms.css +336 -0
  20. package/css-build/css/forms/index.css +862 -0
  21. package/css-build/css/forms/radio.css +116 -0
  22. package/css-build/css/forms/range-slider.css +203 -0
  23. package/css-build/css/forms/switch.css +124 -0
  24. package/css-build/css/header/header.css +344 -0
  25. package/css-build/css/icons/icons.css +53 -0
  26. package/css-build/css/index.css +548 -0
  27. package/css-build/css/index2.css +313 -0
  28. package/css-build/css/layout/layout.css +19 -0
  29. package/css-build/css/left-menu/main-menu.css +98 -0
  30. package/css-build/css/left-menu/sub-menu.css +323 -0
  31. package/css-build/css/list/list.css +3 -0
  32. package/css-build/css/loader/v-loader.css +183 -0
  33. package/css-build/css/margin/index.css +112 -0
  34. package/css-build/css/margin/margin-bottom.css +25 -0
  35. package/css-build/css/margin/margin-left.css +25 -0
  36. package/css-build/css/margin/margin-right.css +40 -0
  37. package/css-build/css/margin/margin-top.css +25 -0
  38. package/css-build/css/margin/margin.css +25 -0
  39. package/css-build/css/mixin/mixin.css +7 -0
  40. package/css-build/css/mixin.css +0 -0
  41. package/css-build/css/no-data/no-data.css +36 -0
  42. package/css-build/css/padding/index.css +97 -0
  43. package/css-build/css/padding/padding-bottom.css +25 -0
  44. package/css-build/css/padding/padding-left.css +25 -0
  45. package/css-build/css/padding/padding-right.css +25 -0
  46. package/css-build/css/padding/padding-top.css +25 -0
  47. package/css-build/css/padding/padding.css +25 -0
  48. package/css-build/css/pagination/pagination.css +131 -0
  49. package/css-build/css/panel/panel.css +76 -0
  50. package/css-build/css/popover/popover.css +237 -0
  51. package/css-build/css/quick-links/quick-links.css +84 -0
  52. package/css-build/css/smiley/smiley.css +353 -0
  53. package/css-build/css/snack-bar/snack-bar.css +77 -0
  54. package/css-build/css/table/table.css +191 -0
  55. package/css-build/css/table-card/table-card.css +242 -0
  56. package/css-build/css/text/text.css +157 -0
  57. package/css-build/css/user-panel/user-panel.css +115 -0
  58. package/css-build/css/vx.css +4254 -0
  59. package/css-build/css/width/width.css +43 -0
  60. package/css-build/fonts/icon.eot +0 -0
  61. package/css-build/fonts/icon.svg +583 -0
  62. package/css-build/fonts/icon.ttf +0 -0
  63. package/css-build/fonts/icon.woff +0 -0
  64. package/css-build/images/1.jpg +0 -0
  65. package/css-build/images/2.jpg +0 -0
  66. package/css-build/images/3.jpg +0 -0
  67. package/css-build/images/4.jpg +0 -0
  68. package/css-build/images/example/graph-sec-menu.JPG +0 -0
  69. package/css-build/images/example/layout.svg +388 -0
  70. package/css-build/images/example/menu-icon-m.svg +56 -0
  71. package/css-build/images/example/primary-menu.svg +66 -0
  72. package/css-build/images/example/vcomply-icon-m.svg +43 -0
  73. package/css-build/images/favicon.ico +0 -0
  74. package/css-build/images/grid.JPG +0 -0
  75. package/css-build/images/no-data.svg +268 -0
  76. package/css-build/images/open-arrow-left.svg +3 -0
  77. package/css-build/images/plus-create-icon.svg +23 -0
  78. package/css-build/images/plus-incident-icon.svg +44 -0
  79. package/css-build/images/plus-risk-icon.svg +45 -0
  80. package/css-build/images/v-icon.svg +1 -0
  81. package/css-build/index.html +188 -0
  82. package/css-build/js/table.js +72 -0
  83. package/css-build/js/toolbar.js +48 -0
  84. package/css-build/less/alignment/alignment.less +43 -0
  85. package/css-build/less/animate/animate-fade-in-left.less +32 -0
  86. package/css-build/less/animate/animate-fade-in-right.less +32 -0
  87. package/css-build/less/animate/animate-fade-in.less +24 -0
  88. package/css-build/less/animate/animate-fade-out.less +24 -0
  89. package/css-build/less/animate/animate-slide-down.less +30 -0
  90. package/css-build/less/animate/animate-slide-left.less +30 -0
  91. package/css-build/less/animate/animate-slide-right.less +30 -0
  92. package/css-build/less/animate/animate-slide-up.less +30 -0
  93. package/css-build/less/animate/animation.less +58 -0
  94. package/css-build/less/animate/index.less +9 -0
  95. package/css-build/less/avatars/avatars.less +96 -0
  96. package/css-build/less/button/button.less +201 -0
  97. package/css-build/less/color/color.less +209 -0
  98. package/css-build/less/dialog/dialog.less +502 -0
  99. package/css-build/less/display/display.less +31 -0
  100. package/css-build/less/forms/check-box.less +117 -0
  101. package/css-build/less/forms/forms.less +386 -0
  102. package/css-build/less/forms/index.less +5 -0
  103. package/css-build/less/forms/radio.less +139 -0
  104. package/css-build/less/forms/range-slider.less +69 -0
  105. package/css-build/less/forms/switch.less +166 -0
  106. package/css-build/less/header/header.less +236 -0
  107. package/css-build/less/icons/icons.less +50 -0
  108. package/css-build/less/index.less +74 -0
  109. package/css-build/less/index2.less +396 -0
  110. package/css-build/less/layout/layout.less +16 -0
  111. package/css-build/less/left-menu/main-menu.less +123 -0
  112. package/css-build/less/left-menu/sub-menu.less +326 -0
  113. package/css-build/less/list/list.less +5 -0
  114. package/css-build/less/loader/v-loader.less +219 -0
  115. package/css-build/less/margin/index.less +5 -0
  116. package/css-build/less/margin/margin-bottom.less +25 -0
  117. package/css-build/less/margin/margin-left.less +25 -0
  118. package/css-build/less/margin/margin-right.less +40 -0
  119. package/css-build/less/margin/margin-top.less +25 -0
  120. package/css-build/less/margin/margin.less +25 -0
  121. package/css-build/less/mixin/mixin.less +27 -0
  122. package/css-build/less/mixin.less +1 -0
  123. package/css-build/less/no-data/no-data.less +52 -0
  124. package/css-build/less/padding/index.less +5 -0
  125. package/css-build/less/padding/padding-bottom.less +25 -0
  126. package/css-build/less/padding/padding-left.less +20 -0
  127. package/css-build/less/padding/padding-right.less +20 -0
  128. package/css-build/less/padding/padding-top.less +25 -0
  129. package/css-build/less/padding/padding.less +25 -0
  130. package/css-build/less/pagination/pagination.less +144 -0
  131. package/css-build/less/panel/panel.less +116 -0
  132. package/css-build/less/popover/popover.less +273 -0
  133. package/css-build/less/quick-links/quick-links.less +90 -0
  134. package/css-build/less/smiley/smiley.less +422 -0
  135. package/css-build/less/snack-bar/snack-bar.less +86 -0
  136. package/css-build/less/table/table.less +293 -0
  137. package/css-build/less/table-card/table-card.less +116 -0
  138. package/css-build/less/text/text.less +179 -0
  139. package/css-build/less/user-panel/user-panel.less +123 -0
  140. package/css-build/less/vx.less +28 -0
  141. package/css-build/less/width/width.less +37 -0
  142. package/css-build/less.js +11 -0
  143. package/css-build/pages/alignment.html +102 -0
  144. package/css-build/pages/avatars.html +555 -0
  145. package/css-build/pages/button.html +993 -0
  146. package/css-build/pages/checkbox.html +560 -0
  147. package/css-build/pages/color-palette.html +358 -0
  148. package/css-build/pages/common-layout.html +125 -0
  149. package/css-build/pages/dialog.html +738 -0
  150. package/css-build/pages/display.html +67 -0
  151. package/css-build/pages/font-family.html +281 -0
  152. package/css-build/pages/header.html +590 -0
  153. package/css-build/pages/icons.html +3715 -0
  154. package/css-build/pages/mein-menu-active.html +67 -0
  155. package/css-build/pages/mein-menu-sub-menu.html +110 -0
  156. package/css-build/pages/mein-menu-tooltip.html +70 -0
  157. package/css-build/pages/mein-menu.html +321 -0
  158. package/css-build/pages/no-data.html +277 -0
  159. package/css-build/pages/panel.html +423 -0
  160. package/css-build/pages/popover.html +666 -0
  161. package/css-build/pages/radio.html +418 -0
  162. package/css-build/pages/range-slider.html +279 -0
  163. package/css-build/pages/select-box.html +933 -0
  164. package/css-build/pages/smiley.html +355 -0
  165. package/css-build/pages/sub-menu.html +396 -0
  166. package/css-build/pages/switch.html +349 -0
  167. package/css-build/pages/tab-menu.html +301 -0
  168. package/css-build/pages/table-card.html +510 -0
  169. package/css-build/pages/table.html +2218 -0
  170. package/css-build/pages/text-box.html +325 -0
  171. package/css-build/pages/text.html +106 -0
  172. package/css-build/pages/v-loader.html +163 -0
  173. package/css-build/sw/pwabuilder-sw-register.js +14 -0
  174. package/css-build/sw/pwabuilder-sw.js +47 -0
  175. package/css-build/utility/code-prev.css +19 -0
  176. package/css-build/utility/prism.css +130 -0
  177. package/css-build/utility/prism.js +8 -0
  178. package/index.js +66 -0
  179. package/nodemon.json +4 -0
  180. package/package.json +24 -0
package/css-build/pages/table.html ADDED
@@ -0,0 +1,2218 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Table</title>
9
+ <link rel="preconnect" href="https://fonts.gstatic.com">
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
11
+ rel="stylesheet">
12
+
13
+ <link rel="stylesheet" type="text/css" href="../utility/prism.css" />
14
+ <link rel="stylesheet" type="text/css" href="../utility/code-prev.css" />
15
+ <link rel="stylesheet/less" type="text/css" href="../less/index2.less" />
16
+ <link rel="stylesheet/less" type="text/css" href="../less/text/text.less" />
17
+ <link rel="stylesheet/less" type="text/css" href="../less/table/table.less" />
18
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin.less" />
19
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-top.less" />
20
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-right.less" />
21
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-bottom.less" />
22
+ <link rel="stylesheet/less" type="text/css" href="../less/margin/margin-left.less" />
23
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding.less" />
24
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-top.less" />
25
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-right.less" />
26
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-bottom.less" />
27
+ <link rel="stylesheet/less" type="text/css" href="../less/padding/padding-left.less" />
28
+ <link rel="stylesheet/less" type="text/css" href="../less/display/display.less" />
29
+ <link rel="stylesheet/less" type="text/css" href="../less/left-menu/sub-menu.less" />
30
+ <link rel="stylesheet/less" type="text/css" href="../less/button/button.less" />
31
+ <link rel="stylesheet/less" type="text/css" href="../less/forms/check-box.less" />
32
+ <link rel="stylesheet/less" type="text/css" href="../less/alignment/alignment.less" />
33
+ <link rel="stylesheet/less" type="text/css" href="../less/pagination/pagination.less" />
34
+ <link rel="stylesheet/less" type="text/css" href="../less/avatars/avatars.less" />
35
+ </head>
36
+
37
+ <body>
38
+ <section>
39
+ <div class="head vx-mb-5">
40
+ <h2 class="title vx-label-txt vx-m-0 vx-mb-4">Table</h2>
41
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Tables display sets of data.
42
+ </p>
43
+ </div>
44
+ <div class="vx-d-flex vx-align-start">
45
+ <div class="page-container">
46
+ <div class="container" id="conbesicTable">
47
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Basic table</h3>
48
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Add a text to describe the box
49
+ size, space, animation color about the design.
50
+ </p>
51
+
52
+ <div class="preview-block">
53
+ <div class="action-buttons">
54
+ <button class="vx-btn md transparent">
55
+ <i class="icons">&#xe9b6;</i> Copy Code
56
+ </button>
57
+ <button class="vx-btn md transparent" data-tab="besicTable">
58
+ <i class="icons rotate">&#xea95;</i> View Code
59
+ </button>
60
+ </div>
61
+ <div class="preview-container">
62
+ <table class="vx-table">
63
+ <thead>
64
+ <tr>
65
+ <th>#</th>
66
+ <th>RISK</th>
67
+ <th>MITIGATION PRIORITY</th>
68
+ <th>INHERENT RISK RATING</th>
69
+ <th>RESIDUAL RISK RATING</th>
70
+ <th>RISK APPETITE</th>
71
+ <th>RESPONSIBILITY CENTER</th>
72
+ <th></th>
73
+ </tr>
74
+ </thead>
75
+ <tbody>
76
+ <tr>
77
+ <td><span class="sl-no">1</span></td>
78
+ <td>
79
+ [RID-21040030] Data Theft Risk</td>
80
+ <td>VERY HIGH</td>
81
+ <td>MEDIUM</td>
82
+ <td>MEDIUM</td>
83
+ <td>CONSERVATIVE</td>
84
+ <td>Testing Rc</td>
85
+ <td></td>
86
+ </tr>
87
+ <tr>
88
+ <td><span class="sl-no">2</span></td>
89
+ <td>
90
+ [RID-21040030] Data Theft Risk</td>
91
+ <td>VERY HIGH</td>
92
+ <td>MEDIUM</td>
93
+ <td>MEDIUM</td>
94
+ <td>CONSERVATIVE</td>
95
+ <td>Testing Rc</td>
96
+ <td></td>
97
+ </tr>
98
+ <tr>
99
+ <td><span class="sl-no">3</span></td>
100
+ <td>
101
+ [RID-21040030] Data Theft Risk</td>
102
+ <td>VERY HIGH</td>
103
+ <td>MEDIUM</td>
104
+ <td>MEDIUM</td>
105
+ <td>CONSERVATIVE</td>
106
+ <td>Testing Rc</td>
107
+ <td></td>
108
+ </tr>
109
+ <tr>
110
+ <td><span class="sl-no">4</span></td>
111
+ <td>
112
+ [RID-21040030] Data Theft Risk</td>
113
+ <td>VERY HIGH</td>
114
+ <td>MEDIUM</td>
115
+ <td>MEDIUM</td>
116
+ <td>CONSERVATIVE</td>
117
+ <td>Testing Rc</td>
118
+ <td></td>
119
+ </tr>
120
+ <tr>
121
+ <td><span class="sl-no">5</span></td>
122
+ <td>
123
+ [RID-21040030] Data Theft Risk</td>
124
+ <td>VERY HIGH</td>
125
+ <td>MEDIUM</td>
126
+ <td>MEDIUM</td>
127
+ <td>CONSERVATIVE</td>
128
+ <td>Testing Rc</td>
129
+ <td></td>
130
+ </tr>
131
+ <tr>
132
+ <td><span class="sl-no">6</span></td>
133
+ <td>
134
+ [RID-21040030] Data Theft Risk</td>
135
+ <td>VERY HIGH</td>
136
+ <td>MEDIUM</td>
137
+ <td>MEDIUM</td>
138
+ <td>CONSERVATIVE</td>
139
+ <td>Testing Rc</td>
140
+ <td></td>
141
+ </tr>
142
+ <tr>
143
+ <td><span class="sl-no">7</span></td>
144
+ <td>
145
+ [RID-21040030] Data Theft Risk</td>
146
+ <td>VERY HIGH</td>
147
+ <td>MEDIUM</td>
148
+ <td>MEDIUM</td>
149
+ <td>CONSERVATIVE</td>
150
+ <td>Testing Rc</td>
151
+ <td></td>
152
+ </tr>
153
+ <tr>
154
+ <td><span class="sl-no">8</span></td>
155
+ <td>
156
+ [RID-21040030] Data Theft Risk</td>
157
+ <td>VERY HIGH</td>
158
+ <td>MEDIUM</td>
159
+ <td>MEDIUM</td>
160
+ <td>CONSERVATIVE</td>
161
+ <td>Testing Rc</td>
162
+ <td></td>
163
+ </tr>
164
+ <tr>
165
+ <td><span class="sl-no">9</span></td>
166
+ <td>
167
+ [RID-21040030] Data Theft Risk</td>
168
+ <td>VERY HIGH</td>
169
+ <td>MEDIUM</td>
170
+ <td>MEDIUM</td>
171
+ <td>CONSERVATIVE</td>
172
+ <td>Testing Rc</td>
173
+ <td></td>
174
+ </tr>
175
+ <tr>
176
+ <td><span class="sl-no">10</span></td>
177
+ <td>
178
+ [RID-21040030] Data Theft Risk</td>
179
+ <td>VERY HIGH</td>
180
+ <td>MEDIUM</td>
181
+ <td>MEDIUM</td>
182
+ <td>CONSERVATIVE</td>
183
+ <td>Testing Rc</td>
184
+ <td></td>
185
+ </tr>
186
+ </tbody>
187
+ </table>
188
+ </div>
189
+
190
+ </div>
191
+ <div class="code-view vx-mb-5" id="besicTable">
192
+ <div class="code-navigation">
193
+ <button class="active">HTML</button>
194
+ <button>CSS</button>
195
+ </div>
196
+ <code class="language-markup">
197
+ <script type="prism-html-markup">
198
+ <table class="vx-table">
199
+ <thead>
200
+ <tr>
201
+ <th>#</th>
202
+ <th>RISK</th>
203
+ <th>MITIGATION PRIORITY</th>
204
+ <th>INHERENT RISK RATING</th>
205
+ <th>RESIDUAL RISK RATING</th>
206
+ <th>RISK APPETITE</th>
207
+ <th>RESPONSIBILITY CENTER</th>
208
+ <th></th>
209
+ </tr>
210
+ </thead>
211
+ <tbody>
212
+ <tr>
213
+ <td><span class="sl-no">1</span></td>
214
+ <td>
215
+ [RID-21040030] Data Theft Risk</td>
216
+ <td>VERY HIGH</td>
217
+ <td>MEDIUM</td>
218
+ <td>MEDIUM</td>
219
+ <td>CONSERVATIVE</td>
220
+ <td>Testing Rc</td>
221
+ <td></td>
222
+ </tr>
223
+ <tr>
224
+ <td><span class="sl-no">2</span></td>
225
+ <td>
226
+ [RID-21040030] Data Theft Risk</td>
227
+ <td>VERY HIGH</td>
228
+ <td>MEDIUM</td>
229
+ <td>MEDIUM</td>
230
+ <td>CONSERVATIVE</td>
231
+ <td>Testing Rc</td>
232
+ <td></td>
233
+ </tr>
234
+ </tbody>
235
+ </table>
236
+ </script>
237
+ </code>
238
+ </div>
239
+
240
+
241
+ </div>
242
+
243
+ <div class="container" id="tableWithCheckbox">
244
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table with Checkbox</h3>
245
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
246
+ Mouse hover on table row to see checkbox
247
+ </p>
248
+
249
+ <div class="preview-block">
250
+ <div class="action-buttons">
251
+ <button class="vx-btn md transparent">
252
+ <i class="icons">&#xe9b6;</i> Copy Code
253
+ </button>
254
+ <button class="vx-btn md transparent" data-tab="checkTable">
255
+ <i class="icons rotate">&#xea95;</i> View Code
256
+ </button>
257
+ </div>
258
+ <div class="preview-container">
259
+ <table class="vx-table">
260
+ <thead>
261
+ <tr>
262
+ <th>
263
+ <span class="sl">#</span>
264
+ <label class="vx-checkbox-item">
265
+ <input type="checkbox">
266
+ <span class="checkbox"><span class="inner"></span></span>
267
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
268
+ viewBox="0 0 52 52">
269
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
270
+ fill="none" />
271
+ <path class="checkmark__check" fill="none"
272
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
273
+ </svg>
274
+ </label>
275
+ </th>
276
+ <th>RISK</th>
277
+ <th>MITIGATION PRIORITY</th>
278
+ <th>INHERENT RISK RATING</th>
279
+ <th>RESIDUAL RISK RATING</th>
280
+ <th>RISK APPETITE</th>
281
+ <th>RESPONSIBILITY CENTER</th>
282
+ <th></th>
283
+ </tr>
284
+ </thead>
285
+ <tbody>
286
+ <tr>
287
+ <td><span class="sl sl-no">1</span>
288
+ <label class="vx-checkbox-item">
289
+ <input type="checkbox">
290
+ <span class="checkbox"><span class="inner"></span></span>
291
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
292
+ viewBox="0 0 52 52">
293
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
294
+ fill="none" />
295
+ <path class="checkmark__check" fill="none"
296
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
297
+ </svg>
298
+ </label>
299
+ </td>
300
+ <td>
301
+ [RID-21040030] Data Theft Risk</td>
302
+ <td>VERY HIGH</td>
303
+ <td>MEDIUM</td>
304
+ <td>MEDIUM</td>
305
+ <td>CONSERVATIVE</td>
306
+ <td>Testing Rc</td>
307
+ <td></td>
308
+ </tr>
309
+ <tr>
310
+ <td><span class="sl sl-no">2</span>
311
+ <label class="vx-checkbox-item">
312
+ <input type="checkbox">
313
+ <span class="checkbox"><span class="inner"></span></span>
314
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
315
+ viewBox="0 0 52 52">
316
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
317
+ fill="none" />
318
+ <path class="checkmark__check" fill="none"
319
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
320
+ </svg>
321
+ </label>
322
+ </td>
323
+ <td>
324
+ [RID-21040030] Data Theft Risk</td>
325
+ <td>VERY HIGH</td>
326
+ <td>MEDIUM</td>
327
+ <td>MEDIUM</td>
328
+ <td>CONSERVATIVE</td>
329
+ <td>Testing Rc</td>
330
+ <td></td>
331
+ </tr>
332
+ <tr>
333
+ <td><span class="sl sl-no">3</span>
334
+ <label class="vx-checkbox-item">
335
+ <input type="checkbox">
336
+ <span class="checkbox"><span class="inner"></span></span>
337
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
338
+ viewBox="0 0 52 52">
339
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
340
+ fill="none" />
341
+ <path class="checkmark__check" fill="none"
342
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
343
+ </svg>
344
+ </label>
345
+ </td>
346
+ <td>
347
+ [RID-21040030] Data Theft Risk</td>
348
+ <td>VERY HIGH</td>
349
+ <td>MEDIUM</td>
350
+ <td>MEDIUM</td>
351
+ <td>CONSERVATIVE</td>
352
+ <td>Testing Rc</td>
353
+ <td></td>
354
+ </tr>
355
+ <tr>
356
+ <td><span class="sl sl-no">4</span>
357
+ <label class="vx-checkbox-item">
358
+ <input type="checkbox">
359
+ <span class="checkbox"><span class="inner"></span></span>
360
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
361
+ viewBox="0 0 52 52">
362
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
363
+ fill="none" />
364
+ <path class="checkmark__check" fill="none"
365
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
366
+ </svg>
367
+ </label>
368
+ </td>
369
+ <td>
370
+ [RID-21040030] Data Theft Risk</td>
371
+ <td>VERY HIGH</td>
372
+ <td>MEDIUM</td>
373
+ <td>MEDIUM</td>
374
+ <td>CONSERVATIVE</td>
375
+ <td>Testing Rc</td>
376
+ <td></td>
377
+ </tr>
378
+ <tr>
379
+ <td><span class="sl sl-no">5</span>
380
+ <label class="vx-checkbox-item">
381
+ <input type="checkbox">
382
+ <span class="checkbox"><span class="inner"></span></span>
383
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
384
+ viewBox="0 0 52 52">
385
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
386
+ fill="none" />
387
+ <path class="checkmark__check" fill="none"
388
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
389
+ </svg>
390
+ </label>
391
+ </td>
392
+ <td>
393
+ [RID-21040030] Data Theft Risk</td>
394
+ <td>VERY HIGH</td>
395
+ <td>MEDIUM</td>
396
+ <td>MEDIUM</td>
397
+ <td>CONSERVATIVE</td>
398
+ <td>Testing Rc</td>
399
+ <td></td>
400
+ </tr>
401
+ <tr>
402
+ <td><span class="sl sl-no">6</span>
403
+ <label class="vx-checkbox-item">
404
+ <input type="checkbox">
405
+ <span class="checkbox"><span class="inner"></span></span>
406
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
407
+ viewBox="0 0 52 52">
408
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
409
+ fill="none" />
410
+ <path class="checkmark__check" fill="none"
411
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
412
+ </svg>
413
+ </label>
414
+ </td>
415
+ <td>
416
+ [RID-21040030] Data Theft Risk</td>
417
+ <td>VERY HIGH</td>
418
+ <td>MEDIUM</td>
419
+ <td>MEDIUM</td>
420
+ <td>CONSERVATIVE</td>
421
+ <td>Testing Rc</td>
422
+ <td></td>
423
+ </tr>
424
+ <tr>
425
+ <td><span class="sl sl-no">7</span>
426
+ <label class="vx-checkbox-item">
427
+ <input type="checkbox">
428
+ <span class="checkbox"><span class="inner"></span></span>
429
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
430
+ viewBox="0 0 52 52">
431
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
432
+ fill="none" />
433
+ <path class="checkmark__check" fill="none"
434
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
435
+ </svg>
436
+ </label>
437
+ </td>
438
+ <td>
439
+ [RID-21040030] Data Theft Risk</td>
440
+ <td>VERY HIGH</td>
441
+ <td>MEDIUM</td>
442
+ <td>MEDIUM</td>
443
+ <td>CONSERVATIVE</td>
444
+ <td>Testing Rc</td>
445
+ <td></td>
446
+ </tr>
447
+ <tr>
448
+ <td><span class="sl sl-no">8</span>
449
+ <label class="vx-checkbox-item">
450
+ <input type="checkbox">
451
+ <span class="checkbox"><span class="inner"></span></span>
452
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
453
+ viewBox="0 0 52 52">
454
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
455
+ fill="none" />
456
+ <path class="checkmark__check" fill="none"
457
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
458
+ </svg>
459
+ </label>
460
+ </td>
461
+ <td>
462
+ [RID-21040030] Data Theft Risk</td>
463
+ <td>VERY HIGH</td>
464
+ <td>MEDIUM</td>
465
+ <td>MEDIUM</td>
466
+ <td>CONSERVATIVE</td>
467
+ <td>Testing Rc</td>
468
+ <td></td>
469
+ </tr>
470
+ <tr>
471
+ <td><span class="sl sl-no">9</span>
472
+ <label class="vx-checkbox-item">
473
+ <input type="checkbox">
474
+ <span class="checkbox"><span class="inner"></span></span>
475
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
476
+ viewBox="0 0 52 52">
477
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
478
+ fill="none" />
479
+ <path class="checkmark__check" fill="none"
480
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
481
+ </svg>
482
+ </label>
483
+ </td>
484
+ <td>
485
+ [RID-21040030] Data Theft Risk</td>
486
+ <td>VERY HIGH</td>
487
+ <td>MEDIUM</td>
488
+ <td>MEDIUM</td>
489
+ <td>CONSERVATIVE</td>
490
+ <td>Testing Rc</td>
491
+ <td></td>
492
+ </tr>
493
+ <tr>
494
+ <td><span class="sl sl-no">10</span>
495
+ <label class="vx-checkbox-item">
496
+ <input type="checkbox">
497
+ <span class="checkbox"><span class="inner"></span></span>
498
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
499
+ viewBox="0 0 52 52">
500
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
501
+ fill="none" />
502
+ <path class="checkmark__check" fill="none"
503
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
504
+ </svg>
505
+ </label>
506
+ </td>
507
+ <td>
508
+ [RID-21040030] Data Theft Risk</td>
509
+ <td>VERY HIGH</td>
510
+ <td>MEDIUM</td>
511
+ <td>MEDIUM</td>
512
+ <td>CONSERVATIVE</td>
513
+ <td>Testing Rc</td>
514
+ <td></td>
515
+ </tr>
516
+ </tbody>
517
+ </table>
518
+ </div>
519
+
520
+ </div>
521
+ <div class="code-view vx-mb-5" id="checkTable">
522
+ <div class="code-navigation">
523
+ <button class="active">HTML</button>
524
+ <button>CSS</button>
525
+ </div>
526
+ <code class="language-markup">
527
+ <script type="prism-html-markup">
528
+ <table class="vx-table">
529
+ <thead>
530
+ <tr>
531
+ <th>
532
+ <span class="sl">#</span>
533
+ <label class="vx-checkbox-item">
534
+ <input type="checkbox">
535
+ <span class="checkbox"><span class="inner"></span></span>
536
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
537
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
538
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
539
+ </svg>
540
+ </label>
541
+ </th>
542
+ <th>RISK</th>
543
+ <th>MITIGATION PRIORITY</th>
544
+ <th>INHERENT RISK RATING</th>
545
+ <th>RESIDUAL RISK RATING</th>
546
+ <th>RISK APPETITE</th>
547
+ <th>RESPONSIBILITY CENTER</th>
548
+ <th></th>
549
+ </tr>
550
+ </thead>
551
+ <tbody>
552
+ <tr>
553
+ <td><span class="sl sl-no">1</span>
554
+ <label class="vx-checkbox-item">
555
+ <input type="checkbox">
556
+ <span class="checkbox"><span class="inner"></span></span>
557
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
558
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
559
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
560
+ </svg>
561
+ </label></td>
562
+ <td>
563
+ [RID-21040030] Data Theft Risk</td>
564
+ <td>VERY HIGH</td>
565
+ <td>MEDIUM</td>
566
+ <td>MEDIUM</td>
567
+ <td>CONSERVATIVE</td>
568
+ <td>Testing Rc</td>
569
+ <td></td>
570
+ </tr>
571
+ <tr>
572
+ <td><span class="sl sl-no">2</span>
573
+ <label class="vx-checkbox-item">
574
+ <input type="checkbox">
575
+ <span class="checkbox"><span class="inner"></span></span>
576
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
577
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
578
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
579
+ </svg>
580
+ </label></td>
581
+ <td>
582
+ [RID-21040030] Data Theft Risk</td>
583
+ <td>VERY HIGH</td>
584
+ <td>MEDIUM</td>
585
+ <td>MEDIUM</td>
586
+ <td>CONSERVATIVE</td>
587
+ <td>Testing Rc</td>
588
+ <td></td>
589
+ </tr>
590
+ <tr>
591
+ <td><span class="sl sl-no">3</span>
592
+ <label class="vx-checkbox-item">
593
+ <input type="checkbox">
594
+ <span class="checkbox"><span class="inner"></span></span>
595
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
596
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
597
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
598
+ </svg>
599
+ </label></td>
600
+ <td>
601
+ [RID-21040030] Data Theft Risk</td>
602
+ <td>VERY HIGH</td>
603
+ <td>MEDIUM</td>
604
+ <td>MEDIUM</td>
605
+ <td>CONSERVATIVE</td>
606
+ <td>Testing Rc</td>
607
+ <td></td>
608
+ </tr>
609
+ </tbody>
610
+ </table>
611
+ </script>
612
+ </code>
613
+ </div>
614
+ </div>
615
+
616
+ <div class="container" id="tableWithCheckboxSelected">
617
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table with Checkbox selected</h3>
618
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
619
+ Once you check any row that will show selected
620
+ </p>
621
+
622
+ <div class="preview-block">
623
+ <div class="action-buttons">
624
+ <button class="vx-btn md transparent">
625
+ <i class="icons">&#xe9b6;</i> Copy Code
626
+ </button>
627
+ <button class="vx-btn md transparent" data-tab="checkTableSelected">
628
+ <i class="icons rotate">&#xea95;</i> View Code
629
+ </button>
630
+ </div>
631
+ <div class="preview-container">
632
+ <table class="vx-table">
633
+ <thead>
634
+ <tr>
635
+ <th>
636
+ <span class="sl">#</span>
637
+ <label class="vx-checkbox-item">
638
+ <input type="checkbox">
639
+ <span class="checkbox"><span class="inner"></span></span>
640
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
641
+ viewBox="0 0 52 52">
642
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
643
+ fill="none" />
644
+ <path class="checkmark__check" fill="none"
645
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
646
+ </svg>
647
+ </label>
648
+ </th>
649
+ <th>RISK</th>
650
+ <th>MITIGATION PRIORITY</th>
651
+ <th>INHERENT RISK RATING</th>
652
+ <th>RESIDUAL RISK RATING</th>
653
+ <th>RISK APPETITE</th>
654
+ <th>RESPONSIBILITY CENTER</th>
655
+ <th></th>
656
+ </tr>
657
+ </thead>
658
+ <tbody>
659
+ <tr>
660
+ <td><span class="sl sl-no">1</span>
661
+ <label class="vx-checkbox-item">
662
+ <input type="checkbox">
663
+ <span class="checkbox"><span class="inner"></span></span>
664
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
665
+ viewBox="0 0 52 52">
666
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
667
+ fill="none" />
668
+ <path class="checkmark__check" fill="none"
669
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
670
+ </svg>
671
+ </label>
672
+ </td>
673
+ <td>
674
+ [RID-21040030] Data Theft Risk</td>
675
+ <td>VERY HIGH</td>
676
+ <td>MEDIUM</td>
677
+ <td>MEDIUM</td>
678
+ <td>CONSERVATIVE</td>
679
+ <td>Testing Rc</td>
680
+ <td></td>
681
+ </tr>
682
+ <tr class="selected">
683
+ <td><span class="sl sl-no">2</span>
684
+ <label class="vx-checkbox-item">
685
+ <input type="checkbox" checked>
686
+ <span class="checkbox"><span class="inner"></span></span>
687
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
688
+ viewBox="0 0 52 52">
689
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
690
+ fill="none" />
691
+ <path class="checkmark__check" fill="none"
692
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
693
+ </svg>
694
+ </label>
695
+ </td>
696
+ <td>
697
+ [RID-21040030] Data Theft Risk</td>
698
+ <td>VERY HIGH</td>
699
+ <td>MEDIUM</td>
700
+ <td>MEDIUM</td>
701
+ <td>CONSERVATIVE</td>
702
+ <td>Testing Rc</td>
703
+ <td></td>
704
+ </tr>
705
+ <tr>
706
+ <td><span class="sl sl-no">3</span>
707
+ <label class="vx-checkbox-item">
708
+ <input type="checkbox">
709
+ <span class="checkbox"><span class="inner"></span></span>
710
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
711
+ viewBox="0 0 52 52">
712
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
713
+ fill="none" />
714
+ <path class="checkmark__check" fill="none"
715
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
716
+ </svg>
717
+ </label>
718
+ </td>
719
+ <td>
720
+ [RID-21040030] Data Theft Risk</td>
721
+ <td>VERY HIGH</td>
722
+ <td>MEDIUM</td>
723
+ <td>MEDIUM</td>
724
+ <td>CONSERVATIVE</td>
725
+ <td>Testing Rc</td>
726
+ <td></td>
727
+ </tr>
728
+ <tr>
729
+ <td><span class="sl sl-no">4</span>
730
+ <label class="vx-checkbox-item">
731
+ <input type="checkbox">
732
+ <span class="checkbox"><span class="inner"></span></span>
733
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
734
+ viewBox="0 0 52 52">
735
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
736
+ fill="none" />
737
+ <path class="checkmark__check" fill="none"
738
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
739
+ </svg>
740
+ </label>
741
+ </td>
742
+ <td>
743
+ [RID-21040030] Data Theft Risk</td>
744
+ <td>VERY HIGH</td>
745
+ <td>MEDIUM</td>
746
+ <td>MEDIUM</td>
747
+ <td>CONSERVATIVE</td>
748
+ <td>Testing Rc</td>
749
+ <td></td>
750
+ </tr>
751
+ <tr>
752
+ <td><span class="sl sl-no">5</span>
753
+ <label class="vx-checkbox-item">
754
+ <input type="checkbox">
755
+ <span class="checkbox"><span class="inner"></span></span>
756
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
757
+ viewBox="0 0 52 52">
758
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
759
+ fill="none" />
760
+ <path class="checkmark__check" fill="none"
761
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
762
+ </svg>
763
+ </label>
764
+ </td>
765
+ <td>
766
+ [RID-21040030] Data Theft Risk</td>
767
+ <td>VERY HIGH</td>
768
+ <td>MEDIUM</td>
769
+ <td>MEDIUM</td>
770
+ <td>CONSERVATIVE</td>
771
+ <td>Testing Rc</td>
772
+ <td></td>
773
+ </tr>
774
+ <tr>
775
+ <td><span class="sl sl-no">6</span>
776
+ <label class="vx-checkbox-item">
777
+ <input type="checkbox">
778
+ <span class="checkbox"><span class="inner"></span></span>
779
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
780
+ viewBox="0 0 52 52">
781
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
782
+ fill="none" />
783
+ <path class="checkmark__check" fill="none"
784
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
785
+ </svg>
786
+ </label>
787
+ </td>
788
+ <td>
789
+ [RID-21040030] Data Theft Risk</td>
790
+ <td>VERY HIGH</td>
791
+ <td>MEDIUM</td>
792
+ <td>MEDIUM</td>
793
+ <td>CONSERVATIVE</td>
794
+ <td>Testing Rc</td>
795
+ <td></td>
796
+ </tr>
797
+ <tr>
798
+ <td><span class="sl sl-no">7</span>
799
+ <label class="vx-checkbox-item">
800
+ <input type="checkbox">
801
+ <span class="checkbox"><span class="inner"></span></span>
802
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
803
+ viewBox="0 0 52 52">
804
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
805
+ fill="none" />
806
+ <path class="checkmark__check" fill="none"
807
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
808
+ </svg>
809
+ </label>
810
+ </td>
811
+ <td>
812
+ [RID-21040030] Data Theft Risk</td>
813
+ <td>VERY HIGH</td>
814
+ <td>MEDIUM</td>
815
+ <td>MEDIUM</td>
816
+ <td>CONSERVATIVE</td>
817
+ <td>Testing Rc</td>
818
+ <td></td>
819
+ </tr>
820
+ <tr>
821
+ <td><span class="sl sl-no">8</span>
822
+ <label class="vx-checkbox-item">
823
+ <input type="checkbox">
824
+ <span class="checkbox"><span class="inner"></span></span>
825
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
826
+ viewBox="0 0 52 52">
827
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
828
+ fill="none" />
829
+ <path class="checkmark__check" fill="none"
830
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
831
+ </svg>
832
+ </label>
833
+ </td>
834
+ <td>
835
+ [RID-21040030] Data Theft Risk</td>
836
+ <td>VERY HIGH</td>
837
+ <td>MEDIUM</td>
838
+ <td>MEDIUM</td>
839
+ <td>CONSERVATIVE</td>
840
+ <td>Testing Rc</td>
841
+ <td></td>
842
+ </tr>
843
+ <tr>
844
+ <td><span class="sl sl-no">9</span>
845
+ <label class="vx-checkbox-item">
846
+ <input type="checkbox">
847
+ <span class="checkbox"><span class="inner"></span></span>
848
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
849
+ viewBox="0 0 52 52">
850
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
851
+ fill="none" />
852
+ <path class="checkmark__check" fill="none"
853
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
854
+ </svg>
855
+ </label>
856
+ </td>
857
+ <td>
858
+ [RID-21040030] Data Theft Risk</td>
859
+ <td>VERY HIGH</td>
860
+ <td>MEDIUM</td>
861
+ <td>MEDIUM</td>
862
+ <td>CONSERVATIVE</td>
863
+ <td>Testing Rc</td>
864
+ <td></td>
865
+ </tr>
866
+ <tr>
867
+ <td><span class="sl sl-no">10</span>
868
+ <label class="vx-checkbox-item">
869
+ <input type="checkbox">
870
+ <span class="checkbox"><span class="inner"></span></span>
871
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg"
872
+ viewBox="0 0 52 52">
873
+ <circle class="checkmark__circle" cx="26" cy="26" r="25"
874
+ fill="none" />
875
+ <path class="checkmark__check" fill="none"
876
+ d="M14.1 27.2l7.1 7.2 16.7-16.8" />
877
+ </svg>
878
+ </label>
879
+ </td>
880
+ <td>
881
+ [RID-21040030] Data Theft Risk</td>
882
+ <td>VERY HIGH</td>
883
+ <td>MEDIUM</td>
884
+ <td>MEDIUM</td>
885
+ <td>CONSERVATIVE</td>
886
+ <td>Testing Rc</td>
887
+ <td></td>
888
+ </tr>
889
+ </tbody>
890
+ </table>
891
+ </div>
892
+
893
+ </div>
894
+ <div class="code-view vx-mb-5" id="checkTableSelected">
895
+ <div class="code-navigation">
896
+ <button class="active">HTML</button>
897
+ <button>CSS</button>
898
+ </div>
899
+ <code class="language-markup">
900
+ <script type="prism-html-markup">
901
+ <table class="vx-table">
902
+ <thead>
903
+ <tr>
904
+ <th>
905
+ <span class="sl">#</span>
906
+ <label class="vx-checkbox-item">
907
+ <input type="checkbox">
908
+ <span class="checkbox"><span class="inner"></span></span>
909
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
910
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
911
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
912
+ </svg>
913
+ </label>
914
+ </th>
915
+ <th>RISK</th>
916
+ <th>MITIGATION PRIORITY</th>
917
+ <th>INHERENT RISK RATING</th>
918
+ <th>RESIDUAL RISK RATING</th>
919
+ <th>RISK APPETITE</th>
920
+ <th>RESPONSIBILITY CENTER</th>
921
+ <th></th>
922
+ </tr>
923
+ </thead>
924
+ <tbody>
925
+ <tr>
926
+ <td><span class="sl sl-no">1</span>
927
+ <label class="vx-checkbox-item">
928
+ <input type="checkbox">
929
+ <span class="checkbox"><span class="inner"></span></span>
930
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
931
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
932
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
933
+ </svg>
934
+ </label></td>
935
+ <td>
936
+ [RID-21040030] Data Theft Risk</td>
937
+ <td>VERY HIGH</td>
938
+ <td>MEDIUM</td>
939
+ <td>MEDIUM</td>
940
+ <td>CONSERVATIVE</td>
941
+ <td>Testing Rc</td>
942
+ <td></td>
943
+ </tr>
944
+ <tr>
945
+ <td><span class="sl sl-no">2</span>
946
+ <label class="vx-checkbox-item">
947
+ <input type="checkbox">
948
+ <span class="checkbox"><span class="inner"></span></span>
949
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
950
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
951
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
952
+ </svg>
953
+ </label></td>
954
+ <td>
955
+ [RID-21040030] Data Theft Risk</td>
956
+ <td>VERY HIGH</td>
957
+ <td>MEDIUM</td>
958
+ <td>MEDIUM</td>
959
+ <td>CONSERVATIVE</td>
960
+ <td>Testing Rc</td>
961
+ <td></td>
962
+ </tr>
963
+ <tr>
964
+ <td><span class="sl sl-no">3</span>
965
+ <label class="vx-checkbox-item">
966
+ <input type="checkbox">
967
+ <span class="checkbox"><span class="inner"></span></span>
968
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
969
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
970
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
971
+ </svg>
972
+ </label></td>
973
+ <td>
974
+ [RID-21040030] Data Theft Risk</td>
975
+ <td>VERY HIGH</td>
976
+ <td>MEDIUM</td>
977
+ <td>MEDIUM</td>
978
+ <td>CONSERVATIVE</td>
979
+ <td>Testing Rc</td>
980
+ <td></td>
981
+ </tr>
982
+ </tbody>
983
+ </table>
984
+ </script>
985
+ </code>
986
+ </div>
987
+
988
+
989
+ </div>
990
+
991
+ <div class="container" id="tableWithFixHeader">
992
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table with Fix header</h3>
993
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Add a text to describe the box
994
+ size, space, animation color about the design.
995
+ </p>
996
+
997
+ <div class="preview-block">
998
+ <div class="action-buttons">
999
+ <button class="vx-btn md transparent">
1000
+ <i class="icons">&#xe9b6;</i> Copy Code
1001
+ </button>
1002
+ <button class="vx-btn md transparent" data-tab="tableFixHeader">
1003
+ <i class="icons rotate">&#xea95;</i> View Code
1004
+ </button>
1005
+ </div>
1006
+ <div class="preview-container">
1007
+ <table class="vx-table fix-header">
1008
+ <thead>
1009
+ <tr>
1010
+ <th>#</th>
1011
+ <th>RISK</th>
1012
+ <th>MITIGATION PRIORITY</th>
1013
+ <th>INHERENT RISK RATING</th>
1014
+ <th>RESIDUAL RISK RATING</th>
1015
+ <th>RISK APPETITE</th>
1016
+ <th>RESPONSIBILITY CENTER</th>
1017
+ <th></th>
1018
+ </tr>
1019
+ </thead>
1020
+ <tbody>
1021
+ <tr>
1022
+ <td><span class="sl-no">1</span></td>
1023
+ <td>
1024
+ [RID-21040030] Data Theft Risk</td>
1025
+ <td>VERY HIGH</td>
1026
+ <td>MEDIUM</td>
1027
+ <td>MEDIUM</td>
1028
+ <td>CONSERVATIVE</td>
1029
+ <td>Testing Rc</td>
1030
+ <td></td>
1031
+ </tr>
1032
+ <tr>
1033
+ <td><span class="sl-no">2</span></td>
1034
+ <td>
1035
+ [RID-21040030] Data Theft Risk</td>
1036
+ <td>VERY HIGH</td>
1037
+ <td>MEDIUM</td>
1038
+ <td>MEDIUM</td>
1039
+ <td>CONSERVATIVE</td>
1040
+ <td>Testing Rc</td>
1041
+ <td></td>
1042
+ </tr>
1043
+ <tr>
1044
+ <td><span class="sl-no">3</span></td>
1045
+ <td>
1046
+ [RID-21040030] Data Theft Risk</td>
1047
+ <td>VERY HIGH</td>
1048
+ <td>MEDIUM</td>
1049
+ <td>MEDIUM</td>
1050
+ <td>CONSERVATIVE</td>
1051
+ <td>Testing Rc</td>
1052
+ <td></td>
1053
+ </tr>
1054
+ <tr>
1055
+ <td><span class="sl-no">4</span></td>
1056
+ <td>
1057
+ [RID-21040030] Data Theft Risk</td>
1058
+ <td>VERY HIGH</td>
1059
+ <td>MEDIUM</td>
1060
+ <td>MEDIUM</td>
1061
+ <td>CONSERVATIVE</td>
1062
+ <td>Testing Rc</td>
1063
+ <td></td>
1064
+ </tr>
1065
+ <tr>
1066
+ <td><span class="sl-no">5</span></td>
1067
+ <td>
1068
+ [RID-21040030] Data Theft Risk</td>
1069
+ <td>VERY HIGH</td>
1070
+ <td>MEDIUM</td>
1071
+ <td>MEDIUM</td>
1072
+ <td>CONSERVATIVE</td>
1073
+ <td>Testing Rc</td>
1074
+ <td></td>
1075
+ </tr>
1076
+ <tr>
1077
+ <td><span class="sl-no">6</span></td>
1078
+ <td>
1079
+ [RID-21040030] Data Theft Risk</td>
1080
+ <td>VERY HIGH</td>
1081
+ <td>MEDIUM</td>
1082
+ <td>MEDIUM</td>
1083
+ <td>CONSERVATIVE</td>
1084
+ <td>Testing Rc</td>
1085
+ <td></td>
1086
+ </tr>
1087
+ <tr>
1088
+ <td><span class="sl-no">7</span></td>
1089
+ <td>
1090
+ [RID-21040030] Data Theft Risk</td>
1091
+ <td>VERY HIGH</td>
1092
+ <td>MEDIUM</td>
1093
+ <td>MEDIUM</td>
1094
+ <td>CONSERVATIVE</td>
1095
+ <td>Testing Rc</td>
1096
+ <td></td>
1097
+ </tr>
1098
+ <tr>
1099
+ <td><span class="sl-no">8</span></td>
1100
+ <td>
1101
+ [RID-21040030] Data Theft Risk</td>
1102
+ <td>VERY HIGH</td>
1103
+ <td>MEDIUM</td>
1104
+ <td>MEDIUM</td>
1105
+ <td>CONSERVATIVE</td>
1106
+ <td>Testing Rc</td>
1107
+ <td></td>
1108
+ </tr>
1109
+ <tr>
1110
+ <td><span class="sl-no">9</span></td>
1111
+ <td>
1112
+ [RID-21040030] Data Theft Risk</td>
1113
+ <td>VERY HIGH</td>
1114
+ <td>MEDIUM</td>
1115
+ <td>MEDIUM</td>
1116
+ <td>CONSERVATIVE</td>
1117
+ <td>Testing Rc</td>
1118
+ <td></td>
1119
+ </tr>
1120
+ <tr>
1121
+ <td><span class="sl-no">10</span></td>
1122
+ <td>
1123
+ [RID-21040030] Data Theft Risk</td>
1124
+ <td>VERY HIGH</td>
1125
+ <td>MEDIUM</td>
1126
+ <td>MEDIUM</td>
1127
+ <td>CONSERVATIVE</td>
1128
+ <td>Testing Rc</td>
1129
+ <td></td>
1130
+ </tr>
1131
+ </tbody>
1132
+ </table>
1133
+ </div>
1134
+
1135
+ </div>
1136
+ <div class="code-view vx-mb-5" id="tableFixHeader">
1137
+ <div class="code-navigation">
1138
+ <button class="active">HTML</button>
1139
+ <button>CSS</button>
1140
+ </div>
1141
+ <code class="language-markup">
1142
+ <script type="prism-html-markup">
1143
+ <table class="vx-table fix-header">
1144
+ <thead>
1145
+ <tr>
1146
+ <th>#</th>
1147
+ <th>RISK</th>
1148
+ <th>MITIGATION PRIORITY</th>
1149
+ <th>INHERENT RISK RATING</th>
1150
+ <th>RESIDUAL RISK RATING</th>
1151
+ <th>RISK APPETITE</th>
1152
+ <th>RESPONSIBILITY CENTER</th>
1153
+ <th></th>
1154
+ </tr>
1155
+ </thead>
1156
+ <tbody>
1157
+ <tr>
1158
+ <td><span class="sl-no">1</span></td>
1159
+ <td>
1160
+ [RID-21040030] Data Theft Risk</td>
1161
+ <td>VERY HIGH</td>
1162
+ <td>MEDIUM</td>
1163
+ <td>MEDIUM</td>
1164
+ <td>CONSERVATIVE</td>
1165
+ <td>Testing Rc</td>
1166
+ <td></td>
1167
+ </tr>
1168
+ <tr>
1169
+ <td><span class="sl-no">2</span></td>
1170
+ <td>[RID-21040030] Data Theft Risk</td>
1171
+ <td>VERY HIGH</td>
1172
+ <td>MEDIUM</td>
1173
+ <td>MEDIUM</td>
1174
+ <td>CONSERVATIVE</td>
1175
+ <td>Testing Rc</td>
1176
+ <td></td>
1177
+ </tr>
1178
+ </tbody>
1179
+ </table>
1180
+ </script>
1181
+ </code>
1182
+ </div>
1183
+ </div>
1184
+
1185
+ <div class="container" id="tableWithShorting">
1186
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table with Shorting</h3>
1187
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
1188
+ Click on header to short
1189
+ </p>
1190
+
1191
+ <div class="preview-block">
1192
+ <div class="action-buttons">
1193
+ <button class="vx-btn md transparent">
1194
+ <i class="icons">&#xe9b6;</i> Copy Code
1195
+ </button>
1196
+ <button class="vx-btn md transparent" data-tab="shortTable">
1197
+ <i class="icons rotate">&#xea95;</i> View Code
1198
+ </button>
1199
+ </div>
1200
+ <div class="preview-container">
1201
+ <table class="vx-table shorting">
1202
+ <thead>
1203
+ <tr>
1204
+ <th>#</th>
1205
+ <th>RISK <i class="icons">&#xea95;</i>
1206
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1207
+ </th>
1208
+ <th>MITIGATION PRIORITY <i class="icons">&#xea95;</i>
1209
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1210
+ </th>
1211
+ <th>INHERENT RISK RATING <i class="icons">&#xea95;</i>
1212
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1213
+ </th>
1214
+ <th>RESIDUAL RISK RATING <i class="icons">&#xea95;</i>
1215
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1216
+ </th>
1217
+ <th>RISK APPETITE <i class="icons">&#xea95;</i>
1218
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1219
+ </th>
1220
+ <th>RESPONSIBILITY CENTER <i class="icons">&#xea95;</i>
1221
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1222
+ </th>
1223
+ <th></th>
1224
+ </tr>
1225
+ </thead>
1226
+ <tbody>
1227
+ <tr>
1228
+ <td><span class="sl-no">1</span></td>
1229
+ <td>[RID-21040030] Data Theft Risk</td>
1230
+ <td>VERY HIGH</td>
1231
+ <td>MEDIUM</td>
1232
+ <td>MEDIUM</td>
1233
+ <td>CONSERVATIVE</td>
1234
+ <td>Testing Rc</td>
1235
+ <td></td>
1236
+ </tr>
1237
+ <tr>
1238
+ <td><span class="sl-no">2</span></td>
1239
+ <td>[RID-21040030] Data Theft Risk</td>
1240
+ <td>VERY HIGH</td>
1241
+ <td>MEDIUM</td>
1242
+ <td>MEDIUM</td>
1243
+ <td>CONSERVATIVE</td>
1244
+ <td>Testing Rc</td>
1245
+ <td></td>
1246
+ </tr>
1247
+ <tr>
1248
+ <td><span class="sl-no">3</span></td>
1249
+ <td>[RID-21040030] Data Theft Risk</td>
1250
+ <td>VERY HIGH</td>
1251
+ <td>MEDIUM</td>
1252
+ <td>MEDIUM</td>
1253
+ <td>CONSERVATIVE</td>
1254
+ <td>Testing Rc</td>
1255
+ <td></td>
1256
+ </tr>
1257
+ <tr>
1258
+ <td><span class="sl-no">4</span></td>
1259
+ <td>[RID-21040030] Data Theft Risk</td>
1260
+ <td>VERY HIGH</td>
1261
+ <td>MEDIUM</td>
1262
+ <td>MEDIUM</td>
1263
+ <td>CONSERVATIVE</td>
1264
+ <td>Testing Rc</td>
1265
+ <td></td>
1266
+ </tr>
1267
+ <tr>
1268
+ <td><span class="sl-no">5</span></td>
1269
+ <td>[RID-21040030] Data Theft Risk</td>
1270
+ <td>VERY HIGH</td>
1271
+ <td>MEDIUM</td>
1272
+ <td>MEDIUM</td>
1273
+ <td>CONSERVATIVE</td>
1274
+ <td>Testing Rc</td>
1275
+ <td></td>
1276
+ </tr>
1277
+ <tr>
1278
+ <td><span class="sl-no">6</span></td>
1279
+ <td>[RID-21040030] Data Theft Risk</td>
1280
+ <td>VERY HIGH</td>
1281
+ <td>MEDIUM</td>
1282
+ <td>MEDIUM</td>
1283
+ <td>CONSERVATIVE</td>
1284
+ <td>Testing Rc</td>
1285
+ <td></td>
1286
+ </tr>
1287
+ <tr>
1288
+ <td><span class="sl-no">7</span></td>
1289
+ <td>[RID-21040030] Data Theft Risk</td>
1290
+ <td>VERY HIGH</td>
1291
+ <td>MEDIUM</td>
1292
+ <td>MEDIUM</td>
1293
+ <td>CONSERVATIVE</td>
1294
+ <td>Testing Rc</td>
1295
+ <td></td>
1296
+ </tr>
1297
+ <tr>
1298
+ <td><span class="sl-no">8</span></td>
1299
+ <td>[RID-21040030] Data Theft Risk</td>
1300
+ <td>VERY HIGH</td>
1301
+ <td>MEDIUM</td>
1302
+ <td>MEDIUM</td>
1303
+ <td>CONSERVATIVE</td>
1304
+ <td>Testing Rc</td>
1305
+ <td></td>
1306
+ </tr>
1307
+ <tr>
1308
+ <td><span class="sl-no">9</span></td>
1309
+ <td>[RID-21040030] Data Theft Risk</td>
1310
+ <td>VERY HIGH</td>
1311
+ <td>MEDIUM</td>
1312
+ <td>MEDIUM</td>
1313
+ <td>CONSERVATIVE</td>
1314
+ <td>Testing Rc</td>
1315
+ <td></td>
1316
+ </tr>
1317
+ <tr>
1318
+ <td><span class="sl-no">10</span></td>
1319
+ <td>[RID-21040030] Data Theft Risk</td>
1320
+ <td>VERY HIGH</td>
1321
+ <td>MEDIUM</td>
1322
+ <td>MEDIUM</td>
1323
+ <td>CONSERVATIVE</td>
1324
+ <td>Testing Rc</td>
1325
+ <td></td>
1326
+ </tr>
1327
+ </tbody>
1328
+ </table>
1329
+ </div>
1330
+
1331
+ </div>
1332
+ <div class="code-view vx-mb-5" id="shortTable">
1333
+ <div class="code-navigation">
1334
+ <button class="active">HTML</button>
1335
+ <button>CSS</button>
1336
+ </div>
1337
+ <code class="language-markup">
1338
+ <script type="prism-html-markup">
1339
+ <table class="vx-table shorting">
1340
+ <thead>
1341
+ <tr>
1342
+ <th>#</th>
1343
+ <th>RISK <i class="icons">&#xea95;</i>
1344
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1345
+ </th>
1346
+ <th>MITIGATION PRIORITY <i class="icons">&#xea95;</i>
1347
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1348
+ </th>
1349
+ <th>INHERENT RISK RATING <i class="icons">&#xea95;</i>
1350
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1351
+ </th>
1352
+ <th>RESIDUAL RISK RATING <i class="icons">&#xea95;</i>
1353
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1354
+ </th>
1355
+ <th>RISK APPETITE <i class="icons">&#xea95;</i>
1356
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1357
+ </th>
1358
+ <th>RESPONSIBILITY CENTER <i class="icons">&#xea95;</i>
1359
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1360
+ </th>
1361
+ <th></th>
1362
+ </tr>
1363
+ </thead>
1364
+ <tbody>
1365
+ <tr>
1366
+ <td><span class="sl-no">1</span></td>
1367
+ <td>[RID-21040030] Data Theft Risk</td>
1368
+ <td>VERY HIGH</td>
1369
+ <td>MEDIUM</td>
1370
+ <td>MEDIUM</td>
1371
+ <td>CONSERVATIVE</td>
1372
+ <td>Testing Rc</td>
1373
+ <td></td>
1374
+ </tr>
1375
+ <tr>
1376
+ <td><span class="sl-no">2</span></td>
1377
+ <td>[RID-21040030] Data Theft Risk</td>
1378
+ <td>VERY HIGH</td>
1379
+ <td>MEDIUM</td>
1380
+ <td>MEDIUM</td>
1381
+ <td>CONSERVATIVE</td>
1382
+ <td>Testing Rc</td>
1383
+ <td></td>
1384
+ </tr>
1385
+ </tbody>
1386
+ </table>
1387
+ </script>
1388
+ </code>
1389
+ </div>
1390
+ </div>
1391
+
1392
+ <div class="container" id="tableWithShortingFixHeader">
1393
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table with Shorting &amp; fix header</h3>
1394
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
1395
+ Click on header to short and header will fix
1396
+ </p>
1397
+
1398
+ <div class="preview-block">
1399
+ <div class="action-buttons">
1400
+ <button class="vx-btn md transparent">
1401
+ <i class="icons">&#xe9b6;</i> Copy Code
1402
+ </button>
1403
+ <button class="vx-btn md transparent" data-tab="shortTable">
1404
+ <i class="icons rotate">&#xea95;</i> View Code
1405
+ </button>
1406
+ </div>
1407
+ <div class="preview-container">
1408
+ <table class="vx-table shorting fix-header">
1409
+ <thead>
1410
+ <tr>
1411
+ <th>#</th>
1412
+ <th>RISK <i class="icons">&#xea95;</i>
1413
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1414
+ </th>
1415
+ <th>MITIGATION PRIORITY <i class="icons">&#xea95;</i>
1416
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1417
+ </th>
1418
+ <th>INHERENT RISK RATING <i class="icons">&#xea95;</i>
1419
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1420
+ </th>
1421
+ <th>RESIDUAL RISK RATING <i class="icons">&#xea95;</i>
1422
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1423
+ </th>
1424
+ <th>RISK APPETITE <i class="icons">&#xea95;</i>
1425
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1426
+ </th>
1427
+ <th>RESPONSIBILITY CENTER <i class="icons">&#xea95;</i>
1428
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1429
+ </th>
1430
+ <th></th>
1431
+ </tr>
1432
+ </thead>
1433
+ <tbody>
1434
+ <tr>
1435
+ <td><span class="sl-no">1</span></td>
1436
+ <td>[RID-21040030] Data Theft Risk</td>
1437
+ <td>VERY HIGH</td>
1438
+ <td>MEDIUM</td>
1439
+ <td>MEDIUM</td>
1440
+ <td>CONSERVATIVE</td>
1441
+ <td>Testing Rc</td>
1442
+ <td></td>
1443
+ </tr>
1444
+ <tr>
1445
+ <td><span class="sl-no">2</span></td>
1446
+ <td>[RID-21040030] Data Theft Risk</td>
1447
+ <td>VERY HIGH</td>
1448
+ <td>MEDIUM</td>
1449
+ <td>MEDIUM</td>
1450
+ <td>CONSERVATIVE</td>
1451
+ <td>Testing Rc</td>
1452
+ <td></td>
1453
+ </tr>
1454
+ <tr>
1455
+ <td><span class="sl-no">3</span></td>
1456
+ <td>[RID-21040030] Data Theft Risk</td>
1457
+ <td>VERY HIGH</td>
1458
+ <td>MEDIUM</td>
1459
+ <td>MEDIUM</td>
1460
+ <td>CONSERVATIVE</td>
1461
+ <td>Testing Rc</td>
1462
+ <td></td>
1463
+ </tr>
1464
+ <tr>
1465
+ <td><span class="sl-no">4</span></td>
1466
+ <td>[RID-21040030] Data Theft Risk</td>
1467
+ <td>VERY HIGH</td>
1468
+ <td>MEDIUM</td>
1469
+ <td>MEDIUM</td>
1470
+ <td>CONSERVATIVE</td>
1471
+ <td>Testing Rc</td>
1472
+ <td></td>
1473
+ </tr>
1474
+ <tr>
1475
+ <td><span class="sl-no">5</span></td>
1476
+ <td>[RID-21040030] Data Theft Risk</td>
1477
+ <td>VERY HIGH</td>
1478
+ <td>MEDIUM</td>
1479
+ <td>MEDIUM</td>
1480
+ <td>CONSERVATIVE</td>
1481
+ <td>Testing Rc</td>
1482
+ <td></td>
1483
+ </tr>
1484
+ <tr>
1485
+ <td><span class="sl-no">6</span></td>
1486
+ <td>[RID-21040030] Data Theft Risk</td>
1487
+ <td>VERY HIGH</td>
1488
+ <td>MEDIUM</td>
1489
+ <td>MEDIUM</td>
1490
+ <td>CONSERVATIVE</td>
1491
+ <td>Testing Rc</td>
1492
+ <td></td>
1493
+ </tr>
1494
+ <tr>
1495
+ <td><span class="sl-no">7</span></td>
1496
+ <td>[RID-21040030] Data Theft Risk</td>
1497
+ <td>VERY HIGH</td>
1498
+ <td>MEDIUM</td>
1499
+ <td>MEDIUM</td>
1500
+ <td>CONSERVATIVE</td>
1501
+ <td>Testing Rc</td>
1502
+ <td></td>
1503
+ </tr>
1504
+ <tr>
1505
+ <td><span class="sl-no">8</span></td>
1506
+ <td>[RID-21040030] Data Theft Risk</td>
1507
+ <td>VERY HIGH</td>
1508
+ <td>MEDIUM</td>
1509
+ <td>MEDIUM</td>
1510
+ <td>CONSERVATIVE</td>
1511
+ <td>Testing Rc</td>
1512
+ <td></td>
1513
+ </tr>
1514
+ <tr>
1515
+ <td><span class="sl-no">9</span></td>
1516
+ <td>[RID-21040030] Data Theft Risk</td>
1517
+ <td>VERY HIGH</td>
1518
+ <td>MEDIUM</td>
1519
+ <td>MEDIUM</td>
1520
+ <td>CONSERVATIVE</td>
1521
+ <td>Testing Rc</td>
1522
+ <td></td>
1523
+ </tr>
1524
+ <tr>
1525
+ <td><span class="sl-no">10</span></td>
1526
+ <td>[RID-21040030] Data Theft Risk</td>
1527
+ <td>VERY HIGH</td>
1528
+ <td>MEDIUM</td>
1529
+ <td>MEDIUM</td>
1530
+ <td>CONSERVATIVE</td>
1531
+ <td>Testing Rc</td>
1532
+ <td></td>
1533
+ </tr>
1534
+ </tbody>
1535
+ </table>
1536
+ </div>
1537
+
1538
+ </div>
1539
+ <div class="code-view vx-mb-5" id="shortTable">
1540
+ <div class="code-navigation">
1541
+ <button class="active">HTML</button>
1542
+ <button>CSS</button>
1543
+ </div>
1544
+ <code class="language-markup">
1545
+ <script type="prism-html-markup">
1546
+ <table class="vx-table fix-header shorting">
1547
+ <thead>
1548
+ <tr>
1549
+ <th>#</th>
1550
+ <th>RISK <i class="icons">&#xea95;</i>
1551
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1552
+ </th>
1553
+ <th>MITIGATION PRIORITY <i class="icons">&#xea95;</i>
1554
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1555
+ </th>
1556
+ <th>INHERENT RISK RATING <i class="icons">&#xea95;</i>
1557
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1558
+ </th>
1559
+ <th>RESIDUAL RISK RATING <i class="icons">&#xea95;</i>
1560
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1561
+ </th>
1562
+ <th>RISK APPETITE <i class="icons">&#xea95;</i>
1563
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1564
+ </th>
1565
+ <th>RESPONSIBILITY CENTER <i class="icons">&#xea95;</i>
1566
+ <!-- <i class="icons">&#xe912;</i><i class="icons">&#xe928;</i> -->
1567
+ </th>
1568
+ <th></th>
1569
+ </tr>
1570
+ </thead>
1571
+ <tbody>
1572
+ <tr>
1573
+ <td><span class="sl-no">1</span></td>
1574
+ <td>[RID-21040030] Data Theft Risk</td>
1575
+ <td>VERY HIGH</td>
1576
+ <td>MEDIUM</td>
1577
+ <td>MEDIUM</td>
1578
+ <td>CONSERVATIVE</td>
1579
+ <td>Testing Rc</td>
1580
+ <td></td>
1581
+ </tr>
1582
+ <tr>
1583
+ <td><span class="sl-no">2</span></td>
1584
+ <td>[RID-21040030] Data Theft Risk</td>
1585
+ <td>VERY HIGH</td>
1586
+ <td>MEDIUM</td>
1587
+ <td>MEDIUM</td>
1588
+ <td>CONSERVATIVE</td>
1589
+ <td>Testing Rc</td>
1590
+ <td></td>
1591
+ </tr>
1592
+ </tbody>
1593
+ </table>
1594
+ </script>
1595
+ </code>
1596
+ </div>
1597
+ </div>
1598
+
1599
+ <div class="container" id="tableWithpagination">
1600
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Table with Pagination</h3>
1601
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">
1602
+ Click on header to short and header will fix
1603
+ </p>
1604
+
1605
+ <div class="preview-block">
1606
+ <div class="action-buttons">
1607
+ <button class="vx-btn md transparent">
1608
+ <i class="icons">&#xe9b6;</i> Copy Code
1609
+ </button>
1610
+ <button class="vx-btn md transparent" data-tab="paginationTable">
1611
+ <i class="icons rotate">&#xea95;</i> View Code
1612
+ </button>
1613
+ </div>
1614
+ <div class="preview-container">
1615
+ <div class="vx-pagination-container">
1616
+ <ul class="vx-pagination">
1617
+ <li><button><i class="icons">&#xe90f;</i></button></li>
1618
+ <li><button>1</button></li>
1619
+ <li><button>2</button></li>
1620
+ <li><button>3</button></li>
1621
+ <li><button>4</button></li>
1622
+ <li><button>5</button></li>
1623
+ <li><button><i class="icons">&#xe910;</i></button></li>
1624
+ </ul>
1625
+ <div class="vx-go-to-page">
1626
+ <ul class="vx-go-pagination">
1627
+ <li><span>Go to</span></li>
1628
+ <li>
1629
+ <input type="text" placeholder="Page No.">
1630
+ <button class="enter" type="button">
1631
+ <i class="icons">&#xea76;</i>
1632
+ </button>
1633
+ </li>
1634
+ <li><span>of 6</span></li>
1635
+ </ul>
1636
+ </div>
1637
+ </div>
1638
+
1639
+ <table class="vx-table">
1640
+ <thead>
1641
+ <tr>
1642
+ <th>#</th>
1643
+ <th>RISK</th>
1644
+ <th>MITIGATION PRIORITY</th>
1645
+ <th>INHERENT RISK RATING</th>
1646
+ <th>RESIDUAL RISK RATING</th>
1647
+ <th>RISK APPETITE</th>
1648
+ <th>RESPONSIBILITY CENTER</th>
1649
+ <th></th>
1650
+ </tr>
1651
+ </thead>
1652
+ <tbody>
1653
+ <tr>
1654
+ <td><span class="sl-no">1</span></td>
1655
+ <td>[RID-21040030] Data Theft Risk</td>
1656
+ <td>VERY HIGH</td>
1657
+ <td>MEDIUM</td>
1658
+ <td>MEDIUM</td>
1659
+ <td>CONSERVATIVE</td>
1660
+ <td>Testing Rc</td>
1661
+ <td></td>
1662
+ </tr>
1663
+ <tr>
1664
+ <td><span class="sl-no">2</span></td>
1665
+ <td>[RID-21040030] Data Theft Risk</td>
1666
+ <td>VERY HIGH</td>
1667
+ <td>MEDIUM</td>
1668
+ <td>MEDIUM</td>
1669
+ <td>CONSERVATIVE</td>
1670
+ <td>Testing Rc</td>
1671
+ <td></td>
1672
+ </tr>
1673
+ <tr>
1674
+ <td><span class="sl-no">3</span></td>
1675
+ <td>[RID-21040030] Data Theft Risk</td>
1676
+ <td>VERY HIGH</td>
1677
+ <td>MEDIUM</td>
1678
+ <td>MEDIUM</td>
1679
+ <td>CONSERVATIVE</td>
1680
+ <td>Testing Rc</td>
1681
+ <td></td>
1682
+ </tr>
1683
+ <tr>
1684
+ <td><span class="sl-no">4</span></td>
1685
+ <td>[RID-21040030] Data Theft Risk</td>
1686
+ <td>VERY HIGH</td>
1687
+ <td>MEDIUM</td>
1688
+ <td>MEDIUM</td>
1689
+ <td>CONSERVATIVE</td>
1690
+ <td>Testing Rc</td>
1691
+ <td></td>
1692
+ </tr>
1693
+ <tr>
1694
+ <td><span class="sl-no">5</span></td>
1695
+ <td>[RID-21040030] Data Theft Risk</td>
1696
+ <td>VERY HIGH</td>
1697
+ <td>MEDIUM</td>
1698
+ <td>MEDIUM</td>
1699
+ <td>CONSERVATIVE</td>
1700
+ <td>Testing Rc</td>
1701
+ <td></td>
1702
+ </tr>
1703
+ <tr>
1704
+ <td><span class="sl-no">6</span></td>
1705
+ <td>[RID-21040030] Data Theft Risk</td>
1706
+ <td>VERY HIGH</td>
1707
+ <td>MEDIUM</td>
1708
+ <td>MEDIUM</td>
1709
+ <td>CONSERVATIVE</td>
1710
+ <td>Testing Rc</td>
1711
+ <td></td>
1712
+ </tr>
1713
+ <tr>
1714
+ <td><span class="sl-no">7</span></td>
1715
+ <td>[RID-21040030] Data Theft Risk</td>
1716
+ <td>VERY HIGH</td>
1717
+ <td>MEDIUM</td>
1718
+ <td>MEDIUM</td>
1719
+ <td>CONSERVATIVE</td>
1720
+ <td>Testing Rc</td>
1721
+ <td></td>
1722
+ </tr>
1723
+ <tr>
1724
+ <td><span class="sl-no">8</span></td>
1725
+ <td>[RID-21040030] Data Theft Risk</td>
1726
+ <td>VERY HIGH</td>
1727
+ <td>MEDIUM</td>
1728
+ <td>MEDIUM</td>
1729
+ <td>CONSERVATIVE</td>
1730
+ <td>Testing Rc</td>
1731
+ <td></td>
1732
+ </tr>
1733
+ <tr>
1734
+ <td><span class="sl-no">9</span></td>
1735
+ <td>
1736
+ [RID-21040030] Data Theft Risk</td>
1737
+ <td>VERY HIGH</td>
1738
+ <td>MEDIUM</td>
1739
+ <td>MEDIUM</td>
1740
+ <td>CONSERVATIVE</td>
1741
+ <td>Testing Rc</td>
1742
+ <td></td>
1743
+ </tr>
1744
+ <tr>
1745
+ <td><span class="sl-no">10</span></td>
1746
+ <td>[RID-21040030] Data Theft Risk</td>
1747
+ <td>VERY HIGH</td>
1748
+ <td>MEDIUM</td>
1749
+ <td>MEDIUM</td>
1750
+ <td>CONSERVATIVE</td>
1751
+ <td>Testing Rc</td>
1752
+ <td></td>
1753
+ </tr>
1754
+ </tbody>
1755
+ </table>
1756
+ </div>
1757
+
1758
+ </div>
1759
+ <div class="code-view vx-mb-5" id="paginationTable">
1760
+ <div class="code-navigation">
1761
+ <button class="active">HTML</button>
1762
+ <button>CSS</button>
1763
+ </div>
1764
+ <code class="language-markup">
1765
+ <script type="prism-html-markup">
1766
+ <ul class="vx-pagination">
1767
+ <li><button><i class="icons">&#xe90f;</i></button></li>
1768
+ <li><button>1</button></li>
1769
+ <li><button>2</button></li>
1770
+ <li><button>3</button></li>
1771
+ <li><button>4</button></li>
1772
+ <li><button>5</button></li>
1773
+ <li><button><i class="icons">&#xe910;</i></button></li>
1774
+ </ul>
1775
+ <table class="vx-table shorting">
1776
+ <thead>
1777
+ <tr>
1778
+ <th>
1779
+ <span class="sl">#</span>
1780
+ <label class="vx-checkbox-item">
1781
+ <input type="checkbox">
1782
+ <span class="checkbox"><span class="inner"></span></span>
1783
+ <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
1784
+ <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
1785
+ <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
1786
+ </svg>
1787
+ </label>
1788
+ </th>
1789
+ <th>RISK</th>
1790
+ <th>MITIGATION PRIORITY</th>
1791
+ <th>INHERENT RISK RATING</th>
1792
+ <th>RESIDUAL RISK RATING</th>
1793
+ <th>RISK APPETITE</th>
1794
+ <th>RESPONSIBILITY CENTER</th>
1795
+ <th></th>
1796
+ </tr>
1797
+ </thead>
1798
+ <tbody>
1799
+ <tr>
1800
+ <td><span class="sl-no">1</span></td>
1801
+ <td>[RID-21040030] Data Theft Risk</td>
1802
+ <td>VERY HIGH</td>
1803
+ <td>MEDIUM</td>
1804
+ <td>MEDIUM</td>
1805
+ <td>CONSERVATIVE</td>
1806
+ <td>Testing Rc</td>
1807
+ <td></td>
1808
+ </tr>
1809
+ <tr>
1810
+ <td><span class="sl-no">2</span></td>
1811
+ <td>[RID-21040030] Data Theft Risk</td>
1812
+ <td>VERY HIGH</td>
1813
+ <td>MEDIUM</td>
1814
+ <td>MEDIUM</td>
1815
+ <td>CONSERVATIVE</td>
1816
+ <td>Testing Rc</td>
1817
+ <td></td>
1818
+ </tr>
1819
+ </tbody>
1820
+ </table>
1821
+ </script>
1822
+ </code>
1823
+ </div>
1824
+ </div>
1825
+
1826
+ <div class="container" id="tableWithExpandable">
1827
+ <h3 class="vx-fs-4 vx-label-txt vx-lh-8 vx-fw-600">Expandable table</h3>
1828
+ <p class="vx-paragraph-text vx-fs-paragraph vx-fw-400 vx-m-0 vx-mb-4">Add a text to describe the box
1829
+ size, space, animation color about the design.
1830
+ </p>
1831
+
1832
+ <div class="preview-block">
1833
+ <div class="action-buttons">
1834
+ <button class="vx-btn md transparent">
1835
+ <i class="icons">&#xe9b6;</i> Copy Code
1836
+ </button>
1837
+ <button class="vx-btn md transparent" data-tab="expandableTable">
1838
+ <i class="icons rotate">&#xea95;</i> View Code
1839
+ </button>
1840
+ </div>
1841
+ <div class="preview-container">
1842
+ <table class="vx-table">
1843
+ <thead>
1844
+ <tr>
1845
+ <th>#</th>
1846
+ <th>RISK</th>
1847
+ <th>MITIGATION PRIORITY</th>
1848
+ <th>INHERENT RISK RATING</th>
1849
+ <th>RESIDUAL RISK RATING</th>
1850
+ <th>RISK APPETITE</th>
1851
+ <th>RESPONSIBILITY CENTER</th>
1852
+ <th></th>
1853
+ </tr>
1854
+ </thead>
1855
+ <tbody>
1856
+ <tr>
1857
+ <td><span class="sl-no">1</span></td>
1858
+ <td>[RID-21040030] Data Theft Risk</td>
1859
+ <td>VERY HIGH</td>
1860
+ <td>MEDIUM</td>
1861
+ <td>MEDIUM</td>
1862
+ <td>CONSERVATIVE</td>
1863
+ <td>Testing Rc</td>
1864
+ <td><button class="vx-btn transparent action" data-tab="child1"><i
1865
+ class="icons">&#xe910;</i></button></td>
1866
+ </tr>
1867
+ </tbody>
1868
+ <tbody id="child1" class="childRow">
1869
+ <tr>
1870
+ <td><span class="sl-no">1.1</span></td>
1871
+ <td>
1872
+ <div class="vx-d-flex vx-align-center">
1873
+ <div class="vx-avatar-group">
1874
+ <div class="vx-avatar md">
1875
+ <span class="green">MD</span>
1876
+ </div>
1877
+ <div class="vx-avatar md">
1878
+ <span class="blue">SB</span>
1879
+ </div>
1880
+ </div>
1881
+ <div class="description">
1882
+ <button class="vx-d-block vx-mb-1">[RID-21040030] Data Theft
1883
+ Risk</button>
1884
+ <label class="vx-m-0 vx-d-block">Frequency: 3rd of every month by
1885
+ 11:59 PM</label>
1886
+ </div>
1887
+ </div>
1888
+ </td>
1889
+ <td>VERY HIGH</td>
1890
+ <td>MEDIUM</td>
1891
+ <td>MEDIUM</td>
1892
+ <td>CONSERVATIVE</td>
1893
+ <td>Testing Rc</td>
1894
+ <td><button class="vx-btn transparent"><i class="icons">&#xe911;</i></button>
1895
+ </td>
1896
+ </tr>
1897
+ <tr>
1898
+ <td><span class="sl-no">1.2</span></td>
1899
+ <td>
1900
+ <div class="vx-d-flex vx-align-center">
1901
+ <div class="vx-avatar-group">
1902
+ <div class="vx-avatar md">
1903
+ <span class="green">MD</span>
1904
+ </div>
1905
+ <div class="vx-avatar md">
1906
+ <span class="blue">SB</span>
1907
+ </div>
1908
+ </div>
1909
+ <div class="description">
1910
+ <button class="vx-d-block vx-mb-1">[RID-21040030] Data Theft
1911
+ Risk</button>
1912
+ <label class="vx-m-0 vx-d-block">Frequency: 3rd of every month by
1913
+ 11:59 PM</label>
1914
+ </div>
1915
+ </div>
1916
+ </td>
1917
+ <td>VERY HIGH</td>
1918
+ <td>MEDIUM</td>
1919
+ <td>MEDIUM</td>
1920
+ <td>CONSERVATIVE</td>
1921
+ <td>Testing Rc</td>
1922
+ <td><button class="vx-btn transparent"><i class="icons">&#xe911;</i></button>
1923
+ </td>
1924
+ </tr>
1925
+ <tr>
1926
+ <td><span class="sl-no">1.3</span></td>
1927
+ <td>
1928
+ <div class="vx-d-flex vx-align-center">
1929
+ <div class="vx-avatar-group">
1930
+ <div class="vx-avatar md">
1931
+ <span class="green">MD</span>
1932
+ </div>
1933
+ <div class="vx-avatar md">
1934
+ <span class="blue">SB</span>
1935
+ </div>
1936
+ </div>
1937
+ <div class="description">
1938
+ <button class="vx-d-block vx-mb-1">[RID-21040030] Data Theft
1939
+ Risk</button>
1940
+ <label class="vx-m-0 vx-d-block">Frequency: 3rd of every month by
1941
+ 11:59 PM</label>
1942
+ </div>
1943
+ </div>
1944
+ </td>
1945
+ <td>VERY HIGH</td>
1946
+ <td>MEDIUM</td>
1947
+ <td>MEDIUM</td>
1948
+ <td>CONSERVATIVE</td>
1949
+ <td>Testing Rc</td>
1950
+ <td><button class="vx-btn transparent"><i class="icons">&#xe911;</i></button>
1951
+ </td>
1952
+ </tr>
1953
+ </tbody>
1954
+ <tbody>
1955
+ <tr>
1956
+ <td><span class="sl-no">2</span></td>
1957
+ <td>[RID-21040030] Data Theft Risk</td>
1958
+ <td>VERY HIGH</td>
1959
+ <td>MEDIUM</td>
1960
+ <td>MEDIUM</td>
1961
+ <td>CONSERVATIVE</td>
1962
+ <td>Testing Rc</td>
1963
+ <td><button class="vx-btn transparent"><i class="icons">&#xe910;</i></button>
1964
+ </td>
1965
+ </tr>
1966
+ </tbody>
1967
+ <tbody>
1968
+ <tr>
1969
+ <td><span class="sl-no">3</span></td>
1970
+ <td>[RID-21040030] Data Theft Risk</td>
1971
+ <td>VERY HIGH</td>
1972
+ <td>MEDIUM</td>
1973
+ <td>MEDIUM</td>
1974
+ <td>CONSERVATIVE</td>
1975
+ <td>Testing Rc</td>
1976
+ <td><button class="vx-btn transparent"><i class="icons">&#xe910;</i></button>
1977
+ </td>
1978
+ </tr>
1979
+ </tbody>
1980
+ <tbody>
1981
+ <tr>
1982
+ <td><span class="sl-no">4</span></td>
1983
+ <td>[RID-21040030] Data Theft Risk</td>
1984
+ <td>VERY HIGH</td>
1985
+ <td>MEDIUM</td>
1986
+ <td>MEDIUM</td>
1987
+ <td>CONSERVATIVE</td>
1988
+ <td>Testing Rc</td>
1989
+ <td><button class="vx-btn transparent"><i class="icons">&#xe910;</i></button>
1990
+ </td>
1991
+ </tr>
1992
+ </tbody>
1993
+ <tbody>
1994
+ <tr>
1995
+ <td><span class="sl-no">5</span></td>
1996
+ <td>[RID-21040030] Data Theft Risk</td>
1997
+ <td>VERY HIGH</td>
1998
+ <td>MEDIUM</td>
1999
+ <td>MEDIUM</td>
2000
+ <td>CONSERVATIVE</td>
2001
+ <td>Testing Rc</td>
2002
+ <td><button class="vx-btn transparent"><i class="icons">&#xe910;</i></button>
2003
+ </td>
2004
+ </tr>
2005
+ </tbody>
2006
+ </table>
2007
+ </div>
2008
+
2009
+ </div>
2010
+ <div class="code-view vx-mb-5" id="expandableTable">
2011
+ <div class="code-navigation">
2012
+ <button class="active">HTML</button>
2013
+ <button>CSS</button>
2014
+ </div>
2015
+ <code class="language-markup">
2016
+ <script type="prism-html-markup">
2017
+ <table class="vx-table">
2018
+ <thead>
2019
+ <tr>
2020
+ <th>#</th>
2021
+ <th>RISK</th>
2022
+ <th>MITIGATION PRIORITY</th>
2023
+ <th>INHERENT RISK RATING</th>
2024
+ <th>RESIDUAL RISK RATING</th>
2025
+ <th>RISK APPETITE</th>
2026
+ <th>RESPONSIBILITY CENTER</th>
2027
+ <th></th>
2028
+ </tr>
2029
+ </thead>
2030
+ <tbody>
2031
+ <tr>
2032
+ <td>1</td>
2033
+ <td>
2034
+ [RID-21040030] Data Theft Risk</td>
2035
+ <td>VERY HIGH</td>
2036
+ <td>MEDIUM</td>
2037
+ <td>MEDIUM</td>
2038
+ <td>CONSERVATIVE</td>
2039
+ <td>Testing Rc</td>
2040
+ <td></td>
2041
+ </tr>
2042
+ <tr>
2043
+ <td>2</td>
2044
+ <td>
2045
+ [RID-21040030] Data Theft Risk</td>
2046
+ <td>VERY HIGH</td>
2047
+ <td>MEDIUM</td>
2048
+ <td>MEDIUM</td>
2049
+ <td>CONSERVATIVE</td>
2050
+ <td>Testing Rc</td>
2051
+ <td></td>
2052
+ </tr>
2053
+ </tbody>
2054
+ </table>
2055
+ </script>
2056
+ </code>
2057
+ </div>
2058
+ </div>
2059
+ </div>
2060
+ <div class="page-quick-menu">
2061
+ <div class="vx-sub-menu vx-p-0">
2062
+ <h3
2063
+ class="vx-title vx-lh-12 vx-tt-uppercase vx-fw-500 vx-m-0 vx-label-txt vx-d-flex vx-align-center vx-pr-3 vx-pl-3">
2064
+ Contents
2065
+ </h3>
2066
+ <ul class="vx-p-0">
2067
+ <li><a href="#conbesicTable"
2068
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3 active">Besic Table</a>
2069
+ </li>
2070
+ <li><a href="#tableWithCheckbox"
2071
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table with Checkbox</a>
2072
+ </li>
2073
+ <li><a href="#tableWithCheckboxSelected"
2074
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table with Checkbox
2075
+ selected</a></li>
2076
+ <li><a href="#tableWithFixHeader"
2077
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table with Fix header</a>
2078
+ </li>
2079
+ <li><a href="#tableWithShorting"
2080
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table with Shorting</a>
2081
+ </li>
2082
+ <li><a href="#tableWithShortingFixHeader"
2083
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table with Fix header
2084
+ &amp; Shorting</a></li>
2085
+ <li><a href="#tableWithpagination"
2086
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table with Pagination</a>
2087
+ </li>
2088
+ <li><a href="#tableWithExpandable"
2089
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3">Table with Expandable</a>
2090
+ </li>
2091
+ </ul>
2092
+ </div>
2093
+ </div>
2094
+ </div>
2095
+
2096
+ </section>
2097
+
2098
+
2099
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
2100
+ <script async src="../less.js"></script>
2101
+ <script src="../utility/prism.js"></script>
2102
+ <script>
2103
+ $(document).ready(function () {
2104
+ $('button').click(function () {
2105
+ var tab_id = $(this).attr('data-tab');
2106
+ // $('preview-block button').removeClass('active');
2107
+ $('.code-view vx-mb-5').removeClass('active');
2108
+ // $(this).addClass('active');
2109
+ $("#" + tab_id).toggleClass('active');
2110
+ })
2111
+ $('button.action').click(function () {
2112
+ var tab_id = $(this).attr('data-tab');
2113
+ $('preview-block button').removeClass('expaned');
2114
+ $('.childRow').removeClass('active');
2115
+ $(this).addClass('expaned');
2116
+ $("#" + tab_id).toggleClass('active');
2117
+ })
2118
+ $('#conbesicTable .code-navigation button').click(function () {
2119
+ var tab_id = $(this).attr('data-tab');
2120
+ $('#conbesicTable .code-navigation button').removeClass('active');
2121
+ $('#conbesicTable .language-markup').removeClass('active');
2122
+ console.log(tab_id)
2123
+ $("#" + tab_id).addClass('active');
2124
+ $(this).addClass('active');
2125
+ })
2126
+ $('#tableWithCheckbox .code-navigation button').click(function () {
2127
+ var tab_id = $(this).attr('data-tab');
2128
+ $('#tableWithCheckbox .code-navigation button').removeClass('active');
2129
+ $('#tableWithCheckbox .language-markup').removeClass('active');
2130
+ console.log(tab_id)
2131
+ $("#" + tab_id).addClass('active');
2132
+ $(this).addClass('active');
2133
+ })
2134
+ $('#tableWithCheckboxSelected .code-navigation button').click(function () {
2135
+ var tab_id = $(this).attr('data-tab');
2136
+ $('#tableWithCheckboxSelected .code-navigation button').removeClass('active');
2137
+ $('#tableWithCheckboxSelected .language-markup').removeClass('active');
2138
+ console.log(tab_id)
2139
+ $("#" + tab_id).addClass('active');
2140
+ $(this).addClass('active');
2141
+ })
2142
+ $('#tableWithFixHeader .code-navigation button').click(function () {
2143
+ var tab_id = $(this).attr('data-tab');
2144
+ $('#tableWithFixHeader .code-navigation button').removeClass('active');
2145
+ $('#tableWithFixHeader .language-markup').removeClass('active');
2146
+ console.log(tab_id)
2147
+ $("#" + tab_id).addClass('active');
2148
+ $(this).addClass('active');
2149
+ })
2150
+ $('#tableWithpagination .code-navigation button').click(function () {
2151
+ var tab_id = $(this).attr('data-tab');
2152
+ $('#tableWithpagination .code-navigation button').removeClass('active');
2153
+ $('#tableWithpagination .language-markup').removeClass('active');
2154
+ console.log(tab_id)
2155
+ $("#" + tab_id).addClass('active');
2156
+ $(this).addClass('active');
2157
+ })
2158
+ $('#tableWithShorting .code-navigation button').click(function () {
2159
+ var tab_id = $(this).attr('data-tab');
2160
+ $('#tableWithShorting .code-navigation button').removeClass('active');
2161
+ $('#tableWithShorting .language-markup').removeClass('active');
2162
+ console.log(tab_id)
2163
+ $("#" + tab_id).addClass('active');
2164
+ $(this).addClass('active');
2165
+ })
2166
+ $('#tableWithShortingFixHeader .code-navigation button').click(function () {
2167
+ var tab_id = $(this).attr('data-tab');
2168
+ $('#tableWithShortingFixHeader .code-navigation button').removeClass('active');
2169
+ $('#tableWithShortingFixHeader .language-markup').removeClass('active');
2170
+ console.log(tab_id)
2171
+ $("#" + tab_id).addClass('active');
2172
+ $(this).addClass('active');
2173
+ })
2174
+ $('#tableWithExpandable .code-navigation button').click(function () {
2175
+ var tab_id = $(this).attr('data-tab');
2176
+ $('#tableWithExpandable .code-navigation button').removeClass('active');
2177
+ $('#tableWithExpandable .language-markup').removeClass('active');
2178
+ console.log(tab_id)
2179
+ $("#" + tab_id).addClass('active');
2180
+ $(this).addClass('active');
2181
+ })
2182
+ })
2183
+ $('ul li a.vx-fs-3[href*="#"]')
2184
+ .not('[href="#"]')
2185
+ .not('[href="#0"]')
2186
+ .click(function (event) {
2187
+ if (
2188
+ location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
2189
+ &&
2190
+ location.hostname == this.hostname
2191
+ ) {
2192
+ $('ul li a.vx-fs-3[href*="#"]').removeClass('active');
2193
+ $(this).addClass('active');
2194
+ var target = $(this.hash);
2195
+ console.log(target);
2196
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
2197
+ if (target.length) {
2198
+ event.preventDefault();
2199
+ $('html, body').animate({
2200
+ scrollTop: target.offset().top - 110
2201
+ }, 100, function () {
2202
+ var $target = $(target);
2203
+ $target.focus();
2204
+ if ($target.is(":focus")) {
2205
+ return false;
2206
+ } else {
2207
+ $target.attr('tabindex', '-1');
2208
+ $target.focus();
2209
+ };
2210
+ });
2211
+ }
2212
+ }
2213
+ });
2214
+ </script>
2215
+
2216
+ </body>
2217
+
2218
+ </html>