Basic Tables | Metor - Responsive Admin Dashboard Template

Basic Example

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

Striped Rows Table

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

Variants

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

Striped Rows Table Dark

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

Striped Rows Table Success

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

Striped columns

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

Striped columns Dark

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

Striped columns success

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

Hoverable rows

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

Hoverable rows Dark #

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

Active Tables

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

Active Tables Dark

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

Bordered Table

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

Bordered color Table

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

Tables without borders

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

Tables without borders Dark

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

Small tables

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

Small Tables Dark

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

Table group dividers

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

Vertical alignment

Heading 1	Heading 2	Heading 3	Heading 4
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell is aligned to the top.	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

Nesting Table

#

First

Last

Handle

1

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

3

Larry

the Bird

@twitter

Table head Dark

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

Table head

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

Table footer

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

Captions

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

Captions

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

Always responsive

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

With avatars

Name	Title	Email	Role	Action
Tony M. Carter	Designer	tonymcarter@jourrapide.com	Member	Edit
James E. Chamb	UI/UX Designer	jamesechambliss@teleworm.us	Admin	Edit
Charlotte J. Torres	Copywriter	charlotte@jourrapide.com	Member	Edit
Mary J. Germain	Full Stack	maryjgermain@jourrapide.com	CEO	Edit
Kevin C. Reyes	Director of Product	kevincreyes@jourrapide.com	Member	Edit

With checkboxes

	Name	Title	Email	Role	Action
	Tony M. Carter	Designer	tonymcarter@jourrapide.com	Member	Edit
	James E. Chamb	UI/UX Designer	jamesechambliss@teleworm.us	Admin	Edit
	Charlotte J. Torres	Copywriter	charlotte@jourrapide.com	Member	Edit
	Mary J. Germain	Full Stack	maryjgermain@jourrapide.com	CEO	Edit
	Kevin C. Reyes	Director of Product	kevincreyes@jourrapide.com	Member	Edit

Nesting Table

Invoice Number

Invoice Amount

Confirmation by the client

Planned payment date

F-011221/21

$ 879.500

11/05/2023

12/05/2023

ERP number	Carrier legal entity	Responsible logistician	Status
3-128-3	ToBrookfield Asset Management	Kevin C. Reyes	Verified
3-128-2	Brookfield Asset Management	Mary J. Germain	Pending
3-128-1	Westfield Asset Management	Charlotte J. Torres	Rejected

F-011221/19

$ 93.250

9/05/2023

10/05/2023