Metrica - Admin & Dashboard Template

Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

Compny	Bill	Average Bill	Paid Bill	Action
Micromin	4	$250	$800	Creat Project Open Project Tasks Details
ZZ Diamond	2	$180	$400	Creat Project Open Project Tasks Details
Dairy Sweet	6	$210	$500	Creat Project Open Project Tasks Details
Corner Tea	3	$80	$350	Creat Project Open Project Tasks Details

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

Transaction ID	Date	Price	Order Status	Action
#124781	25/11/2018	$321	Approved	Creat Project Open Project Tasks Details
#542136	19/11/2018	$227	Approved	Creat Project Open Project Tasks Details
#234578	11/10/2018	$442	Rejected	Creat Project Open Project Tasks Details
#951357	03/12/2018	$625	Approved	Creat Project Open Project Tasks Details

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Customer	Email	Contact No
Aaron Poulin	AaronPoulin@example.com	+21 21547896
Richard Ali	RichardAli@example.com	+41 21547896
Juan Clark	JuanClark@example.com	+65 21547896
Albert Hull	AlbertHull@example.com	+88 21547896

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

#	Name	Email	Access
1	Mark	XYZ@Example.com	Business
2	Jacob	XYZ@Example.com	Personal
3	Larry	XYZ@Example.com	Disabled
4	Mark	XYZ@Example.com	Business
5	Jacob	XYZ@Example.com	Personal

Hoverable rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

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

Dark table

Your awesome text goes here.

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

Contextual classes

Use contextual classes to color table rows or individual cells.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
4	Mark	Otto	@mdo
5	Jacob	Thornton	@fat
6	Larry	the Bird	@twitter
7	Jacob	Thornton	@fat
8	Larry	the Bird	@twitter
9	Jacob	Thornton	@fat
10	Larry	the Bird	@twitter

Captions Table

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

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

Small table

Add .table-sm to make tables more compact by cutting cell padding in half.

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

Dashboard

Apps

UI Kit

Pages

Authentication