PageRenderTime 62ms CodeModel.GetById 29ms RepoModel.GetById 0ms app.codeStats 0ms

/app/pages/tables/components/tables.html

https://gitlab.com/cezar.zaleski/sbadmin2
HTML | 368 lines | 366 code | 0 blank | 2 comment | 0 complexity | 41e48c0de8bb05f768351e8100e776b5 MD5 | raw file
  1. <div class="container-fluid">
  2. <!-- Page Heading -->
  3. <div class="row">
  4. <div class="col-xl-12">
  5. <h2 class="page-header">
  6. Tables
  7. </h2>
  8. <ol class="breadcrumb">
  9. <li>
  10. <i class="fa fa-dashboard"></i> <a href="Javascript:void(0);" [routerLink]="['/dashboard','/home']">Dashboard</a>
  11. </li>
  12. <li class="active">
  13. <i class="fa fa-table"></i> Tables
  14. </li>
  15. </ol>
  16. </div>
  17. </div>
  18. <!-- /.row -->
  19. <div class="row">
  20. <div class="col-xl-6 col-lg-12">
  21. <h4>Basic example</h4>
  22. <div class="card card-block">
  23. <div class="table-responsive">
  24. <table class="table">
  25. <thead>
  26. <tr>
  27. <th>#</th>
  28. <th>First Name</th>
  29. <th>Last Name</th>
  30. <th>Username</th>
  31. </tr>
  32. </thead>
  33. <tbody>
  34. <tr>
  35. <th scope="row">1</th>
  36. <td>Mark</td>
  37. <td>Otto</td>
  38. <td>@mdo</td>
  39. </tr>
  40. <tr>
  41. <th scope="row">2</th>
  42. <td>Jacob</td>
  43. <td>Thornton</td>
  44. <td>@fat</td>
  45. </tr>
  46. <tr>
  47. <th scope="row">3</th>
  48. <td>Larry</td>
  49. <td>the Bird</td>
  50. <td>@twitter</td>
  51. </tr>
  52. </tbody>
  53. </table>
  54. </div>
  55. </div>
  56. <h4>Table head options</h4>
  57. <div class="card card-block">
  58. <div class="table-responsive">
  59. <table class="table">
  60. <thead class="thead-inverse">
  61. <tr>
  62. <th>#</th>
  63. <th>First Name</th>
  64. <th>Last Name</th>
  65. <th>Username</th>
  66. </tr>
  67. </thead>
  68. <tbody>
  69. <tr>
  70. <th scope="row">1</th>
  71. <td>Mark</td>
  72. <td>Otto</td>
  73. <td>@mdo</td>
  74. </tr>
  75. <tr>
  76. <th scope="row">2</th>
  77. <td>Jacob</td>
  78. <td>Thornton</td>
  79. <td>@fat</td>
  80. </tr>
  81. <tr>
  82. <th scope="row">3</th>
  83. <td>Larry</td>
  84. <td>the Bird</td>
  85. <td>@twitter</td>
  86. </tr>
  87. </tbody>
  88. </table>
  89. <table class="table">
  90. <thead class="thead-default">
  91. <tr>
  92. <th>#</th>
  93. <th>First Name</th>
  94. <th>Last Name</th>
  95. <th>Username</th>
  96. </tr>
  97. </thead>
  98. <tbody>
  99. <tr>
  100. <th scope="row">1</th>
  101. <td>Mark</td>
  102. <td>Otto</td>
  103. <td>@mdo</td>
  104. </tr>
  105. <tr>
  106. <th scope="row">2</th>
  107. <td>Jacob</td>
  108. <td>Thornton</td>
  109. <td>@fat</td>
  110. </tr>
  111. <tr>
  112. <th scope="row">3</th>
  113. <td>Larry</td>
  114. <td>the Bird</td>
  115. <td>@twitter</td>
  116. </tr>
  117. </tbody>
  118. </table>
  119. </div>
  120. </div>
  121. <h4>Bordered table</h4>
  122. <div class="card card-block">
  123. <div class="table-responsive">
  124. <table class="table table-bordered">
  125. <thead>
  126. <tr>
  127. <th>#</th>
  128. <th>First Name</th>
  129. <th>Last Name</th>
  130. <th>Username</th>
  131. </tr>
  132. </thead>
  133. <tbody>
  134. <tr>
  135. <th scope="row">1</th>
  136. <td>Mark</td>
  137. <td>Otto</td>
  138. <td>@mdo</td>
  139. </tr>
  140. <tr>
  141. <th scope="row">2</th>
  142. <td>Mark</td>
  143. <td>Otto</td>
  144. <td>@TwBootstrap</td>
  145. </tr>
  146. <tr>
  147. <th scope="row">3</th>
  148. <td>Jacob</td>
  149. <td>Thornton</td>
  150. <td>@fat</td>
  151. </tr>
  152. <tr>
  153. <th scope="row">4</th>
  154. <td colspan="2">Larry the Bird</td>
  155. <td>@twitter</td>
  156. </tr>
  157. </tbody>
  158. </table>
  159. </div>
  160. </div>
  161. <h4>Small table</h4>
  162. <div class="card card-block">
  163. <table class="table table-sm">
  164. <thead>
  165. <tr>
  166. <th>#</th>
  167. <th>First Name</th>
  168. <th>Last Name</th>
  169. <th>Username</th>
  170. </tr>
  171. </thead>
  172. <tbody>
  173. <tr>
  174. <th scope="row">1</th>
  175. <td>Mark</td>
  176. <td>Otto</td>
  177. <td>@mdo</td>
  178. </tr>
  179. <tr>
  180. <th scope="row">2</th>
  181. <td>Jacob</td>
  182. <td>Thornton</td>
  183. <td>@fat</td>
  184. </tr>
  185. <tr>
  186. <th scope="row">3</th>
  187. <td colspan="2">Larry the Bird</td>
  188. <td>@twitter</td>
  189. </tr>
  190. </tbody>
  191. </table>
  192. </div>
  193. </div>
  194. <div class="col-xl-6 col-lg-12">
  195. <h4>Inverse table</h4>
  196. <div class="card card-block">
  197. <div class="table-responsive">
  198. <table class="table table-inverse">
  199. <thead>
  200. <tr>
  201. <th>#</th>
  202. <th>First Name</th>
  203. <th>Last Name</th>
  204. <th>Username</th>
  205. </tr>
  206. </thead>
  207. <tbody>
  208. <tr>
  209. <th scope="row">1</th>
  210. <td>Mark</td>
  211. <td>Otto</td>
  212. <td>@mdo</td>
  213. </tr>
  214. <tr>
  215. <th scope="row">2</th>
  216. <td>Jacob</td>
  217. <td>Thornton</td>
  218. <td>@fat</td>
  219. </tr>
  220. <tr>
  221. <th scope="row">3</th>
  222. <td>Larry</td>
  223. <td>the Bird</td>
  224. <td>@twitter</td>
  225. </tr>
  226. </tbody>
  227. </table>
  228. </div>
  229. </div>
  230. <h4>Striped Rows</h4>
  231. <div class="card card-block">
  232. <div class="table-responsive">
  233. <table class="table table-hover table-striped">
  234. <thead>
  235. <tr>
  236. <th>Page</th>
  237. <th>Visits</th>
  238. <th>% New Visits</th>
  239. <th>Revenue</th>
  240. </tr>
  241. </thead>
  242. <tbody>
  243. <tr>
  244. <td>/index.html</td>
  245. <td>1265</td>
  246. <td>32.3%</td>
  247. <td>$321.33</td>
  248. </tr>
  249. <tr>
  250. <td>/about.html</td>
  251. <td>261</td>
  252. <td>33.3%</td>
  253. <td>$234.12</td>
  254. </tr>
  255. <tr>
  256. <td>/sales.html</td>
  257. <td>665</td>
  258. <td>21.3%</td>
  259. <td>$16.34</td>
  260. </tr>
  261. <tr>
  262. <td>/blog.html</td>
  263. <td>9516</td>
  264. <td>89.3%</td>
  265. <td>$1644.43</td>
  266. </tr>
  267. <tr>
  268. <td>/404.html</td>
  269. <td>23</td>
  270. <td>34.3%</td>
  271. <td>$23.52</td>
  272. </tr>
  273. <tr>
  274. <td>/services.html</td>
  275. <td>421</td>
  276. <td>60.3%</td>
  277. <td>$724.32</td>
  278. </tr>
  279. <tr>
  280. <td>/blog/post.html</td>
  281. <td>1233</td>
  282. <td>93.2%</td>
  283. <td>$126.34</td>
  284. </tr>
  285. </tbody>
  286. </table>
  287. </div>
  288. </div>
  289. <h4>Hoverable rows</h4>
  290. <div class="card card-block">
  291. <table class="table table-hover">
  292. <thead>
  293. <tr>
  294. <th>#</th>
  295. <th>First Name</th>
  296. <th>Last Name</th>
  297. <th>Username</th>
  298. </tr>
  299. </thead>
  300. <tbody>
  301. <tr>
  302. <th scope="row">1</th>
  303. <td>Mark</td>
  304. <td>Otto</td>
  305. <td>@mdo</td>
  306. </tr>
  307. <tr>
  308. <th scope="row">2</th>
  309. <td>Jacob</td>
  310. <td>Thornton</td>
  311. <td>@fat</td>
  312. </tr>
  313. <tr>
  314. <th scope="row">3</th>
  315. <td colspan="2">Larry the Bird</td>
  316. <td>@twitter</td>
  317. </tr>
  318. </tbody>
  319. </table>
  320. </div>
  321. <h4>Contextual classes</h4>
  322. <div class="card card-block">
  323. <table class="table">
  324. <thead>
  325. <tr>
  326. <th>#</th>
  327. <th>First Name</th>
  328. <th>Last Name</th>
  329. <th>Username</th>
  330. </tr>
  331. </thead>
  332. <tbody>
  333. <tr class="table-active">
  334. <th scope="row">1</th>
  335. <td>Mark</td>
  336. <td>Otto</td>
  337. <td>@mdo</td>
  338. </tr>
  339. <tr class="table-success">
  340. <th scope="row">2</th>
  341. <td>Jacob</td>
  342. <td>Thornton</td>
  343. <td>@fat</td>
  344. </tr>
  345. <tr class="table-info">
  346. <th scope="row">3</th>
  347. <td>Larry</td>
  348. <td>the Bird</td>
  349. <td>@twitter</td>
  350. </tr>
  351. <tr class="table-warning">
  352. <th scope="row">3</th>
  353. <td>Larry</td>
  354. <td>the Bird</td>
  355. <td>@twitter</td>
  356. </tr>
  357. <tr class="table-danger">
  358. <th scope="row">3</th>
  359. <td>Larry</td>
  360. <td>the Bird</td>
  361. <td>@twitter</td>
  362. </tr>
  363. </tbody>
  364. </table>
  365. </div>
  366. </div>
  367. </div>
  368. </div>