@tabler/core 1.1.1 → 1.2.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 (273) hide show
  1. package/LICENSE +21 -0
  2. package/dist/css/tabler-flags.css +2 -2
  3. package/dist/css/tabler-flags.css.map +1 -1
  4. package/dist/css/tabler-flags.min.css +2 -2
  5. package/dist/css/tabler-flags.min.css.map +1 -1
  6. package/dist/css/tabler-flags.rtl.css +2 -2
  7. package/dist/css/tabler-flags.rtl.css.map +1 -1
  8. package/dist/css/tabler-flags.rtl.min.css +2 -2
  9. package/dist/css/tabler-flags.rtl.min.css.map +1 -1
  10. package/dist/css/tabler-marketing.css +6 -6
  11. package/dist/css/tabler-marketing.css.map +1 -1
  12. package/dist/css/tabler-marketing.min.css +2 -2
  13. package/dist/css/tabler-marketing.min.css.map +1 -1
  14. package/dist/css/tabler-marketing.rtl.css +6 -6
  15. package/dist/css/tabler-marketing.rtl.css.map +1 -1
  16. package/dist/css/tabler-marketing.rtl.min.css +2 -2
  17. package/dist/css/tabler-marketing.rtl.min.css.map +1 -1
  18. package/dist/css/tabler-payments.css +1 -1
  19. package/dist/css/tabler-payments.min.css +1 -1
  20. package/dist/css/tabler-payments.rtl.css +1 -1
  21. package/dist/css/tabler-payments.rtl.min.css +1 -1
  22. package/dist/css/tabler-props.css +448 -0
  23. package/dist/css/tabler-props.css.map +1 -0
  24. package/dist/css/tabler-props.min.css +8 -0
  25. package/dist/css/tabler-props.min.css.map +1 -0
  26. package/dist/css/tabler-props.rtl.css +447 -0
  27. package/dist/css/tabler-props.rtl.css.map +1 -0
  28. package/dist/css/tabler-props.rtl.min.css +8 -0
  29. package/dist/css/tabler-props.rtl.min.css.map +1 -0
  30. package/dist/css/tabler-socials.css +1 -1
  31. package/dist/css/tabler-socials.min.css +1 -1
  32. package/dist/css/tabler-socials.rtl.css +1 -1
  33. package/dist/css/tabler-socials.rtl.min.css +1 -1
  34. package/dist/css/tabler-themes.css +213 -0
  35. package/dist/css/tabler-themes.css.map +1 -0
  36. package/dist/css/tabler-themes.min.css +8 -0
  37. package/dist/css/tabler-themes.min.css.map +1 -0
  38. package/dist/css/tabler-themes.rtl.css +212 -0
  39. package/dist/css/tabler-themes.rtl.css.map +1 -0
  40. package/dist/css/tabler-themes.rtl.min.css +8 -0
  41. package/dist/css/tabler-themes.rtl.min.css.map +1 -0
  42. package/dist/css/tabler-vendors.css +31 -16
  43. package/dist/css/tabler-vendors.css.map +1 -1
  44. package/dist/css/tabler-vendors.min.css +2 -2
  45. package/dist/css/tabler-vendors.min.css.map +1 -1
  46. package/dist/css/tabler-vendors.rtl.css +31 -16
  47. package/dist/css/tabler-vendors.rtl.css.map +1 -1
  48. package/dist/css/tabler-vendors.rtl.min.css +2 -2
  49. package/dist/css/tabler-vendors.rtl.min.css.map +1 -1
  50. package/dist/css/tabler.css +7662 -8392
  51. package/dist/css/tabler.css.map +1 -1
  52. package/dist/css/tabler.min.css +2 -2
  53. package/dist/css/tabler.min.css.map +1 -1
  54. package/dist/css/tabler.rtl.css +7751 -8481
  55. package/dist/css/tabler.rtl.css.map +1 -1
  56. package/dist/css/tabler.rtl.min.css +2 -2
  57. package/dist/css/tabler.rtl.min.css.map +1 -1
  58. package/dist/img/flags/kr.svg +1 -1
  59. package/dist/js/tabler-theme.esm.js +38 -0
  60. package/dist/js/tabler-theme.esm.js.map +1 -0
  61. package/dist/js/tabler-theme.esm.min.js +8 -0
  62. package/dist/js/tabler-theme.esm.min.js.map +1 -0
  63. package/dist/js/tabler-theme.js +45 -0
  64. package/dist/js/tabler-theme.js.map +1 -0
  65. package/dist/js/tabler-theme.min.js +8 -0
  66. package/dist/js/tabler-theme.min.js.map +1 -0
  67. package/dist/js/tabler.esm.js +28 -21
  68. package/dist/js/tabler.esm.js.map +1 -1
  69. package/dist/js/tabler.esm.min.js +5 -5
  70. package/dist/js/tabler.esm.min.js.map +1 -1
  71. package/dist/js/tabler.js +36 -24
  72. package/dist/js/tabler.js.map +1 -1
  73. package/dist/js/tabler.min.js +5 -5
  74. package/dist/js/tabler.min.js.map +1 -1
  75. package/js/src/autosize.js +1 -4
  76. package/js/src/input-mask.js +1 -3
  77. package/js/tabler-theme.js +35 -0
  78. package/js/{tabler.esm.js → tabler.js} +16 -0
  79. package/package.json +10 -8
  80. package/scss/_bootstrap-components.scss +0 -5
  81. package/scss/_core.scss +4 -0
  82. package/scss/_props.scss +91 -0
  83. package/scss/_utilities.scss +30 -1
  84. package/scss/_variables-dark.scss +1 -1
  85. package/scss/_variables.scss +79 -60
  86. package/scss/helpers/_index.scss +143 -0
  87. package/scss/layout/_core.scss +1 -0
  88. package/scss/layout/_dark.scss +33 -38
  89. package/scss/layout/_navbar.scss +2 -1
  90. package/scss/layout/_page.scss +1 -0
  91. package/scss/layout/_root.scss +26 -34
  92. package/scss/marketing/_core.scss +1 -1
  93. package/scss/marketing/_pricing.scss +1 -1
  94. package/scss/mixins/_mixins.scss +6 -6
  95. package/scss/tabler-props.scss +1 -0
  96. package/scss/tabler-themes.scss +121 -0
  97. package/scss/tabler-vendors.scss +3 -1
  98. package/scss/tabler.scss +0 -1
  99. package/scss/ui/_accordion.scss +31 -26
  100. package/scss/ui/_alerts.scss +19 -8
  101. package/scss/ui/_avatars.scss +35 -9
  102. package/scss/ui/_badges.scss +1 -1
  103. package/scss/ui/_buttons.scss +15 -17
  104. package/scss/ui/_close.scss +55 -2
  105. package/scss/ui/_dropdowns.scss +1 -0
  106. package/scss/ui/_forms.scss +12 -2
  107. package/scss/ui/_markdown.scss +10 -1
  108. package/scss/ui/_nav.scss +11 -1
  109. package/scss/ui/_offcanvas.scss +1 -1
  110. package/scss/ui/_pagination.scss +2 -0
  111. package/scss/ui/_signature.scss +4 -2
  112. package/scss/ui/_steps.scss +4 -0
  113. package/scss/ui/_tables.scss +16 -0
  114. package/scss/ui/_tags.scss +1 -1
  115. package/scss/ui/_type.scss +69 -7
  116. package/scss/ui/forms/_form-colorinput.scss +1 -1
  117. package/scss/ui/forms/_form-imagecheck.scss +6 -5
  118. package/scss/ui/forms/_form-selectgroup.scss +1 -1
  119. package/scss/utils/_colors.scss +58 -11
  120. package/scss/utils/_scroll.scss +0 -2
  121. package/scss/vendor/_coloris.scss +6 -1
  122. package/scss/vendor/_fslightbox.scss +1 -1
  123. package/scss/vendor/_jsvectormap.scss +2 -3
  124. package/scss/vendor/_litepicker.scss +1 -0
  125. package/scss/vendor/_nouislider.scss +0 -2
  126. package/scss/vendor/_tinymce.scss +3 -3
  127. package/scss/vendor/_tom-select.scss +7 -4
  128. package/scss/vendor/_turbo.scss +3 -0
  129. package/scss/vendor/_wysiwyg.scss +34 -0
  130. package/docs/emails/index.mdx +0 -14
  131. package/docs/emails/introduction/compiled-html.mdx +0 -29
  132. package/docs/emails/introduction/contents.mdx +0 -63
  133. package/docs/emails/introduction/index.mdx +0 -9
  134. package/docs/emails/introduction/source-html.mdx +0 -26
  135. package/docs/icons/index.mdx +0 -13
  136. package/docs/icons/libraries/index.mdx +0 -5
  137. package/docs/icons/libraries/preact.mdx +0 -42
  138. package/docs/icons/libraries/react.mdx +0 -42
  139. package/docs/icons/libraries/solidjs.mdx +0 -42
  140. package/docs/icons/libraries/svelte.mdx +0 -43
  141. package/docs/icons/libraries/vue.mdx +0 -50
  142. package/docs/icons/libraries/webfont.mdx +0 -60
  143. package/docs/icons/plugins/figma.mdx +0 -15
  144. package/docs/icons/plugins/index.mdx +0 -4
  145. package/docs/icons/static-files/eps.mdx +0 -15
  146. package/docs/icons/static-files/index.mdx +0 -5
  147. package/docs/icons/static-files/pdf.mdx +0 -15
  148. package/docs/icons/static-files/png.mdx +0 -31
  149. package/docs/icons/static-files/svg.mdx +0 -85
  150. package/docs/illustrations/index.mdx +0 -8
  151. package/docs/illustrations/introduction/contents.mdx +0 -77
  152. package/docs/illustrations/introduction/customization.mdx +0 -1198
  153. package/docs/illustrations/introduction/index.mdx +0 -5
  154. package/docs/illustrations/introduction/license.mdx +0 -90
  155. package/docs/img/browsers/brave.svg +0 -1
  156. package/docs/img/browsers/chrome.svg +0 -1
  157. package/docs/img/browsers/edge.svg +0 -1
  158. package/docs/img/browsers/electron.svg +0 -1
  159. package/docs/img/browsers/firefox.svg +0 -1
  160. package/docs/img/browsers/internet-explorer.svg +0 -1
  161. package/docs/img/browsers/opera.svg +0 -1
  162. package/docs/img/browsers/safari.svg +0 -1
  163. package/docs/img/browsers/vivaldi.svg +0 -1
  164. package/docs/img/cover-illustrations-dark.png +0 -0
  165. package/docs/img/cover-illustrations.png +0 -0
  166. package/docs/img/cover-tabler-dark.png +0 -0
  167. package/docs/img/cover-tabler.png +0 -0
  168. package/docs/img/icons/figma-plugin.png +0 -0
  169. package/docs/img/icons/package-angular-dark.png +0 -0
  170. package/docs/img/icons/package-angular.png +0 -0
  171. package/docs/img/icons/package-eps-dark.png +0 -0
  172. package/docs/img/icons/package-eps.png +0 -0
  173. package/docs/img/icons/package-js-dark.png +0 -0
  174. package/docs/img/icons/package-js.png +0 -0
  175. package/docs/img/icons/package-pdf-dark.png +0 -0
  176. package/docs/img/icons/package-pdf.png +0 -0
  177. package/docs/img/icons/package-png-dark.png +0 -0
  178. package/docs/img/icons/package-png.png +0 -0
  179. package/docs/img/icons/package-preact-dark.png +0 -0
  180. package/docs/img/icons/package-preact.png +0 -0
  181. package/docs/img/icons/package-react-dark.png +0 -0
  182. package/docs/img/icons/package-react-native-dark.png +0 -0
  183. package/docs/img/icons/package-react-native.png +0 -0
  184. package/docs/img/icons/package-react.png +0 -0
  185. package/docs/img/icons/package-solidjs-dark.png +0 -0
  186. package/docs/img/icons/package-solidjs.png +0 -0
  187. package/docs/img/icons/package-sprite-dark.png +0 -0
  188. package/docs/img/icons/package-sprite.png +0 -0
  189. package/docs/img/icons/package-svelte-dark.png +0 -0
  190. package/docs/img/icons/package-svelte.png +0 -0
  191. package/docs/img/icons/package-svg-dark.png +0 -0
  192. package/docs/img/icons/package-svg.png +0 -0
  193. package/docs/img/icons/package-vue-dark.png +0 -0
  194. package/docs/img/icons/package-vue.png +0 -0
  195. package/docs/img/icons/package-webfont-dark.png +0 -0
  196. package/docs/img/icons/package-webfont.png +0 -0
  197. package/docs/index.mdx +0 -16
  198. package/docs/ui/base/colors.mdx +0 -83
  199. package/docs/ui/base/index.mdx +0 -6
  200. package/docs/ui/base/typography.mdx +0 -311
  201. package/docs/ui/components/alerts.mdx +0 -406
  202. package/docs/ui/components/autosize.mdx +0 -25
  203. package/docs/ui/components/avatars.mdx +0 -227
  204. package/docs/ui/components/badges.mdx +0 -112
  205. package/docs/ui/components/breadcrumb.mdx +0 -199
  206. package/docs/ui/components/buttons.mdx +0 -1213
  207. package/docs/ui/components/cards.mdx +0 -417
  208. package/docs/ui/components/carousel.mdx +0 -459
  209. package/docs/ui/components/charts.mdx +0 -697
  210. package/docs/ui/components/countup.mdx +0 -165
  211. package/docs/ui/components/datagrid.mdx +0 -120
  212. package/docs/ui/components/divider.mdx +0 -68
  213. package/docs/ui/components/dropdowns.mdx +0 -302
  214. package/docs/ui/components/dropzone.mdx +0 -88
  215. package/docs/ui/components/empty.mdx +0 -149
  216. package/docs/ui/components/icons.mdx +0 -392
  217. package/docs/ui/components/index.mdx +0 -6
  218. package/docs/ui/components/inline-player.mdx +0 -58
  219. package/docs/ui/components/modals.mdx +0 -297
  220. package/docs/ui/components/offcanvas.mdx +0 -70
  221. package/docs/ui/components/placeholder.mdx +0 -273
  222. package/docs/ui/components/popover.mdx +0 -142
  223. package/docs/ui/components/progress.mdx +0 -241
  224. package/docs/ui/components/range-slider.mdx +0 -32
  225. package/docs/ui/components/ribbons.mdx +0 -207
  226. package/docs/ui/components/segmented-control.mdx +0 -401
  227. package/docs/ui/components/spinners.mdx +0 -135
  228. package/docs/ui/components/statuses.mdx +0 -322
  229. package/docs/ui/components/steps.mdx +0 -174
  230. package/docs/ui/components/switch-icon.mdx +0 -386
  231. package/docs/ui/components/tables.mdx +0 -397
  232. package/docs/ui/components/tabs.mdx +0 -396
  233. package/docs/ui/components/timelines.mdx +0 -697
  234. package/docs/ui/components/tinymce.mdx +0 -46
  235. package/docs/ui/components/toasts.mdx +0 -126
  236. package/docs/ui/components/tooltips.mdx +0 -65
  237. package/docs/ui/components/tracking.mdx +0 -548
  238. package/docs/ui/components/vector-maps.mdx +0 -166
  239. package/docs/ui/forms/form-color-check.mdx +0 -220
  240. package/docs/ui/forms/form-elements.mdx +0 -632
  241. package/docs/ui/forms/form-fieldset.mdx +0 -45
  242. package/docs/ui/forms/form-helpers.mdx +0 -91
  243. package/docs/ui/forms/form-image-check.mdx +0 -213
  244. package/docs/ui/forms/form-input-mask.mdx +0 -61
  245. package/docs/ui/forms/form-selectboxes.mdx +0 -398
  246. package/docs/ui/forms/form-validation.mdx +0 -62
  247. package/docs/ui/forms/index.mdx +0 -6
  248. package/docs/ui/getting-started/browser-support.mdx +0 -28
  249. package/docs/ui/getting-started/customize.mdx +0 -28
  250. package/docs/ui/getting-started/download.mdx +0 -44
  251. package/docs/ui/getting-started/faq.mdx +0 -30
  252. package/docs/ui/getting-started/how-to-contribute.mdx +0 -84
  253. package/docs/ui/getting-started/index.mdx +0 -16
  254. package/docs/ui/getting-started/installation.mdx +0 -67
  255. package/docs/ui/getting-started/license.mdx +0 -30
  256. package/docs/ui/index.mdx +0 -8
  257. package/docs/ui/layout/index.mdx +0 -6
  258. package/docs/ui/layout/navbars.mdx +0 -164
  259. package/docs/ui/layout/navs-tabls.mdx +0 -201
  260. package/docs/ui/layout/page-headers.mdx +0 -365
  261. package/docs/ui/layout/page-layouts.mdx +0 -213
  262. package/docs/ui/plugins/flags.mdx +0 -316
  263. package/docs/ui/plugins/index.mdx +0 -6
  264. package/docs/ui/plugins/payments.mdx +0 -152
  265. package/docs/ui/plugins/social-icons.mdx +0 -135
  266. package/docs/ui/utilities/borders.mdx +0 -260
  267. package/docs/ui/utilities/cursors.mdx +0 -63
  268. package/docs/ui/utilities/index.mdx +0 -5
  269. package/docs/ui/utilities/interactions.mdx +0 -26
  270. package/docs/ui/utilities/margins.mdx +0 -234
  271. package/docs/ui/utilities/vertical-align.mdx +0 -66
  272. package/docs/ui/utilities/visually-hidden.mdx +0 -12
  273. package/js/tabler.umd.js +0 -15
