Several problems with fixed width and dynamical columns
Opened this issue · 1 comments
javix commented
Hello,
I have follow requirements to my table:
- resizable columns
- some columns have fixed min width
- all columns are dynamical (they can be hidden or shown)
I wanted to resolve this with this library, it works, but with some little problems.
The width of my fixed columns defined by is ignored.
It is not possible rebuild the resizing.
I use my workaround
Part of my code:
var table = $('#' + name);
if(resizable != null) {
table.destroyResizableColumns();
}
resizable = table.resizableColumns({
resizeFromBody: true
});Part of modified resizableColumns.js:
destroyResizableColumns: function() {
var $table = $(this);
var data = $table.data('resizableColumns');
if(data) {
data.restoreColumnWidths();
data.destroy();
}
}It works, but is it correct?
If I resize the multiple columns a time along, the total width of all columns is over 100 percent.
I resize the left column to wanted width, then by resizing other columns the width of previous columns wll be changed. It is a feature?
Here before resizing:
jQuery('th')
[<th style="text-align: left; width: 1.5%" data-noresize ng-if="options.selectable && options.multiselection" class="ng-scope">
<input type="checkbox" ng-model="checkboxes.checked" id="select_all" value ng-click="selectAll()" class="ng-pristine ng-valid">
</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 20.11%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 9.63%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope sort-asc" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 10.11%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 25.29%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 12.58%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="80" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 4.82%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="80" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 4.82%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="80" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 4.82%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="90" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 6.44%;">…
</th>]Total of all columns width: 100.12% (OK)
Here after repeated resizing:
jQuery('th')
[<th style="text-align: left; width: 1.5%" data-noresize ng-if="options.selectable && options.multiselection" class="ng-scope">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 32.45%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 0.18%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope sort-asc" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 88.8%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 0.61%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 58.52%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="80" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 4.82%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="80" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 4.82%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="80" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 0.91%;">…</th>,
<th ng-repeat="column in options.columns" ng-show="column.visible" class="text-center sortable ng-scope" width="90" ng-style="{'min-width': column.width}" ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')" style="width: 57.19%;">…</th>]Total of all columns width: 249,8% (OK ???)
After playing with this, some columns can not be resized anymore.
Sorry for my bad english.
Craga89 commented
This may be addressed by v0.2.3, give it a go and let us know :)