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 adding .table-responsive class on .table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding .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
2 Jacob Thornton
3 Larry the Bird

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