# Table

The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. Table is an ubiquitous feature of most user interfaces, regardless of a site's content or function. It's design and use is therefore an important factor in the overall user experience.

## Bootstrap Table

Bootstrap provides table with its own custom table styles. This simple table can be also converted to table with striped rows, bordered table, table with hover rows, condensed table, table with contextual classes and responsive table.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Propeller Table

The Propeller Table is an enhanced version of the Bootstrap standard HTML `<``table``>`. Include `.pmd-table` followed by `.table` to use Propeller table.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni |  | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Card Table

Card Table reformats each row into a card for narrow screens. This way user can view complete information without horizontal scroll. Add `.pmd-table-card` to convert simple table into Card Table.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Nested Table

Nested Table is a table inside a table. It can have several rows for each row of its parent table. Add `.child-table` to the `tr` where you want to nest your table. Then add colspan to the `td` followed by above `tr` with the value equal to the number of columns in sub-table. Add `.table-sm` followed by `.table` in nested table tag to make it look like sub-table.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

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

Giacomo Guilizzoni |  | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Striped Rows Table

Create Striped Rows Table by adding `.table-striped` in your code.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Bordered Table

Create Bordered Table by adding `.table-bordered` in your code.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Hoverable Rows Table

Create Hoverable Rows Table by adding `.table-hover` in your code.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Small Table

Create Small Table by adding `.table-sm` in your code.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Contextual Table

To create Contextual Table add the class on row namely `.table-active` for active, `.table-success` for success, `.table-info` for info, `.table-warning` for warning, and `.table-danger` for danger.

# | Column heading | Column heading | Column heading
--- | --- | --- | ---
1 | Column content | Column content | Column content
2 | Column content | Column content | Column content
3 | Column content | Column content | Column content
4 | Column content | Column content | Column content
5 | Column content | Column content | Column content
6 | Column content | Column content | Column content
7 | Column content | Column content | Column content
8 | Column content | Column content | Column content
9 | Column content | Column content | Column content

## Inverse Table

Create Inverse Table by adding `.table-inverse` in your code.

Name | Code | State/City | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | 1 June 2014 | Active | Timesheet | more_vert

## Reflow Table

Create Reflow Table by adding `.table-reflow` in your code.

Name | Code | State/City | Incharge Name | Mobile | Type of Work | End Date of Work | Status | Timesheet |
--- | --- | --- | --- | --- | --- | --- | --- | --- | ---
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert
Giacomo Guilizzoni | JONEA140 | Melbourne | Giacomo Guilizzoni | 9625145236 | 9625145236 | 1 June 2014 | Active | Timesheet | more_vert

## Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the Table. The table lists the available classes and their effects.

Propeller Classes | Effect | Remark
--- | --- | ---
`.pmd-table` | Wrapper class for card layout. | Required
`.pmd-z-depth` | Used to provide shadow depth to card. Shadow depth inceases with the counting (pmd-z-depth, pmd-z-depth-1...pmd-z-depth-5) | Optional
`.pmd-card-title` | Defines header section of the card | Optional
`.pmd-card-body` | Defines content section of the card. | Optional
`.pmd-card-actions` | Defines section for the action buttons/links for the card. | Optional
`.table-responsive` | Add this class to create a responsive table | Optional
`.child-table` | Add this class to create a child table | Required
`.table-sm` | Add this class to format a child table | Optional