Tables — TheAdmin

Basic styling

Since Theadmin is based on Bootstrap, so you can safley use Bootstrap's table classes to style your table. We also added more table styles and functionality to our framework.

Basic

All tables need .table class.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Alternative thead

.thead-light or .thead-dark applies to thead

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped

.table-striped applies to .table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered

.table-bordered applies to .table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Hover

.table-hover applies to .table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Separated

.table-separated applies to .table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Small table

.table-sm applies to .table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Large table

.table-lg applies to .table

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Responsive tables

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

#	Table heading	Table heading	Table heading	Table heading	Table heading	Table heading
1	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
2	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell
3	Table cell	Table cell	Table cell	Table cell	Table cell	Table cell

Advanced tables

Selectall rows

data-provide="checkall" applies to .table for check all checkboxes.

First Name	Last Name	Username
Mark	Otto	@mdo
Jacob	Thornton	@fat
Larry	the Bird	@twitter

Selectable

data-provide="selectable" applies to .table

First Name	Last Name	Username
Mark	Otto	@mdo
Jacob	Thornton	@fat
Larry	the Bird	@twitter

Using medias

#	User	Sales
1	Maryam Amiri Designer	541
2	Hossein Shams Designer	364
3	Sarah Conner Designer	840

Row actions

#	First Name	Last Name	Actions
1	Mark	Otto	Details Add file Performance
2	Jacob	Thornton	Details Add file Performance
3	Larry	the Bird	Details Add file Performance

Toolbar

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Pagination

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter