# Components documentation

## Basic table

By default, a table has no styling.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

## Uppercase header

Using the "uppercase-header" class, your header becomes uppercase.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

## Box header

Using the "box-header" class, you can add a box type header to your table.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

## Outline header

Using the "outline-header" class, a header gets a larger font and is underlined.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

## Header border

Using the "header-border" class, you can add a border beneath the table's header row.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

## Horizontal border

Using the "horizontal-border" class, you can add a beneath all table rows.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

## Border

Using the "border" class, you can add a border to all table cells.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

## Box

Using the "box" class, you can add a border to your table.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

## Outline

Using the "outline" class, you can add an extra-thick black border to your table.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

## Block

Using the "block" class, you can add a border to your table's columns.

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

## Datasheet

Using the "uppercase-header" class, your table gains a spreadsheet type layout. Add test fields to your table cells to make them editable.

# | ID | Name | Dept | Notes
--- | --- | --- | --- | ---
1 |  |  |  |
2 |  |  |  |
3 |  |  |  |
4 |  |  |  |
5 |  |  |  |

## Combinations

By combining these different techniques, you can easily build many different table layouts without the need for any custom styling. Herebelow are common layouts built by combining different table layouts and/or a panel.

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

Company | Q1 | Q2 | Q3 | Q4
Microsoft | 20.3 | 30.5 | 23.5 | 40.3
Google | 50.2 | 40.63 | 45.23 | 39.3
Apple | 25.4 | 30.2 | 33.3 | 36.7
IBM | 20.4 | 15.6 | 22.3 | 29.3

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

My Data

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

My Data

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

My Data

Comedy | Adventure | Action | Children
--- | --- | --- | ---
Scary Movie | Indiana Jones | The Punisher | Wall-E
Epic Movie | Star Wars | Bad Boys | Madagascar
Spartan | LOTR | Die Hard | Finding Nemo
Dr. Dolittle | The Mummy | 300 | A Bug's Life

My Data

# | ID | Name | Dept | Notes
--- | --- | --- | --- | ---
1 |  |  |  |
2 |  |  |  |
3 |  |  |  |
4 |  |  |  |
5 |  |  |  |