# Basic Table Demo

Demonstration of different settings for Basic Table. For full documentation of settings and method visit http://www.jerrylow.com/basictable or https://github.com/jerrylow/basictable.

## Basic Implementation

The basic implementation using all default settigs. The table will use responsive mode when the viewport is less or equal to 568px in width.

Name | Age | Gender | Height | Province | Sport
--- | --- | --- | --- | --- | ---
Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball
John Stone | 30 | Male | 5'9 | Ontario | Badminton
Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey
Gary Mountain | 21 | Mail | 5'8 | Alberta | Curling
James Camera | 31 | Male | 6'1 | British Columbia | Hiking

`$('#table').basictable();`

## Modifying Breakpoint

Manually set the breakpoint per table. Setting the breakpoint to 768px so responsive styles will be applied on a typically tablet, portrait mode.

Name | Age | Gender | Height | Province | Sport
--- | --- | --- | --- | --- | ---
Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball
John Stone | 30 | Male | 5'9 | Ontario | Badminton
Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey
Gary Mountain | 21 | Mail | 5'8 | Alberta | Curling
James Camera | 31 | Male | 6'1 | British Columbia | Hiking

`$('#table-breakpoint').basictable({
breakpoint: 768,
});`

## Force Responsive Off

The script will not force the table to be responsive. The table will only go into responsive mode when the table is actually larger than its parent container. In this demo the parent of table is the div with id page.

Name | Age | Gender | Height | Province | Sport
--- | --- | --- | --- | --- | ---
Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball
John Stone | 30 | Male | 5'9 | Ontario | Badminton
Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey
Gary Mountain | 21 | Mail | 5'8 | Alberta | Curling
James Camera | 31 | Male | 6'1 | British Columbia | Hiking

`$('#table-force-off').basictable({
forceResponsive: false,
});`

### Max Height

Some tables could get very long in responsive. You could set a max-height in mobile where scrolling within the table would happen. Turn on tableWrapper to get a container around the table that toggles an active class. You could also just create your own wrapper and match the breakpoint to do this.

Name | Age | Gender | Height | Province | Sport
--- | --- | --- | --- | --- | ---
Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball
John Stone | 30 | Male | 5'9 | Ontario | Badminton
Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey
Gary Mountain | 21 | Mail | 5'8 | Alberta | Curling
James Camera | 31 | Male | 6'1 | British Columbia | Hiking

`$('#table-max-height').basictable({
tableWrapper: true
});`

## CSS Controls

### Use Media Query Over JS Resize

If you don't want to use the js bind on resize you can use css to control the breakpoint itself. Using basic table to setup the structure itself and copying basictable.css styles into your own media query.

Name | Age | Gender | Height | Province | Sport
--- | --- | --- | --- | --- | ---
Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball
John Stone | 30 | Male | 5'9 | Ontario | Badminton
Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey
Gary Mountain | 21 | Mail | 5'8 | Alberta | Curling
James Camera | 31 | Male | 6'1 | British Columbia | Hiking

`@media only screen and (max-width: 568px) {
#table-no-resize thead {
display: none;
}
#table-no-resize tbody td {
border: none !important;
display: block;
vertical-align: top;
}
#table-no-resize tbody td:before {
content: attr(data-th) ": ";
display: inline-block;
font-weight: bold;
width: 6.5em;
}
#table-no-resize tbody td.bt-hide {
display: none;
}
}` `$('#table-no-resize').basictable({
noResize: true,
});`

### Two Axis Styling

Two axis could be styled differently. This does not need to be done through the library itself. The example code will show how to target the first column in desktop and first row in responsive mode.

Name | Age | Gender | Height | Province | Sport
--- | --- | --- | --- | --- | ---
Jill Smith | 25 | Female | 5'4 | British Columbia | Volleyball
John Stone | 30 | Male | 5'9 | Ontario | Badminton
Jane Strip | 29 | Female | 5'6 | Manitoba | Hockey
Gary Mountain | 21 | Mail | 5'8 | Alberta | Curling
James Camera | 31 | Male | 6'1 | British Columbia | Hiking

`table.two-axis tr td:first-of-type {
background: #dff1f7;
}
@media only screen and (max-width: 568px) {
table.two-axis tr td:first-of-type,
table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
table.two-axis tr td:first-of-type:before {
background: #dff1f7;
color: #ffffff;
}
table.two-axis tr td:first-of-type {
border-bottom: 1px solid #e4ebeb;
}
}`

Author: Jerry Low (@jerrylowm) | Palette Design: Amit Jakhu (@amitjakhu)