@@ -1,397 +0,0 @@
1
- ---
2
- title: Tables
3
- summary: Tables are useful interface elements that allow you to visualize data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
4
- bootstrapLink: content/tables/
5
- description: Visualize data clearly with tables.
6
- ---
7
-
8
- ## Basic Table
9
-
10
- The basic table design has light padding and the presented data is separated with horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals.
11
-
12
- The `.table` class adds basic styling to a table:
13
-
14
- ```html example height="360px" scrollable
15
- <div class="table-responsive">
16
- <table class="table table-vcenter">
17
- <thead>
18
- <tr>
19
- <th>Name</th>
20
- <th>Title</th>
21
- <th>Email</th>
22
- <th>Role</th>
23
- <th class="w-1"></th>
24
- </tr>
25
- </thead>
26
- <tbody>
27
- <tr>
28
- <td>Paweł Kuna</td>
29
- <td class="text-secondary">UI Designer, Training</td>
30
- <td class="text-secondary">
31
- <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
32
- </td>
33
- <td class="text-secondary">User</td>
34
- <td>
35
- <a href="#">Edit</a>
36
- </td>
37
- </tr>
38
- <tr>
39
- <td>Jeffie Lewzey</td>
40
- <td class="text-secondary">Chemical Engineer, Support</td>
41
- <td class="text-secondary">
42
- <a href="#" class="text-reset">jlewzey1@seesaa.net</a>
43
- </td>
44
- <td class="text-secondary">Admin</td>
45
- <td>
46
- <a href="#">Edit</a>
47
- </td>
48
- </tr>
49
- <tr>
50
- <td>Mallory Hulme</td>
51
- <td class="text-secondary">Geologist IV, Support</td>
52
- <td class="text-secondary">
53
- <a href="#" class="text-reset">mhulme2@domainmarket.com</a>
54
- </td>
55
- <td class="text-secondary">User</td>
56
- <td>
57
- <a href="#">Edit</a>
58
- </td>
59
- </tr>
60
- <tr>
61
- <td>Dunn Slane</td>
62
- <td class="text-secondary">Research Nurse, Sales</td>
63
- <td class="text-secondary">
64
- <a href="#" class="text-reset">dslane3@epa.gov</a>
65
- </td>
66
- <td class="text-secondary">Owner</td>
67
- <td>
68
- <a href="#">Edit</a>
69
- </td>
70
- </tr>
71
- <tr>
72
- <td>Emmy Levet</td>
73
- <td class="text-secondary">VP Product Management, Accounting</td>
74
- <td class="text-secondary">
75
- <a href="#" class="text-reset">elevet4@senate.gov</a>
76
- </td>
77
- <td class="text-secondary">Admin</td>
78
- <td>
79
- <a href="#">Edit</a>
80
- </td>
81
- </tr>
82
- </tbody>
83
- </table>
84
- </div>
85
- ```
86
-
87
- ## Responsive tables
88
-
89
- Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
90
-
91
- ```html example height="12rem"
92
- <table class="table table-responsive">
93
- <thead>
94
- <tr>
95
- <th>#</th>
96
- <th class="text-nowrap">Heading 1</th>
97
- <th class="text-nowrap">Heading 2</th>
98
- <th class="text-nowrap">Heading 3</th>
99
- <th class="text-nowrap">Heading 4</th>
100
- <th class="text-nowrap">Heading 5</th>
101
- <th class="text-nowrap">Heading 6</th>
102
- <th class="text-nowrap">Heading 7</th>
103
- <th class="text-nowrap">Heading 8</th>
104
- <th class="text-nowrap">Heading 9</th>
105
- <th class="text-nowrap">Heading 10</th>
106
- </tr>
107
- </thead>
108
- <tbody>
109
- <tr>
110
- <th>1</th>
111
- <td>Cell</td>
112
- <td>Cell</td>
113
- <td>Cell</td>
114
- <td>Cell</td>
115
- <td>Cell</td>
116
- <td>Cell</td>
117
- <td>Cell</td>
118
- <td>Cell</td>
119
- <td>Cell</td>
120
- <td>Cell</td>
121
- </tr>
122
- <tr>
123
- <th>2</th>
124
- <td>Cell</td>
125
- <td>Cell</td>
126
- <td>Cell</td>
127
- <td>Cell</td>
128
- <td>Cell</td>
129
- <td>Cell</td>
130
- <td>Cell</td>
131
- <td>Cell</td>
132
- <td>Cell</td>
133
- <td>Cell</td>
134
- </tr>
135
- </tbody>
136
- </table>
137
- ```
138
-
139
- ## No wrap
140
-
141
- If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
142
-
143
- ```html example height="10rem"
144
- <div class="table-responsive">
145
- <table class="table table-vcenter table-nowrap">
146
- <thead>
147
- <tr>
148
- <th>Name</th>
149
- <th>Title</th>
150
- <th>Email</th>
151
- <th>Role</th>
152
- <th></th>
153
- <th class="w-1"></th>
154
- </tr>
155
- </thead>
156
- <tbody>
157
- <tr>
158
- <td>Paweł Kuna</td>
159
- <td class="text-secondary">UI Designer, Training</td>
160
- <td class="text-secondary">
161
- <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
162
- </td>
163
- <td class="text-secondary">User</td>
164
- <td>
165
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
166
- debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
167
- perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
168
- </td>
169
- <td>
170
- <a href="#">Edit</a>
171
- </td>
172
- </tr>
173
- </tbody>
174
- </table>
175
- </div>
176
- ```
177
-
178
- ```html
179
- <div class="table-responsive">
180
- <table class="table table-vcenter table-nowrap">
181
- <thead>
182
- <tr>
183
- <th>Name</th>
184
- <th>Title</th>
185
- <th>Email</th>
186
- <th>Role</th>
187
- <th></th>
188
- <th class="w-1"></th>
189
- </tr>
190
- </thead>
191
- <tbody>
192
- <tr>
193
- <td>Paweł Kuna</td>
194
- <td class="text-secondary">UI Designer, Training</td>
195
- <td class="text-secondary">
196
- <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
197
- </td>
198
- <td class="text-secondary">User</td>
199
- <td>
200
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
201
- debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
202
- perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
203
- </td>
204
- <td>
205
- <a href="#">Edit</a>
206
- </td>
207
- </tr>
208
- <tr>
209
- <td>Jeffie Lewzey</td>
210
- <td class="text-secondary">Chemical Engineer, Support</td>
211
- <td class="text-secondary">
212
- <a href="#" class="text-reset">jlewzey1@seesaa.net</a>
213
- </td>
214
- <td class="text-secondary">Admin</td>
215
- <td>
216
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
217
- debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
218
- perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
219
- </td>
220
- <td>
221
- <a href="#">Edit</a>
222
- </td>
223
- </tr>
224
- <tr>
225
- <td>Mallory Hulme</td>
226
- <td class="text-secondary">Geologist IV, Support</td>
227
- <td class="text-secondary">
228
- <a href="#" class="text-reset">mhulme2@domainmarket.com</a>
229
- </td>
230
- <td class="text-secondary">User</td>
231
- <td>
232
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
233
- debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
234
- perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
235
- </td>
236
- <td>
237
- <a href="#">Edit</a>
238
- </td>
239
- </tr>
240
- <tr>
241
- <td>Dunn Slane</td>
242
- <td class="text-secondary">Research Nurse, Sales</td>
243
- <td class="text-secondary">
244
- <a href="#" class="text-reset">dslane3@epa.gov</a>
245
- </td>
246
- <td class="text-secondary">Owner</td>
247
- <td>
248
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
249
- debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
250
- perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
251
- </td>
252
- <td>
253
- <a href="#">Edit</a>
254
- </td>
255
- </tr>
256
- <tr>
257
- <td>Emmy Levet</td>
258
- <td class="text-secondary">VP Product Management, Accounting</td>
259
- <td class="text-secondary">
260
- <a href="#" class="text-reset">elevet4@senate.gov</a>
261
- </td>
262
- <td class="text-secondary">Admin</td>
263
- <td>
264
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate
265
- debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum
266
- perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates.
267
- </td>
268
- <td>
269
- <a href="#">Edit</a>
270
- </td>
271
- </tr>
272
- </tbody>
273
- </table>
274
- </div>
275
- ```
276
-
277
- ## Table Variants
278
-
279
- ```html example height="360px" scrollable
280
- <table class="table">
281
- <thead>
282
- <tr>
283
- <th scope="col">Class</th>
284
- <th scope="col">Heading</th>
285
- <th scope="col">Heading</th>
286
- </tr>
287
- </thead>
288
- <tbody>
289
- <tr>
290
- <th scope="row">Default</th>
291
- <td>Cell</td>
292
- <td>Cell</td>
293
- </tr>
294
- <tr class="table-primary">
295
- <th scope="row">Primary</th>
296
- <td>Cell</td>
297
- <td>Cell</td>
298
- </tr>
299
- <tr class="table-secondary">
300
- <th scope="row">Secondary</th>
301
- <td>Cell</td>
302
- <td>Cell</td>
303
- </tr>
304
- <tr class="table-success">
305
- <th scope="row">Success</th>
306
- <td>Cell</td>
307
- <td>Cell</td>
308
- </tr>
309
- <tr class="table-danger">
310
- <th scope="row">Danger</th>
311
- <td>Cell</td>
312
- <td>Cell</td>
313
- </tr>
314
- <tr class="table-warning">
315
- <th scope="row">Warning</th>
316
- <td>Cell</td>
317
- <td>Cell</td>
318
- </tr>
319
- <tr class="table-info">
320
- <th scope="row">Info</th>
321
- <td>Cell</td>
322
- <td>Cell</td>
323
- </tr>
324
- <tr class="table-light">
325
- <th scope="row">Light</th>
326
- <td>Cell</td>
327
- <td>Cell</td>
328
- </tr>
329
- <tr class="table-dark">
330
- <th scope="row">Dark</th>
331
- <td>Cell</td>
332
- <td>Cell</td>
333
- </tr>
334
- </tbody>
335
- </table>
336
- ```
337
-
338
- ## Table with sticky header
339
-
340
- ```html example scrollable
341
- <table class="table">
342
- <thead class="sticky-top">
343
- <tr>
344
- <th scope="col">Class</th>
345
- <th scope="col">Heading</th>
346
- <th scope="col">Heading</th>
347
- </tr>
348
- </thead>
349
- <tbody>
350
- <tr>
351
- <th scope="row">Default</th>
352
- <td>Cell</td>
353
- <td>Cell</td>
354
- </tr>
355
- <tr>
356
- <th scope="row">Primary</th>
357
- <td>Cell</td>
358
- <td>Cell</td>
359
- </tr>
360
- <tr>
361
- <th scope="row">Secondary</th>
362
- <td>Cell</td>
363
- <td>Cell</td>
364
- </tr>
365
- <tr>
366
- <th scope="row">Success</th>
367
- <td>Cell</td>
368
- <td>Cell</td>
369
- </tr>
370
- <tr>
371
- <th scope="row">Danger</th>
372
- <td>Cell</td>
373
- <td>Cell</td>
374
- </tr>
375
- <tr>
376
- <th scope="row">Warning</th>
377
- <td>Cell</td>
378
- <td>Cell</td>
379
- </tr>
380
- <tr>
381
- <th scope="row">Info</th>
382
- <td>Cell</td>
383
- <td>Cell</td>
384
- </tr>
385
- <tr>
386
- <th scope="row">Light</th>
387
- <td>Cell</td>
388
- <td>Cell</td>
389
- </tr>
390
- <tr class="table-dark">
391
- <th scope="row">Dark</th>
392
- <td>Cell</td>
393
- <td>Cell</td>
394
- </tr>
395
- </tbody>
396
- </table>
397
- ```