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 .tableclass.

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

Alternativethead

.thead-defaultapplies to thead

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

Striped

.table-stripedapplies to .table

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

Bordered

.table-borderedapplies to .table

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

Hover

.table-hoverapplies to .table

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

Separated

.table-separatedapplies to .table

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

Smalltable

.table-smapplies to .table

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

Largetable

.table-lgapplies to .table

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

Responsivetables

Create responsive tables by adding .table-responsiveto any .tableto make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# 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

Selectallrows

data-provide="checkall"applies to .tablefor 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
DetailsAdd filePerformance
2 Jacob Thornton
DetailsAdd filePerformance
3 Larry the Bird
DetailsAdd filePerformance

Toolbar

CSVSQLPDFText
# 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