Eu usei css para tentar congelar essa última coluna. Para isso, criei as seguintes 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;
}
Daí na sua <div>
onde está a <table>
dentro, você adiciona a primeira classe 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>
...e depois precisa adicionar a classe fixed-column-right
na <th>
e na <td>
da última coluna. No caso do bootgrid, isso é feito adicionando dois atributos na <th>
:
data-header-css-class="fixed-column-right"
: o bootgrid irá adicionar na classe da própria <th>
data-css-class="fixed-column-right"
: o bootgrid irá adicionar na classe de cada <td>
dessa coluna.
Tentar adicionar diretamente o atributo class="alguma-classe"
na <td>
ou na <th>
nao vai funcionar, pois quando o bootgrid é montado, ele recria tudo, excluindo seus atributos.
No final, seu HTML completo fica assim:
<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>
Segue seu JSFiddle atualizado.