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 4 Table

Bootstrap 4 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, responsive table, breakpoint-specific responsive table and a table with highlighted header.

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

                        

Propeller Table

The Propeller Table is an enhanced version of the Bootstrap 4 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

                        

Propeller Table with Highlighted Heading

To highlight the table heading, use .thead-dark and .thead-light class.

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

                        

Propeller Table with Caption

Add <caption> above the <thead>to describe what the table is all about.

Logsheet of Employees
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. To create an inverse stripped table, use .table-dark class along with .table-stripped class.

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. To create an inverse bordered table, use .table-dark class along with .table-bordered class.

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

                        

Borderless Table

Create Borderless Table by adding .table-borderless 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. To create an inverse hoverable rows table, use .table-dark class along with .table-hover class.

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. To create an inverse contextual table, use class .table-dark along with .pmd-table class.

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

                        

Dark Table

Create Inverse Table by adding .table-dark 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

                        

Table with Expand/Collapse

You can create table with expand and collapse feature by adding class .child-table-expand to the expand icon and wrapping the child table with a <div> having class .direct-child-table.

Ticket No. Browser Name Month Total Status Last Updated On Actions
PMD484150 Firefox September 25% Average 2016-09-20 15:50:00 edit delete
PMD484149 Google Chrome September 32% High 2016-09-21 15:50:00 edit delete
PMD484148 Safari September 13% Low 2016-09-20 14:00:00 edit delete
PMD484147 Opera September 7% Low 2016-09-20 11:30:00 edit delete add_circle_outline
PMD484146 Mobile & Tablet September 4% Very Low 2016-07-21 17:40:00 edit delete

                        

Table with Fixed Header

To create a table with fixed header, wrap the table with a <div> with class .scrollable-table. And then wrap that <div> with another div having class .table-fixed-head. To trigger the header as fixed, add .header to the <thead>.

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

                        

Responsive Table

Create Responsive Table by using the .table-responsive class.

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

                        

Breakpoint Specific Responsive Table

To create Breakpoint Specific Responsive Table, use the .table-responsive-{sm|md|ld|xl} class. For example, to create a table will remain responsive only till tablet view, use .table-responsive-md class.

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

                        

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 Class for Propeller Table Required
.pmd-card-table Wrapper class for card layout. Optional
.child-table Add this class to create a nested table Optional
.child-table-expand Add this class to the icon onclicking which the nested/child table will expand. Optional
.direct-child-table Add this class to the child table to expand it on clicking the icon Optional
.table-fixed-head Add this class to make the table with fixed header Optional
.scrollable-table Add this class to make the table scrollable when the header is fixed. Optional
.header Add this class to trigger the header as fixed on scroll. Optional