javascript css twitter-bootstrap bootstrap-4 bootstrap-table

Bootstrap fixed position in grid columns

I was asked to look at some bootstrap, I have not worked with BS before.

What do I need to change to achieve the following:

When button clicked I want two tables, a data table on the left and a table on the right. The table on the right should stay fixed while the left table can be scrolled.

Please give a bootStrap answer, since BS should be able to do what I need on its own without CSS flex or similar

Attempt so far.

const data = []
for (let i = 0; i < 50; i++) data.push({
  title: "title " + i,
  time: "00:00:" + String(i).padStart(2, '0')
})
$("#load").on("click", () => {
  $("#table1Div").show()
  $("#table2Div").show()
  $("#explanationDiv").hide();
  $("#table1").bootstrapTable({
    data: data
  })
})

#table1Div {
  display: none;
}

#table2Div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<h1 class="font_3" style="line-height:1.1em;">Title</h1>
<div id="container">
  <div class="col-sm">
    <div class="row" id="explanationDiv">
      <div class="col-sm">
        Explanation
      </div>
      <div class="col-sm">
        Some action
        <button id="load">Load</button>
      </div>
    </div>
    <div class="row">
      <div class="col-sm" id="table1Div">
        <table id="table1" data-toolbar="#toolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" data-sortable="true" data-show-footer="true" class="table table-bordered table-striped">
          <thead id="thead1">
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
              <th data-field="time" data-halign="center" data-align="center" data-sortable="true" data-searchable="true">Duration</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
  <div class="col-sm position-fixed" id="table2Div">
    <table id="table2" data-toolbar="#dtoolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" class="table table-bordered table-striped">
      <thead id="thead2">
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
          <th data-field="time" data-halign="center" data-align="center" data-footer-formatter="timeFormatter" data-sortable="true" data-searchable="true">Duration</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

Solution

The grid nested layout should follow:

 container
  |-row
     |- col-sm (50% width)
        |- #table1
     |- col-sm (50% width)
        |- #table2 (fixed-positioned)

Your position-fixed should be placed on the right table.

const data = []
for (let i = 0; i < 50; i++) {
  data.push({
    title: "title " + i,
    time: "00:00:" + String(i).padStart(2, '0')
  });
}

$("#load").on("click", () => {
  $("#table1Div").show()
  $("#table2Div").show()
  $("#explanationDiv").hide();
  $("#table1").bootstrapTable({
    data: data
  })
})

#table1Div {
  display: none;
}

#table2Div {
  display: none;
}

#table2 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<h1 class="font_3" style="line-height:1.1em;">Title</h1>
<div class="container">
  <div class="row">
    <div class="col-sm" id="explanationDiv">
      <div class="row">
        <div class="col-sm">
          Explanation
        </div>
        <div class="col-sm">
          Some action
          <button id="load">Load</button>
        </div>
      </div>
    </div>

    <div class="col-sm" id="table1Div">
      <table id="table1" data-toolbar="#toolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" data-sortable="true" data-show-footer="true" class="table table-bordered table-striped">
        <thead id="thead1">
          <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
            <th data-field="time" data-halign="center" data-align="center" data-sortable="true" data-searchable="true">Duration</th>
          </tr>
        </thead>
      </table>
    </div>

    <div class="col-sm" id="table2Div">
        <table id="table2" data-toolbar="#dtoolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" class="table table-bordered table-striped">
          <thead id="thead2">
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
              <th data-field="time" data-halign="center" data-align="center" data-footer-formatter="timeFormatter" data-sortable="true" data-searchable="true">Duration</th>
            </tr>
          </thead>
        </table>
      </div>
  </div>
</div>