How to fix the last column with horizontal scroolbar?

Question

I’m using a simple plugin: http://www.jquery-bootgrid.com/

How can I leave last column fixed ?

Here is an example of a fixed column: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

I’m trying to get the last column fixed, but nothing right. Follow jsfiddle code: https://jsfiddle.net/DTcHh/30996/

Follows the code:

<div class="table-responsive">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">

...

  </table>
</div>

Some solution ?

Answer 1

I used css to try to freeze this last column. For this I created the following classes:

.bootgrid-wrapper {
  width: 90%; // 100% menos o tamanho da ".fixed-column-right"
  overflow-x: scroll;
  overflow-y: visible;
}

.fixed-column-right {
  position: absolute;
  width: 10%;
  right: 0;
}

Hence in his <div> where is the <table> inside, you add the first class bootgrid-wrapper:

<div class="table-responsive bootgrid-wrapper">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    ...
  </table
</div>

...and then you need to add the class fixed-column-right in <th> and in the <td> last column. In the case of bootgrid, this is done by adding two attributes in the <th>:

• data-header-css-class="fixed-column-right": bootgrid will add in the class itself <th>
• data-css-class="fixed-column-right": bootgrid will add in each class <td> of that column.

Try to add attribute directly class="alguma-classe" in <td> or in the <th> will not work, because when bootgrid is mounted, it recreates everything, excluding its attributes.

---

In the end, your HTML complete gets like this:

<div class="table-responsive bootgrid-wrapper">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    <thead>
      <tr>
        <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
        <th data-column-id="sender">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="sender1">Sender</th>
        <th data-column-id="sender2">Sender</th>
        <th data-column-id="sender3">Sender</th>
        <th data-column-id="sender4">Sender</th>
        <th data-column-id="sender5">Sender</th>
        <th data-column-id="sender6">Sender</th>
        <th data-column-id="sender7">Sender</th>
        <th data-column-id="sender8">Sender</th>
        <th data-column-id="sender9">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="commands" data-header-css-class="fixed-column-right" data-css-class="fixed-column-right" data-formatter="commands" data-sortable="false">Coluna</th>
      </tr>
    </thead>
  </table>
</div>

Follows his Jsfiddle updated.