@adminkit/core 3.5.0 → 4.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.
- package/LICENSE +21 -21
- package/README.md +216 -148
- package/dist/charts-chartjs.html +666 -0
- package/dist/css/app.css +6 -6
- package/dist/css/app.d.css.ts +3 -0
- package/dist/fonts/inter-cyrillic-300-normal-BnqRxXuy.woff2 +0 -0
- package/dist/fonts/inter-cyrillic-400-normal-obahsSVq.woff2 +0 -0
- package/dist/fonts/inter-cyrillic-600-normal-CWCymEST.woff2 +0 -0
- package/dist/fonts/inter-cyrillic-ext-300-normal-CgCALhwJ.woff2 +0 -0
- package/dist/fonts/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2 +0 -0
- package/dist/fonts/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2 +0 -0
- package/dist/fonts/inter-greek-300-normal-DmGD3g_f.woff2 +0 -0
- package/dist/fonts/inter-greek-400-normal-B4URO6DV.woff2 +0 -0
- package/dist/fonts/inter-greek-600-normal-plRanbMR.woff2 +0 -0
- package/dist/fonts/inter-greek-ext-300-normal-l2DDyC6M.woff2 +0 -0
- package/dist/fonts/inter-greek-ext-400-normal-DGGRlc-M.woff2 +0 -0
- package/dist/fonts/inter-greek-ext-600-normal-DRtmH8MT.woff2 +0 -0
- package/dist/fonts/inter-latin-300-normal-BVlfKGgI.woff2 +0 -0
- package/dist/fonts/inter-latin-400-normal-C38fXH4l.woff2 +0 -0
- package/dist/fonts/inter-latin-600-normal-LgqL8muc.woff2 +0 -0
- package/dist/fonts/inter-latin-ext-300-normal-CPgO9Ksf.woff2 +0 -0
- package/dist/fonts/inter-latin-ext-400-normal-C1nco2VV.woff2 +0 -0
- package/dist/fonts/inter-latin-ext-600-normal-D2bJ5OIk.woff2 +0 -0
- package/dist/fonts/inter-vietnamese-300-normal-Bdr24Bqb.woff2 +0 -0
- package/dist/fonts/inter-vietnamese-400-normal-DMkecbls.woff2 +0 -0
- package/dist/fonts/inter-vietnamese-600-normal-Cc8MFFhd.woff2 +0 -0
- package/dist/icons-lucide.html +7249 -0
- package/dist/img/screenshots/pro/ai-chat-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/ai-chat-dark.webp +0 -0
- package/dist/img/screenshots/pro/ai-chat-light-800.webp +0 -0
- package/dist/img/screenshots/pro/ai-chat-light.webp +0 -0
- package/dist/img/screenshots/pro/ai-usage-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/ai-usage-dark.webp +0 -0
- package/dist/img/screenshots/pro/ai-usage-light-800.webp +0 -0
- package/dist/img/screenshots/pro/ai-usage-light.webp +0 -0
- package/dist/img/screenshots/pro/analytics-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/analytics-dark.webp +0 -0
- package/dist/img/screenshots/pro/analytics-light-800.webp +0 -0
- package/dist/img/screenshots/pro/analytics-light.webp +0 -0
- package/dist/img/screenshots/pro/calendar-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/calendar-dark.webp +0 -0
- package/dist/img/screenshots/pro/calendar-light-800.webp +0 -0
- package/dist/img/screenshots/pro/calendar-light.webp +0 -0
- package/dist/img/screenshots/pro/crm-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/crm-dark.webp +0 -0
- package/dist/img/screenshots/pro/crm-light-800.webp +0 -0
- package/dist/img/screenshots/pro/crm-light.webp +0 -0
- package/dist/img/screenshots/pro/crypto-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/crypto-dark.webp +0 -0
- package/dist/img/screenshots/pro/crypto-light-800.webp +0 -0
- package/dist/img/screenshots/pro/crypto-light.webp +0 -0
- package/dist/img/screenshots/pro/datatables-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/datatables-dark.webp +0 -0
- package/dist/img/screenshots/pro/datatables-light-800.webp +0 -0
- package/dist/img/screenshots/pro/datatables-light.webp +0 -0
- package/dist/img/screenshots/pro/ecommerce-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/ecommerce-dark.webp +0 -0
- package/dist/img/screenshots/pro/ecommerce-light-800.webp +0 -0
- package/dist/img/screenshots/pro/ecommerce-light.webp +0 -0
- package/dist/img/screenshots/pro/settings-dark-800.webp +0 -0
- package/dist/img/screenshots/pro/settings-dark.webp +0 -0
- package/dist/img/screenshots/pro/settings-light-800.webp +0 -0
- package/dist/img/screenshots/pro/settings-light.webp +0 -0
- package/dist/index.html +918 -0
- package/dist/js/app.d.ts +78 -0
- package/dist/js/app.js +4 -3
- package/dist/js/head.js +1 -0
- package/dist/js/icons-all.js +1 -0
- package/dist/maps-google.html +469 -0
- package/dist/pages-404.html +46 -0
- package/dist/pages-500.html +46 -0
- package/dist/pages-blank.html +423 -0
- package/dist/pages-invoice.html +715 -0
- package/dist/pages-pricing.html +730 -0
- package/dist/pages-profile.html +787 -0
- package/dist/pages-sign-in.html +76 -0
- package/dist/pages-sign-up.html +73 -0
- package/dist/tables-bootstrap.html +856 -0
- package/dist/ui-alerts.html +745 -0
- package/dist/ui-buttons.html +529 -0
- package/dist/ui-cards.html +469 -0
- package/dist/ui-forms.html +584 -0
- package/dist/ui-modals.html +800 -0
- package/dist/ui-typography.html +560 -0
- package/dist/upgrade-to-pro.html +788 -0
- package/package.json +114 -88
- package/dist/css/app.css.map +0 -1
- package/dist/fonts/.gitkeep +0 -0
- package/dist/img/photos/unsplash-3.jpg +0 -0
- package/dist/js/app.js.LICENSE.txt +0 -514
- package/dist/js/app.js.map +0 -1
|
@@ -0,0 +1,856 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
7
|
+
<meta name="description"
|
|
8
|
+
content="Bootstrap tables demo for the free AdminKit template. Basic, striped, bordered, hoverable and responsive tables for your dashboard.">
|
|
9
|
+
<meta name="author" content="AdminKit">
|
|
10
|
+
<meta name="keywords" content="adminkit, bootstrap, bootstrap 5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
|
11
|
+
|
|
12
|
+
<link rel="shortcut icon" href="./img/icons/icon-48x48.png" />
|
|
13
|
+
|
|
14
|
+
<link rel="canonical" href="https://demo-basic.adminkit.io/tables-bootstrap" />
|
|
15
|
+
|
|
16
|
+
<title>Tables | AdminKit Demo</title>
|
|
17
|
+
|
|
18
|
+
<!-- Color mode before the first paint (src/js/head.js). Vite leaves vite-ignore tags as they are; vite.config.js builds the file. -->
|
|
19
|
+
<script src="js/head.js"></script>
|
|
20
|
+
|
|
21
|
+
<script type="module" crossorigin src="./js/app.js"></script>
|
|
22
|
+
<link rel="stylesheet" crossorigin href="./css/app.css">
|
|
23
|
+
<link rel="preload" href="./fonts/inter-latin-400-normal-C38fXH4l.woff2" as="font" type="font/woff2" crossorigin>
|
|
24
|
+
<link rel="preload" href="./fonts/inter-latin-600-normal-LgqL8muc.woff2" as="font" type="font/woff2" crossorigin>
|
|
25
|
+
</head>
|
|
26
|
+
|
|
27
|
+
<body>
|
|
28
|
+
<div class="wrapper">
|
|
29
|
+
<nav id="sidebar" class="sidebar js-sidebar offcanvas-lg offcanvas-start" tabindex="-1" aria-label="Sidebar">
|
|
30
|
+
<div class="sidebar-content js-simplebar">
|
|
31
|
+
<a class="sidebar-brand" href="index.html">
|
|
32
|
+
<span class="align-middle">AdminKit</span>
|
|
33
|
+
</a>
|
|
34
|
+
|
|
35
|
+
<ul class="sidebar-nav">
|
|
36
|
+
<li class="sidebar-header">
|
|
37
|
+
Pages
|
|
38
|
+
</li>
|
|
39
|
+
|
|
40
|
+
<li class="sidebar-item">
|
|
41
|
+
<a class="sidebar-link" href="index.html">
|
|
42
|
+
<i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Analytics</span>
|
|
43
|
+
</a>
|
|
44
|
+
</li>
|
|
45
|
+
|
|
46
|
+
<li class="sidebar-item">
|
|
47
|
+
<a class="sidebar-link" href="pages-profile.html">
|
|
48
|
+
<i class="align-middle" data-lucide="user"></i> <span class="align-middle">Profile</span>
|
|
49
|
+
</a>
|
|
50
|
+
</li>
|
|
51
|
+
|
|
52
|
+
<li class="sidebar-item">
|
|
53
|
+
<a class="sidebar-link" href="pages-invoice.html">
|
|
54
|
+
<i class="align-middle" data-lucide="credit-card"></i> <span class="align-middle">Invoice</span>
|
|
55
|
+
</a>
|
|
56
|
+
</li>
|
|
57
|
+
|
|
58
|
+
<li class="sidebar-item">
|
|
59
|
+
<a class="sidebar-link" href="pages-sign-in.html">
|
|
60
|
+
<i class="align-middle" data-lucide="log-in"></i> <span class="align-middle">Sign In</span>
|
|
61
|
+
</a>
|
|
62
|
+
</li>
|
|
63
|
+
|
|
64
|
+
<li class="sidebar-item">
|
|
65
|
+
<a class="sidebar-link" href="pages-sign-up.html">
|
|
66
|
+
<i class="align-middle" data-lucide="user-plus"></i> <span class="align-middle">Sign Up</span>
|
|
67
|
+
</a>
|
|
68
|
+
</li>
|
|
69
|
+
|
|
70
|
+
<li class="sidebar-item">
|
|
71
|
+
<a class="sidebar-link" href="pages-404.html">
|
|
72
|
+
<i class="align-middle" data-lucide="search-x"></i> <span class="align-middle">404 Page</span>
|
|
73
|
+
</a>
|
|
74
|
+
</li>
|
|
75
|
+
|
|
76
|
+
<li class="sidebar-item">
|
|
77
|
+
<a class="sidebar-link" href="pages-500.html">
|
|
78
|
+
<i class="align-middle" data-lucide="server-crash"></i> <span class="align-middle">500 Page</span>
|
|
79
|
+
</a>
|
|
80
|
+
</li>
|
|
81
|
+
|
|
82
|
+
<li class="sidebar-item">
|
|
83
|
+
<a class="sidebar-link" href="pages-pricing.html">
|
|
84
|
+
<i class="align-middle" data-lucide="tag"></i> <span class="align-middle">Pricing</span>
|
|
85
|
+
</a>
|
|
86
|
+
</li>
|
|
87
|
+
|
|
88
|
+
<li class="sidebar-item">
|
|
89
|
+
<a class="sidebar-link" href="pages-blank.html">
|
|
90
|
+
<i class="align-middle" data-lucide="book"></i> <span class="align-middle">Blank</span>
|
|
91
|
+
</a>
|
|
92
|
+
</li>
|
|
93
|
+
|
|
94
|
+
<li class="sidebar-header">
|
|
95
|
+
Tools & Components
|
|
96
|
+
</li>
|
|
97
|
+
|
|
98
|
+
<li class="sidebar-item">
|
|
99
|
+
<a class="sidebar-link" href="ui-alerts.html">
|
|
100
|
+
<i class="align-middle" data-lucide="bell"></i> <span class="align-middle">Alerts</span>
|
|
101
|
+
</a>
|
|
102
|
+
</li>
|
|
103
|
+
|
|
104
|
+
<li class="sidebar-item">
|
|
105
|
+
<a class="sidebar-link" href="ui-buttons.html">
|
|
106
|
+
<i class="align-middle" data-lucide="square"></i> <span class="align-middle">Buttons</span>
|
|
107
|
+
</a>
|
|
108
|
+
</li>
|
|
109
|
+
|
|
110
|
+
<li class="sidebar-item">
|
|
111
|
+
<a class="sidebar-link" href="ui-forms.html">
|
|
112
|
+
<i class="align-middle" data-lucide="square-check-big"></i> <span class="align-middle">Forms</span>
|
|
113
|
+
</a>
|
|
114
|
+
</li>
|
|
115
|
+
|
|
116
|
+
<li class="sidebar-item">
|
|
117
|
+
<a class="sidebar-link" href="ui-cards.html">
|
|
118
|
+
<i class="align-middle" data-lucide="layout-grid"></i> <span class="align-middle">Cards</span>
|
|
119
|
+
</a>
|
|
120
|
+
</li>
|
|
121
|
+
|
|
122
|
+
<li class="sidebar-item">
|
|
123
|
+
<a class="sidebar-link" href="ui-modals.html">
|
|
124
|
+
<i class="align-middle" data-lucide="app-window"></i> <span class="align-middle">Modals</span>
|
|
125
|
+
</a>
|
|
126
|
+
</li>
|
|
127
|
+
|
|
128
|
+
<li class="sidebar-item">
|
|
129
|
+
<a class="sidebar-link" href="ui-typography.html">
|
|
130
|
+
<i class="align-middle" data-lucide="text-align-start"></i> <span class="align-middle">Typography</span>
|
|
131
|
+
</a>
|
|
132
|
+
</li>
|
|
133
|
+
|
|
134
|
+
<li class="sidebar-item">
|
|
135
|
+
<a class="sidebar-link" href="icons-lucide.html">
|
|
136
|
+
<i class="align-middle" data-lucide="coffee"></i> <span class="align-middle">Icons</span>
|
|
137
|
+
</a>
|
|
138
|
+
</li>
|
|
139
|
+
|
|
140
|
+
<li class="sidebar-item active">
|
|
141
|
+
<a class="sidebar-link" href="tables-bootstrap.html">
|
|
142
|
+
<i class="align-middle" data-lucide="list"></i> <span class="align-middle">Tables</span>
|
|
143
|
+
</a>
|
|
144
|
+
</li>
|
|
145
|
+
|
|
146
|
+
<li class="sidebar-header">
|
|
147
|
+
Plugins & Addons
|
|
148
|
+
</li>
|
|
149
|
+
|
|
150
|
+
<li class="sidebar-item">
|
|
151
|
+
<a class="sidebar-link" href="charts-chartjs.html">
|
|
152
|
+
<i class="align-middle" data-lucide="chart-no-axes-column"></i> <span class="align-middle">Charts</span>
|
|
153
|
+
</a>
|
|
154
|
+
</li>
|
|
155
|
+
|
|
156
|
+
<li class="sidebar-item">
|
|
157
|
+
<a class="sidebar-link" href="maps-google.html">
|
|
158
|
+
<i class="align-middle" data-lucide="map"></i> <span class="align-middle">Maps</span>
|
|
159
|
+
</a>
|
|
160
|
+
</li>
|
|
161
|
+
</ul>
|
|
162
|
+
|
|
163
|
+
<div class="sidebar-cta">
|
|
164
|
+
<div class="sidebar-cta-content">
|
|
165
|
+
<strong class="d-inline-block mb-2">Upgrade to Pro</strong>
|
|
166
|
+
<div class="mb-3 text-sm">
|
|
167
|
+
AdminKit PRO, the premium version, has more components.
|
|
168
|
+
</div>
|
|
169
|
+
<div class="d-grid">
|
|
170
|
+
<a href="upgrade-to-pro.html" class="btn btn-primary">Upgrade to Pro</a>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</nav>
|
|
176
|
+
|
|
177
|
+
<div class="main">
|
|
178
|
+
<nav class="navbar navbar-expand navbar-light navbar-bg" aria-label="Top bar">
|
|
179
|
+
<button type="button" class="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
|
|
180
|
+
<i class="hamburger align-self-center"></i>
|
|
181
|
+
</button>
|
|
182
|
+
|
|
183
|
+
<div class="navbar-collapse collapse">
|
|
184
|
+
<ul class="navbar-nav navbar-align">
|
|
185
|
+
<li class="nav-item dropdown">
|
|
186
|
+
<a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
187
|
+
<div class="position-relative">
|
|
188
|
+
<span class="visually-hidden">Notifications</span>
|
|
189
|
+
<i class="align-middle" data-lucide="bell"></i>
|
|
190
|
+
<span class="indicator">4</span>
|
|
191
|
+
</div>
|
|
192
|
+
</a>
|
|
193
|
+
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown">
|
|
194
|
+
<div class="dropdown-menu-header">
|
|
195
|
+
4 New Notifications
|
|
196
|
+
</div>
|
|
197
|
+
<div class="list-group">
|
|
198
|
+
<a href="#" class="list-group-item">
|
|
199
|
+
<div class="row g-0 align-items-center">
|
|
200
|
+
<div class="col-2">
|
|
201
|
+
<i class="text-danger" data-lucide="circle-alert"></i>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="col-10">
|
|
204
|
+
<div class="text-dark">Update completed</div>
|
|
205
|
+
<div class="text-body-secondary small mt-1">Restart server 12 to complete the update.</div>
|
|
206
|
+
<div class="text-body-secondary small mt-1">30m ago</div>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</a>
|
|
210
|
+
<a href="#" class="list-group-item">
|
|
211
|
+
<div class="row g-0 align-items-center">
|
|
212
|
+
<div class="col-2">
|
|
213
|
+
<i class="text-warning" data-lucide="bell"></i>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="col-10">
|
|
216
|
+
<div class="text-dark">Lorem ipsum</div>
|
|
217
|
+
<div class="text-body-secondary small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
|
|
218
|
+
<div class="text-body-secondary small mt-1">2h ago</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</a>
|
|
222
|
+
<a href="#" class="list-group-item">
|
|
223
|
+
<div class="row g-0 align-items-center">
|
|
224
|
+
<div class="col-2">
|
|
225
|
+
<i class="text-primary" data-lucide="house"></i>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="col-10">
|
|
228
|
+
<div class="text-dark">Login from 192.186.1.8</div>
|
|
229
|
+
<div class="text-body-secondary small mt-1">5h ago</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</a>
|
|
233
|
+
<a href="#" class="list-group-item">
|
|
234
|
+
<div class="row g-0 align-items-center">
|
|
235
|
+
<div class="col-2">
|
|
236
|
+
<i class="text-success" data-lucide="user-plus"></i>
|
|
237
|
+
</div>
|
|
238
|
+
<div class="col-10">
|
|
239
|
+
<div class="text-dark">New connection</div>
|
|
240
|
+
<div class="text-body-secondary small mt-1">Christina accepted your request.</div>
|
|
241
|
+
<div class="text-body-secondary small mt-1">14h ago</div>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</a>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="dropdown-menu-footer">
|
|
247
|
+
<a href="#" class="text-body-secondary">Show all notifications</a>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</li>
|
|
251
|
+
<li class="nav-item dropdown">
|
|
252
|
+
<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
|
|
253
|
+
aria-label="Messages">
|
|
254
|
+
<div class="position-relative">
|
|
255
|
+
<i class="align-middle" data-lucide="message-square"></i>
|
|
256
|
+
</div>
|
|
257
|
+
</a>
|
|
258
|
+
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown">
|
|
259
|
+
<div class="dropdown-menu-header">
|
|
260
|
+
<div class="position-relative">
|
|
261
|
+
4 New Messages
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="list-group">
|
|
265
|
+
<a href="#" class="list-group-item">
|
|
266
|
+
<div class="row g-0 align-items-center">
|
|
267
|
+
<div class="col-2">
|
|
268
|
+
<img src="./img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker" width="40"
|
|
269
|
+
height="40">
|
|
270
|
+
</div>
|
|
271
|
+
<div class="col-10 ps-2">
|
|
272
|
+
<div class="text-dark">Vanessa Tucker</div>
|
|
273
|
+
<div class="text-body-secondary small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
|
|
274
|
+
<div class="text-body-secondary small mt-1">15m ago</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</a>
|
|
278
|
+
<a href="#" class="list-group-item">
|
|
279
|
+
<div class="row g-0 align-items-center">
|
|
280
|
+
<div class="col-2">
|
|
281
|
+
<img src="./img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris" width="40"
|
|
282
|
+
height="40">
|
|
283
|
+
</div>
|
|
284
|
+
<div class="col-10 ps-2">
|
|
285
|
+
<div class="text-dark">William Harris</div>
|
|
286
|
+
<div class="text-body-secondary small mt-1">Curabitur ligula sapien euismod vitae.</div>
|
|
287
|
+
<div class="text-body-secondary small mt-1">2h ago</div>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
</a>
|
|
291
|
+
<a href="#" class="list-group-item">
|
|
292
|
+
<div class="row g-0 align-items-center">
|
|
293
|
+
<div class="col-2">
|
|
294
|
+
<img src="./img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason" width="40"
|
|
295
|
+
height="40">
|
|
296
|
+
</div>
|
|
297
|
+
<div class="col-10 ps-2">
|
|
298
|
+
<div class="text-dark">Christina Mason</div>
|
|
299
|
+
<div class="text-body-secondary small mt-1">Pellentesque auctor neque nec urna.</div>
|
|
300
|
+
<div class="text-body-secondary small mt-1">4h ago</div>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</a>
|
|
304
|
+
<a href="#" class="list-group-item">
|
|
305
|
+
<div class="row g-0 align-items-center">
|
|
306
|
+
<div class="col-2">
|
|
307
|
+
<img src="./img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman" width="40"
|
|
308
|
+
height="40">
|
|
309
|
+
</div>
|
|
310
|
+
<div class="col-10 ps-2">
|
|
311
|
+
<div class="text-dark">Sharon Lessman</div>
|
|
312
|
+
<div class="text-body-secondary small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>
|
|
313
|
+
<div class="text-body-secondary small mt-1">5h ago</div>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</a>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="dropdown-menu-footer">
|
|
319
|
+
<a href="#" class="text-body-secondary">Show all messages</a>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</li>
|
|
323
|
+
<li class="nav-item dropdown">
|
|
324
|
+
<a class="nav-icon dropdown-toggle" href="#" id="colorModeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
|
|
325
|
+
aria-label="Color mode" data-color-mode-toggle>
|
|
326
|
+
<span data-color-mode-icon="light" hidden><i class="align-middle" data-lucide="sun"></i></span>
|
|
327
|
+
<span data-color-mode-icon="dark" hidden><i class="align-middle" data-lucide="moon"></i></span>
|
|
328
|
+
<span data-color-mode-icon="auto"><i class="align-middle" data-lucide="sun-moon"></i></span>
|
|
329
|
+
</a>
|
|
330
|
+
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="colorModeDropdown">
|
|
331
|
+
<li>
|
|
332
|
+
<button type="button" class="dropdown-item" data-color-mode-value="light" aria-pressed="false">
|
|
333
|
+
<i class="align-middle me-1" data-lucide="sun"></i> Light
|
|
334
|
+
</button>
|
|
335
|
+
</li>
|
|
336
|
+
<li>
|
|
337
|
+
<button type="button" class="dropdown-item" data-color-mode-value="dark" aria-pressed="false">
|
|
338
|
+
<i class="align-middle me-1" data-lucide="moon"></i> Dark
|
|
339
|
+
</button>
|
|
340
|
+
</li>
|
|
341
|
+
<li>
|
|
342
|
+
<button type="button" class="dropdown-item" data-color-mode-value="auto" aria-pressed="false">
|
|
343
|
+
<i class="align-middle me-1" data-lucide="sun-moon"></i> Auto
|
|
344
|
+
</button>
|
|
345
|
+
</li>
|
|
346
|
+
</ul>
|
|
347
|
+
</li>
|
|
348
|
+
<li class="nav-item dropdown">
|
|
349
|
+
<a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
|
|
350
|
+
aria-label="Account">
|
|
351
|
+
<i class="align-middle" data-lucide="settings"></i>
|
|
352
|
+
</a>
|
|
353
|
+
|
|
354
|
+
<a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
355
|
+
<img src="./img/avatars/avatar.jpg" class="avatar img-fluid rounded me-1" alt="Charles Hall" width="40" height="40" /> <span
|
|
356
|
+
class="text-dark">Charles Hall</span>
|
|
357
|
+
</a>
|
|
358
|
+
<div class="dropdown-menu dropdown-menu-end">
|
|
359
|
+
<a class="dropdown-item" href="pages-profile.html"><i class="align-middle me-1" data-lucide="user"></i> Profile</a>
|
|
360
|
+
<a class="dropdown-item" href="#"><i class="align-middle me-1" data-lucide="chart-pie"></i> Analytics</a>
|
|
361
|
+
<div class="dropdown-divider"></div>
|
|
362
|
+
<a class="dropdown-item" href="index.html"><i class="align-middle me-1" data-lucide="settings"></i> Settings & Privacy</a>
|
|
363
|
+
<a class="dropdown-item" href="#"><i class="align-middle me-1" data-lucide="circle-question-mark"></i> Help Center</a>
|
|
364
|
+
<div class="dropdown-divider"></div>
|
|
365
|
+
<a class="dropdown-item" href="#">Log out</a>
|
|
366
|
+
</div>
|
|
367
|
+
</li>
|
|
368
|
+
</ul>
|
|
369
|
+
</div>
|
|
370
|
+
</nav>
|
|
371
|
+
|
|
372
|
+
<main class="content ak-reveal-cards">
|
|
373
|
+
<div class="container-fluid p-0">
|
|
374
|
+
<div class="mb-3">
|
|
375
|
+
<h1 class="h3 d-inline align-middle">Tables</h1>
|
|
376
|
+
<a class="badge bg-dark text-light ms-2 d-print-none" href="upgrade-to-pro.html">
|
|
377
|
+
Get DataTables examples
|
|
378
|
+
</a>
|
|
379
|
+
</div>
|
|
380
|
+
<div class="row">
|
|
381
|
+
<div class="col-12 col-xl-6">
|
|
382
|
+
<div class="card">
|
|
383
|
+
<div class="card-header">
|
|
384
|
+
<h2 class="card-title">Basic Table</h2>
|
|
385
|
+
<p class="h6 card-subtitle text-body-secondary">Using the most basic table markup, here’s how .table-based tables look in
|
|
386
|
+
Bootstrap.</p>
|
|
387
|
+
</div>
|
|
388
|
+
<table class="table">
|
|
389
|
+
<thead>
|
|
390
|
+
<tr>
|
|
391
|
+
<th style="width:40%;">Name</th>
|
|
392
|
+
<th style="width:25%">Phone Number</th>
|
|
393
|
+
<th class="d-none d-md-table-cell" style="width:25%">Date of Birth</th>
|
|
394
|
+
<th>Actions</th>
|
|
395
|
+
</tr>
|
|
396
|
+
</thead>
|
|
397
|
+
<tbody>
|
|
398
|
+
<tr>
|
|
399
|
+
<td>Vanessa Tucker</td>
|
|
400
|
+
<td>864-348-0485</td>
|
|
401
|
+
<td class="d-none d-md-table-cell">June 21, 1961</td>
|
|
402
|
+
<td class="table-action">
|
|
403
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
404
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
405
|
+
</td>
|
|
406
|
+
</tr>
|
|
407
|
+
<tr>
|
|
408
|
+
<td>William Harris</td>
|
|
409
|
+
<td>914-939-2458</td>
|
|
410
|
+
<td class="d-none d-md-table-cell">May 15, 1948</td>
|
|
411
|
+
<td class="table-action">
|
|
412
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
413
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
414
|
+
</td>
|
|
415
|
+
</tr>
|
|
416
|
+
<tr>
|
|
417
|
+
<td>Sharon Lessman</td>
|
|
418
|
+
<td>704-993-5435</td>
|
|
419
|
+
<td class="d-none d-md-table-cell">September 14, 1965</td>
|
|
420
|
+
<td class="table-action">
|
|
421
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
422
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
423
|
+
</td>
|
|
424
|
+
</tr>
|
|
425
|
+
<tr>
|
|
426
|
+
<td>Christina Mason</td>
|
|
427
|
+
<td>765-382-8195</td>
|
|
428
|
+
<td class="d-none d-md-table-cell">April 2, 1971</td>
|
|
429
|
+
<td class="table-action">
|
|
430
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
431
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
432
|
+
</td>
|
|
433
|
+
</tr>
|
|
434
|
+
<tr>
|
|
435
|
+
<td>Robin Schneiders</td>
|
|
436
|
+
<td>202-672-1407</td>
|
|
437
|
+
<td class="d-none d-md-table-cell">October 12, 1966</td>
|
|
438
|
+
<td class="table-action">
|
|
439
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
440
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
441
|
+
</td>
|
|
442
|
+
</tr>
|
|
443
|
+
</tbody>
|
|
444
|
+
</table>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
|
|
448
|
+
<div class="col-12 col-xl-6">
|
|
449
|
+
<div class="card">
|
|
450
|
+
<div class="card-header">
|
|
451
|
+
<h2 class="card-title">Striped Rows</h2>
|
|
452
|
+
<p class="h6 card-subtitle text-body-secondary">Use <code>.table-striped</code> to add zebra-striping to any table row
|
|
453
|
+
within the <code><tbody></code>.</p>
|
|
454
|
+
</div>
|
|
455
|
+
<table class="table table-striped">
|
|
456
|
+
<thead>
|
|
457
|
+
<tr>
|
|
458
|
+
<th style="width:40%;">Name</th>
|
|
459
|
+
<th style="width:25%">Phone Number</th>
|
|
460
|
+
<th class="d-none d-md-table-cell" style="width:25%">Date of Birth</th>
|
|
461
|
+
<th>Actions</th>
|
|
462
|
+
</tr>
|
|
463
|
+
</thead>
|
|
464
|
+
<tbody>
|
|
465
|
+
<tr>
|
|
466
|
+
<td>Vanessa Tucker</td>
|
|
467
|
+
<td>864-348-0485</td>
|
|
468
|
+
<td class="d-none d-md-table-cell">June 21, 1961</td>
|
|
469
|
+
<td class="table-action">
|
|
470
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
471
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
472
|
+
</td>
|
|
473
|
+
</tr>
|
|
474
|
+
<tr>
|
|
475
|
+
<td>William Harris</td>
|
|
476
|
+
<td>914-939-2458</td>
|
|
477
|
+
<td class="d-none d-md-table-cell">May 15, 1948</td>
|
|
478
|
+
<td class="table-action">
|
|
479
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
480
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
481
|
+
</td>
|
|
482
|
+
</tr>
|
|
483
|
+
<tr>
|
|
484
|
+
<td>Sharon Lessman</td>
|
|
485
|
+
<td>704-993-5435</td>
|
|
486
|
+
<td class="d-none d-md-table-cell">September 14, 1965</td>
|
|
487
|
+
<td class="table-action">
|
|
488
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
489
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
490
|
+
</td>
|
|
491
|
+
</tr>
|
|
492
|
+
<tr>
|
|
493
|
+
<td>Christina Mason</td>
|
|
494
|
+
<td>765-382-8195</td>
|
|
495
|
+
<td class="d-none d-md-table-cell">April 2, 1971</td>
|
|
496
|
+
<td class="table-action">
|
|
497
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
498
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
499
|
+
</td>
|
|
500
|
+
</tr>
|
|
501
|
+
<tr>
|
|
502
|
+
<td>Robin Schneiders</td>
|
|
503
|
+
<td>202-672-1407</td>
|
|
504
|
+
<td class="d-none d-md-table-cell">October 12, 1966</td>
|
|
505
|
+
<td class="table-action">
|
|
506
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
507
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
508
|
+
</td>
|
|
509
|
+
</tr>
|
|
510
|
+
</tbody>
|
|
511
|
+
</table>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
|
|
515
|
+
<div class="col-12 col-xl-6">
|
|
516
|
+
<div class="card">
|
|
517
|
+
<div class="card-header">
|
|
518
|
+
<h2 class="card-title">Condensed Table</h2>
|
|
519
|
+
<p class="h6 card-subtitle text-body-secondary">Add <code>.table-sm</code> to make tables more compact by cutting cell
|
|
520
|
+
padding in half.</p>
|
|
521
|
+
</div>
|
|
522
|
+
<table class="table table-striped table-sm">
|
|
523
|
+
<thead>
|
|
524
|
+
<tr>
|
|
525
|
+
<th>Operating system</th>
|
|
526
|
+
<th class="text-end">Users</th>
|
|
527
|
+
<th class="text-end">Share</th>
|
|
528
|
+
</tr>
|
|
529
|
+
</thead>
|
|
530
|
+
<tbody>
|
|
531
|
+
<tr>
|
|
532
|
+
<td>Windows</td>
|
|
533
|
+
<td class="text-end">8,232</td>
|
|
534
|
+
<td class="text-end">38.0%</td>
|
|
535
|
+
</tr>
|
|
536
|
+
<tr>
|
|
537
|
+
<td>macOS</td>
|
|
538
|
+
<td class="text-end">4,108</td>
|
|
539
|
+
<td class="text-end">19.0%</td>
|
|
540
|
+
</tr>
|
|
541
|
+
<tr>
|
|
542
|
+
<td>Android</td>
|
|
543
|
+
<td class="text-end">3,950</td>
|
|
544
|
+
<td class="text-end">18.3%</td>
|
|
545
|
+
</tr>
|
|
546
|
+
<tr>
|
|
547
|
+
<td>iOS</td>
|
|
548
|
+
<td class="text-end">3,317</td>
|
|
549
|
+
<td class="text-end">15.3%</td>
|
|
550
|
+
</tr>
|
|
551
|
+
<tr>
|
|
552
|
+
<td>Linux</td>
|
|
553
|
+
<td class="text-end">1,184</td>
|
|
554
|
+
<td class="text-end">5.5%</td>
|
|
555
|
+
</tr>
|
|
556
|
+
<tr>
|
|
557
|
+
<td>ChromeOS</td>
|
|
558
|
+
<td class="text-end">642</td>
|
|
559
|
+
<td class="text-end">3.0%</td>
|
|
560
|
+
</tr>
|
|
561
|
+
<tr>
|
|
562
|
+
<td>Other</td>
|
|
563
|
+
<td class="text-end">205</td>
|
|
564
|
+
<td class="text-end">0.9%</td>
|
|
565
|
+
</tr>
|
|
566
|
+
</tbody>
|
|
567
|
+
</table>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
|
|
571
|
+
<div class="col-12 col-xl-6">
|
|
572
|
+
<div class="card">
|
|
573
|
+
<div class="card-header">
|
|
574
|
+
<h2 class="card-title">Hoverable Rows</h2>
|
|
575
|
+
<p class="h6 card-subtitle text-body-secondary">Add <code>.table-hover</code> to enable a hover state on table rows within a
|
|
576
|
+
<code><tbody></code>.</p>
|
|
577
|
+
</div>
|
|
578
|
+
<table class="table table-striped table-hover">
|
|
579
|
+
<thead>
|
|
580
|
+
<tr>
|
|
581
|
+
<th>Name</th>
|
|
582
|
+
<th>Phone Number</th>
|
|
583
|
+
<th>Date of Birth</th>
|
|
584
|
+
</tr>
|
|
585
|
+
</thead>
|
|
586
|
+
<tbody>
|
|
587
|
+
<tr>
|
|
588
|
+
<td>
|
|
589
|
+
<img src="./img/avatars/avatar-5.jpg" width="48" height="48" class="rounded-circle me-2" alt=""> Vanessa Tucker
|
|
590
|
+
</td>
|
|
591
|
+
<td>864-348-0485</td>
|
|
592
|
+
<td>June 21, 1961</td>
|
|
593
|
+
</tr>
|
|
594
|
+
<tr>
|
|
595
|
+
<td>
|
|
596
|
+
<img src="./img/avatars/avatar-2.jpg" width="48" height="48" class="rounded-circle me-2" alt=""> William Harris
|
|
597
|
+
</td>
|
|
598
|
+
<td>914-939-2458</td>
|
|
599
|
+
<td>May 15, 1948</td>
|
|
600
|
+
</tr>
|
|
601
|
+
<tr>
|
|
602
|
+
<td>
|
|
603
|
+
<img src="./img/avatars/avatar-3.jpg" width="48" height="48" class="rounded-circle me-2" alt=""> Sharon Lessman
|
|
604
|
+
</td>
|
|
605
|
+
<td>704-993-5435</td>
|
|
606
|
+
<td>September 14, 1965</td>
|
|
607
|
+
</tr>
|
|
608
|
+
<tr>
|
|
609
|
+
<td>
|
|
610
|
+
<img src="./img/avatars/avatar-4.jpg" width="48" height="48" class="rounded-circle me-2" alt=""> Christina Mason
|
|
611
|
+
</td>
|
|
612
|
+
<td>765-382-8195</td>
|
|
613
|
+
<td>April 2, 1971</td>
|
|
614
|
+
</tr>
|
|
615
|
+
</tbody>
|
|
616
|
+
</table>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<div class="col-12 col-xl-6">
|
|
621
|
+
<div class="card">
|
|
622
|
+
<div class="card-header">
|
|
623
|
+
<h2 class="card-title">Bordered Table</h2>
|
|
624
|
+
<p class="h6 card-subtitle text-body-secondary">Add <code>.table-bordered</code> for borders on all sides of the table and
|
|
625
|
+
cells.</p>
|
|
626
|
+
</div>
|
|
627
|
+
<table class="table table-bordered">
|
|
628
|
+
<thead>
|
|
629
|
+
<tr>
|
|
630
|
+
<th style="width:40%;">Name</th>
|
|
631
|
+
<th style="width:25%">Phone Number</th>
|
|
632
|
+
<th class="d-none d-md-table-cell" style="width:25%">Date of Birth</th>
|
|
633
|
+
<th>Actions</th>
|
|
634
|
+
</tr>
|
|
635
|
+
</thead>
|
|
636
|
+
<tbody>
|
|
637
|
+
<tr>
|
|
638
|
+
<td>Vanessa Tucker</td>
|
|
639
|
+
<td>864-348-0485</td>
|
|
640
|
+
<td class="d-none d-md-table-cell">June 21, 1961</td>
|
|
641
|
+
<td class="table-action">
|
|
642
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
643
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
644
|
+
</td>
|
|
645
|
+
</tr>
|
|
646
|
+
<tr>
|
|
647
|
+
<td>William Harris</td>
|
|
648
|
+
<td>914-939-2458</td>
|
|
649
|
+
<td class="d-none d-md-table-cell">May 15, 1948</td>
|
|
650
|
+
<td class="table-action">
|
|
651
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
652
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
653
|
+
</td>
|
|
654
|
+
</tr>
|
|
655
|
+
<tr>
|
|
656
|
+
<td>Sharon Lessman</td>
|
|
657
|
+
<td>704-993-5435</td>
|
|
658
|
+
<td class="d-none d-md-table-cell">September 14, 1965</td>
|
|
659
|
+
<td class="table-action">
|
|
660
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
661
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
662
|
+
</td>
|
|
663
|
+
</tr>
|
|
664
|
+
<tr>
|
|
665
|
+
<td>Christina Mason</td>
|
|
666
|
+
<td>765-382-8195</td>
|
|
667
|
+
<td class="d-none d-md-table-cell">April 2, 1971</td>
|
|
668
|
+
<td class="table-action">
|
|
669
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
670
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
671
|
+
</td>
|
|
672
|
+
</tr>
|
|
673
|
+
<tr>
|
|
674
|
+
<td>Robin Schneiders</td>
|
|
675
|
+
<td>202-672-1407</td>
|
|
676
|
+
<td class="d-none d-md-table-cell">October 12, 1966</td>
|
|
677
|
+
<td class="table-action">
|
|
678
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
679
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
680
|
+
</td>
|
|
681
|
+
</tr>
|
|
682
|
+
</tbody>
|
|
683
|
+
</table>
|
|
684
|
+
</div>
|
|
685
|
+
</div>
|
|
686
|
+
|
|
687
|
+
<div class="col-12 col-xl-6">
|
|
688
|
+
<div class="card">
|
|
689
|
+
<div class="card-header">
|
|
690
|
+
<h2 class="card-title">Contextual Classes</h2>
|
|
691
|
+
<p class="h6 card-subtitle text-body-secondary">Use contextual classes to color table rows or individual cells.</p>
|
|
692
|
+
</div>
|
|
693
|
+
<table class="table">
|
|
694
|
+
<thead>
|
|
695
|
+
<tr>
|
|
696
|
+
<th style="width:40%;">Name</th>
|
|
697
|
+
<th style="width:25%">Phone Number</th>
|
|
698
|
+
<th class="d-none d-md-table-cell" style="width:25%">Date of Birth</th>
|
|
699
|
+
<th>Actions</th>
|
|
700
|
+
</tr>
|
|
701
|
+
</thead>
|
|
702
|
+
<tbody>
|
|
703
|
+
<tr>
|
|
704
|
+
<td>Vanessa Tucker</td>
|
|
705
|
+
<td>864-348-0485</td>
|
|
706
|
+
<td class="d-none d-md-table-cell">June 21, 1961</td>
|
|
707
|
+
<td class="table-action">
|
|
708
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
709
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
710
|
+
</td>
|
|
711
|
+
</tr>
|
|
712
|
+
<tr class="table-primary">
|
|
713
|
+
<td>William Harris</td>
|
|
714
|
+
<td>914-939-2458</td>
|
|
715
|
+
<td class="d-none d-md-table-cell">May 15, 1948</td>
|
|
716
|
+
<td class="table-action">
|
|
717
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
718
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
719
|
+
</td>
|
|
720
|
+
</tr>
|
|
721
|
+
<tr>
|
|
722
|
+
<td>Sharon Lessman</td>
|
|
723
|
+
<td>704-993-5435</td>
|
|
724
|
+
<td class="d-none d-md-table-cell">September 14, 1965</td>
|
|
725
|
+
<td class="table-action">
|
|
726
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
727
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
728
|
+
</td>
|
|
729
|
+
</tr>
|
|
730
|
+
<tr class="table-success">
|
|
731
|
+
<td>Christina Mason</td>
|
|
732
|
+
<td>765-382-8195</td>
|
|
733
|
+
<td class="d-none d-md-table-cell">April 2, 1971</td>
|
|
734
|
+
<td class="table-action">
|
|
735
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
736
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
737
|
+
</td>
|
|
738
|
+
</tr>
|
|
739
|
+
<tr>
|
|
740
|
+
<td>Robin Schneiders</td>
|
|
741
|
+
<td>202-672-1407</td>
|
|
742
|
+
<td class="d-none d-md-table-cell">October 12, 1966</td>
|
|
743
|
+
<td class="table-action">
|
|
744
|
+
<a href="#" aria-label="Edit"><i class="align-middle" data-lucide="pen"></i></a>
|
|
745
|
+
<a href="#" aria-label="Delete"><i class="align-middle" data-lucide="trash"></i></a>
|
|
746
|
+
</td>
|
|
747
|
+
</tr>
|
|
748
|
+
</tbody>
|
|
749
|
+
</table>
|
|
750
|
+
</div>
|
|
751
|
+
</div>
|
|
752
|
+
|
|
753
|
+
<div class="col-12">
|
|
754
|
+
<div class="card">
|
|
755
|
+
<div class="card-header">
|
|
756
|
+
<h2 class="card-title" id="table-responsive-title">Always responsive</h2>
|
|
757
|
+
<p class="h6 card-subtitle text-body-secondary">Across every breakpoint, use <code>.table-responsive</code> for horizontally
|
|
758
|
+
scrolling tables.</p>
|
|
759
|
+
</div>
|
|
760
|
+
<div class="table-responsive" role="region" tabindex="0" aria-labelledby="table-responsive-title">
|
|
761
|
+
<table class="table mb-0">
|
|
762
|
+
<thead>
|
|
763
|
+
<tr>
|
|
764
|
+
<th scope="col">#</th>
|
|
765
|
+
<th scope="col">Heading</th>
|
|
766
|
+
<th scope="col">Heading</th>
|
|
767
|
+
<th scope="col">Heading</th>
|
|
768
|
+
<th scope="col">Heading</th>
|
|
769
|
+
<th scope="col">Heading</th>
|
|
770
|
+
<th scope="col">Heading</th>
|
|
771
|
+
<th scope="col">Heading</th>
|
|
772
|
+
<th scope="col">Heading</th>
|
|
773
|
+
<th scope="col">Heading</th>
|
|
774
|
+
</tr>
|
|
775
|
+
</thead>
|
|
776
|
+
<tbody>
|
|
777
|
+
<tr>
|
|
778
|
+
<th scope="row">1</th>
|
|
779
|
+
<td>Cell</td>
|
|
780
|
+
<td>Cell</td>
|
|
781
|
+
<td>Cell</td>
|
|
782
|
+
<td>Cell</td>
|
|
783
|
+
<td>Cell</td>
|
|
784
|
+
<td>Cell</td>
|
|
785
|
+
<td>Cell</td>
|
|
786
|
+
<td>Cell</td>
|
|
787
|
+
<td>Cell</td>
|
|
788
|
+
</tr>
|
|
789
|
+
<tr>
|
|
790
|
+
<th scope="row">2</th>
|
|
791
|
+
<td>Cell</td>
|
|
792
|
+
<td>Cell</td>
|
|
793
|
+
<td>Cell</td>
|
|
794
|
+
<td>Cell</td>
|
|
795
|
+
<td>Cell</td>
|
|
796
|
+
<td>Cell</td>
|
|
797
|
+
<td>Cell</td>
|
|
798
|
+
<td>Cell</td>
|
|
799
|
+
<td>Cell</td>
|
|
800
|
+
</tr>
|
|
801
|
+
<tr>
|
|
802
|
+
<th scope="row">3</th>
|
|
803
|
+
<td>Cell</td>
|
|
804
|
+
<td>Cell</td>
|
|
805
|
+
<td>Cell</td>
|
|
806
|
+
<td>Cell</td>
|
|
807
|
+
<td>Cell</td>
|
|
808
|
+
<td>Cell</td>
|
|
809
|
+
<td>Cell</td>
|
|
810
|
+
<td>Cell</td>
|
|
811
|
+
<td>Cell</td>
|
|
812
|
+
</tr>
|
|
813
|
+
</tbody>
|
|
814
|
+
</table>
|
|
815
|
+
</div>
|
|
816
|
+
</div>
|
|
817
|
+
</div>
|
|
818
|
+
</div>
|
|
819
|
+
</div>
|
|
820
|
+
</main>
|
|
821
|
+
|
|
822
|
+
<footer class="footer ak-reveal">
|
|
823
|
+
<div class="container-fluid">
|
|
824
|
+
<div class="row text-body-secondary">
|
|
825
|
+
<div class="col-6 text-start">
|
|
826
|
+
<p class="mb-0">
|
|
827
|
+
<a class="text-body-secondary" href="https://adminkit.io/" target="_blank"><strong>AdminKit</strong></a> - <a
|
|
828
|
+
class="text-body-secondary" href="https://adminkit.io/" target="_blank"><strong>Bootstrap Admin Template</strong></a> ©
|
|
829
|
+
2026
|
|
830
|
+
</p>
|
|
831
|
+
</div>
|
|
832
|
+
<div class="col-6 text-end">
|
|
833
|
+
<ul class="list-inline">
|
|
834
|
+
<li class="list-inline-item">
|
|
835
|
+
<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Support</a>
|
|
836
|
+
</li>
|
|
837
|
+
<li class="list-inline-item">
|
|
838
|
+
<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Help Center</a>
|
|
839
|
+
</li>
|
|
840
|
+
<li class="list-inline-item">
|
|
841
|
+
<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Privacy</a>
|
|
842
|
+
</li>
|
|
843
|
+
<li class="list-inline-item">
|
|
844
|
+
<a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Terms</a>
|
|
845
|
+
</li>
|
|
846
|
+
</ul>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
</div>
|
|
850
|
+
</footer>
|
|
851
|
+
</div>
|
|
852
|
+
</div>
|
|
853
|
+
|
|
854
|
+
</body>
|
|
855
|
+
|
|
856
|
+
</html>
|