tables

Tables

Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.

Bootstrap Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, folks from Bootstap designed own tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes. Check out the Bootstrap Table page for more information here .

Basic table

Using the most basic table markup, just add a class .table to the table tag.

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Table inverse

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Table head option

Similar to default and inverse tables, use one of two modifier classes to make <thead>s appear light or dark gray.

"Use a class .thead-inverse for dark gray and thead-default for light gray."

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending
# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Table striped rows

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

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Table bordered

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

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Tables With Panel

You may cover any tables with the panel examples. You may choose any predefined Unify panels from here . All panels styles can be changed with global classes. You may also create your own style.

Basic table

Covered with primary card panel.

Basic Table

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Basic table (spacing)

Covered with primary card panel.

Basic Table (spacing)

# First Name Username Status
1 Mark @mdo Delete
2 Jacob @fat Edit
3 Larry @twitter Share
4 htmlstream @htmlstream Submit

Table bordered

Covered with primary card panel.

Table Bordered

# First Name Username Status
1 Mark @mdo Delete
2 Jacob @fat Edit
3 Larry @twitter Share
4 htmlstream @htmlstream Submit

Striped rows

Covered with primary card panel.

Striped Rows

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending

Hover rows

Covered with primary card panel.

Hover Rows

# First Name Username Status
1 Mark @mdo Expiring
2 Jacob @fat Success
3 Larry @twitter Error!
4 htmlstream @htmlstream Pending