Bootstrap Nested Table

Bootstrap Nested Table

In my recent project, I came across a problem to make bootstrap like table that can fit in for a nested table to display some sub items in each row.The problem for a normal <table> is that it doesn't provide to much flexibility for hierarchy structured data.It will need to create a separate row with a spanned column to store a nested table. So I came up with this <div> solution.

Name

Date

Description

Amount

Quantity

Test Name

2013-05-10T15:04:44.593

Don't use data attributes from multiple plugins on the same element.

$20

2

Name

Date

Description

Amount

Quantity

Test Name

2013-05-10T15:04:44.593

Don't use data attributes from multiple plugins on the same element.

$20

2

Test Name

2013-05-10T15:04:44.593

Don't use data attributes from multiple plugins on the same element.

$20

2

Test Name

2013-05-10T15:04:44.593

Don't use data attributes from multiple plugins on the same element.

$20

2

Table Template

The first thing is to create table like template which has similar table structure. And each line has two containers, "main" container for certain columns and "sub" for nested table.

<div class="table">
  <div class="header">
    <div class="line">
      headers...
    </div>
  </div>
  <div class="body">
    <div class="line">
      <div class="main">
        columns...
      </div>
      <div class="sub">
        <div class="table">
          ...
        </div>
      </div>
    </div>
  </div>
</div>

CSS

The major problem of the <div> table approach is, the column elements cannot auto align and adjust their widths. So a width value must be manually set to each element, which can be a fixed value or precentage value. For fixed value, "overflow:auto" must be set in case of the total width exceed its parent element. For precentage value, it's better to have to total value to be 100%. And also, an indent value needs to be set. It's better but not necessary to be the width of the first column.And then, to make to be consistent with Bootstrap table style and configurable for further table styles. The following styles are needed. I've also add some styles to make it to be fitting to the basic Bootstrap table style.

.header>.line>div:nth-child(1), .body>.line>.main>div:nth-child(1){
  width:5%;
}
.header>.line>div:nth-child(2), .body>.line>.main>div:nth-child(2){
  width:15%;
}
.header>.line>div:nth-child(3), .body>.line>.main>div:nth-child(3){
  width:15%;
}
.header>.line>div:nth-child(4), .body>.line>.main>div:nth-child(4){
  width:45%;
}
.header>.line>div:nth-child(5), .body>.line>.main>div:nth-child(5){
  width:10%;
}
.header>.line>div:nth-child(6), .body>.line>.main>div:nth-child(6){
  width:10%;
}
.sub{
  padding-left:5%;
}
.body>.line a{
  color:#222;
  font-size:12px;
}
.header{
  font-weight:bold;
}
.header>.line{
  border-bottom:solid 2px #AAA;
}
.header>.line>div, .body>.line>.main>div{
  float:left;
  padding:8px;
}
.header>.line:before, .body>.line>.main:before, .header>.line:after, .body>.line>.main:after{
  content:' ';
  display:table;
}
.header>.line:after, .body>.line>.main:after{
  clear:both;
}
.table>.body>.line:not(:first-child)>.main{
  border-top:solid 1px #AAA;
}
.table>.body>.line.open>.main{
  border-bottom:solid 1px #AAA;
}

Javascript

Here it needs a little javascript to expand and unexpand nested tables. In real practice, it will also need to define whether the button shows or hides.

function togglecollapse(e){
  e.preventDefault();
  $(e.currentTarget.parentNode.parentNode.parentNode).toggleClass('open');
}

Next time I will write an article to demonstrate how I implement this template with some MVC approach.