Skip to content

Fixed width support for columns and table. #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
manvesh wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed width support for columns and table. #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ The options object should be available on the parent scope of the `<ap-mesa>` el
| showSortPriority | `boolean` | false | If true, will show a number indicating stacked sort priority of each column being sorted. |
| clearFilterOnColumnHide | `boolean` | true | If true, a column's filter state will be removed when that column is hidden. |
| clearSortOnColumnHide | `boolean` | true | If true, a column's sort state will be removed when that column is hidden. |
| fixedWidthLayout | `boolean` | false | If true, the table's width can go beyond 100% width of the container. Use this with `lockWidth = true` for all columns. Note that horizontal scrollbars will appear for the table element. |

The options object is also the correct place to pass arbitrary data to table cell templates because it will be available as `options` in the table cell template scope. For example, if you want a click in a cell to call a function that is
otherwise out of the scope of the table, you can do this:
Expand Down
3 changes: 3 additions & 0 deletions angular-mesa.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,9 @@ declare namespace angular.apMesa {
clearFilterOnColumnHide?: boolean;
// If true, a column's sort state will be removed when that column is hidden.
clearSortOnColumnHide?: boolean;
// If true, the table's width can go beyond 100% width of the container. Use this with `lockWidth = true` for all columns.
// Note that horizontal scrollbars will appear for the table element. By default, the value is false.
fixedWidthLayout?: boolean;
}
interface IRowScope extends ng.IScope {
toggleRowExpand: Function;
Expand Down
28 changes: 22 additions & 6 deletions app/scripts/controllers/disabled-columns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
'use strict';

angular.module('apMesa.ghPage')
.controller('DisabledColumnsCtrl', function($scope, $q, phoneData, $templateCache) {
.controller('DisabledColumnsCtrl', function($scope, $q, phoneData, $templateCache, $rootScope) {

this.my_table_options = {
bodyHeight: 600,
rowPadding: 600,
storage: localStorage,
storageKey: 'example'
storageKey: 'example',
fixedWidthLayout: false
};
this.my_table_options_paginated = angular.extend({ pagingStrategy: 'PAGINATE' }, this.my_table_options);
this.my_selected_rows = [];
Expand All @@ -22,28 +23,34 @@ angular.module('apMesa.ghPage')
'<i class="glyphicon glyphicon-triangle-right" ng-if="!rowIsExpanded"></i>' +
'<i class="glyphicon glyphicon-triangle-bottom" ng-if="rowIsExpanded"></i>' +
'{{ row.DeviceName }}' +
'</a>'
'</a>',
width: '220px',
},
{
id: 'brand',
key: 'Brand',
sort: 'string',
label: 'Brand'
label: 'Brand',
width: '300px',
},
{
id: 'edge',
key: 'edge',
label: 'Edge',
sort: 'string',
filter: 'like'
filter: 'like',
width: '320px',
},
{
id: 'tech',
key: 'technology',
sort: 'string',
label: 'Tech'
label: 'Tech',
width: '180px',
}
];

this.fixed_width_paging_scheme = 'scroll';
this.my_enabled_columns = this.my_table_columns.map(function(c) { return c.id; });
this.phoneData = phoneData;
var _this = this;
Expand All @@ -62,4 +69,13 @@ angular.module('apMesa.ghPage')
}
};

this.toggleFixedWidth = function () {
_this.my_table_options.fixedWidthLayout = !_this.my_table_options.fixedWidthLayout;
_this.my_table_options_paginated.fixedWidthLayout = !_this.my_table_options_paginated.fixedWidthLayout;
};

$rootScope.$on('apMesa:columnResized', function(event, column, columnWidth) {
console.log('Column was resized', column, columnWidth);
console.log(_this.my_table_columns);
});
});
4 changes: 4 additions & 0 deletions app/views/disabled-columns.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ <h3>Enabled Columns</h3>

<pre>{{ vm.my_enabled_columns | json }}</pre>

<input id="fixedWidthLayout" type="checkbox" ng-checked="(vm.pagingScheme !== 'paginate' && vm.my_table_options.fixedWidthLayout) || (vm.pagingScheme == 'paginate' && vm.my_table_options_paginated.fixedWidthLayout)" ng-click="vm.toggleFixedWidth()"/>
<label for="fixedWidthLayout">options.fixedWidthLayout</label>


</div>
</div>
</div>
31 changes: 25 additions & 6 deletions dist/ap-mesa.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@
/* styles for both header- and rows- tables */

.ap-mesa {
margin-bottom: 0;
}

.ap-mesa.full-width {
table-layout: fixed;
width: 100%;
margin-bottom: 0;
}

/* the visible table header */
Expand All @@ -26,18 +29,22 @@

.mesa-rows-table thead {
height: 0;
visibility: hidden;
visibility: collapse;
}

.mesa-rows-table > thead > tr > th {
border-width: 0;
padding: 0 !important;
/* padding: 0 !important; */
}

.mesa-rows-table-wrapper {
.mesa-rows-table-wrapper.auto-layout {
overflow: auto;
}

.mesa-rows-table-wrapper.fixed-width-layout {
overflow-x: visible;
}

.mesa-rows-table > tbody + tbody {
border-top: none;
}
Expand All @@ -63,7 +70,7 @@
/* search input */

.ap-mesa tr.ap-mesa-filter-row td input {
width: 100%;
/* width: 100%; */
border-radius: 2em;
border: 1px solid #CCC;
outline: none;
Expand Down Expand Up @@ -133,7 +140,7 @@ when a discreet width has been set on it */
/* wrapper for text in a th */

.ap-mesa th .column-text {
max-width: 100%;
/* max-width: 100%; */
overflow: hidden;
display: block;
}
Expand Down Expand Up @@ -250,6 +257,10 @@ table tbody .ap-mesa-dummy-row td {
transition-delay: 0s;
}

.ap-mesa-overflow-x-scroll {
overflow-x: scroll;
}

.ap-mesa-loading-display.ng-enter,
.ap-mesa-loading-display.ng-enter.ng-leave.ng-leave-active {
opacity: 0;
Expand Down Expand Up @@ -338,4 +349,12 @@ table tbody .ap-mesa-dummy-row td {
-webkit-box-shadow: 0 1.5em 0 0;
box-shadow: 0 1.5em 0 0;
}
}

.table-nonfluid {
width: auto !important;
}

.ap-mesa-nonfluid {
overflow-x: scroll;
}
25 changes: 23 additions & 2 deletions dist/ap-mesa.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,7 @@ angular.module('apMesa.controllers.ApMesaController', [
} else {
column.width = Math.max(new_width, CONSTANTS.minWidth);
}
$scope.$emit('apMesa:columnResized', column, column.width);
$scope.$apply();
});
};
Expand Down Expand Up @@ -462,7 +463,8 @@ angular.module('apMesa.controllers.ApMesaController', [
'glyphicon glyphicon-chevron-down'
],
onRegisterApi: function (api) {
}
},
fixedWidthLayout: false
};
function defaults(obj) {
if (typeof obj !== 'object') {
Expand Down Expand Up @@ -596,6 +598,7 @@ angular.module('apMesa.controllers.ApMesaController', [
function postLink(scope, element) {
var deregStorageWatchers = [];
scope.scrollDiv = element.find('.mesa-rows-table-wrapper');
scope.wrapperDiv = element.find('.ap-mesa-wrapper');
scope.$watch('_columns', function (columns, oldColumns) {
if (columns !== scope.columns) {
resetColumns(scope);
Expand Down Expand Up @@ -639,6 +642,24 @@ angular.module('apMesa.controllers.ApMesaController', [
resetState(scope);
initOptions(scope);
});
scope.$watch('options.fixedWidthLayout', function (newValue, oldValue) {
if (newValue !== oldValue) {
if (angular.isString(scope.classes)) {
if (newValue && scope.classes.indexOf('table-nonfluid') === -1) {
scope.classes = scope.classes + ' table-nonfluid';
} else if (!newValue && scope.classes.indexOf('table-nonfluid') > -1) {
scope.classes = scope.classes.split('table-nonfluid').join('');
}
if (!newValue && scope.classes.indexOf('full-width') === -1) {
scope.classes = scope.classes + ' full-width';
} else if (newValue && scope.classes.indexOf('full-width') > -1) {
scope.classes = scope.classes.split('full-width').join('');
}
}
resetState(scope);
initOptions(scope);
}
});
scope.$watch('options.storage', function (storage) {
if (storage) {
if (!scope.options.storageKey) {
Expand Down Expand Up @@ -2182,7 +2203,7 @@ angular.module('apMesa.templates', [
angular.module('src/templates/apMesa.tpl.html', []).run([
'$templateCache',
function ($templateCache) {
$templateCache.put('src/templates/apMesa.tpl.html', '<div class="ap-mesa-wrapper" ng-class="{\n' + '\'paging-strategy-paginate\': options.pagingStrategy === \'PAGINATE\',\n' + '\'paging-strategy-scroll\': options.pagingStrategy === \'SCROLL\',\n' + '\'ap-mesa-loading-error\': !!transientState.loadingError,\n' + '\'ap-mesa-no-data\': !transientState.loading && !transientState.loadingError && visible_rows.length === 0\n' + '}">\n' + ' <table ng-class="classes" class="ap-mesa mesa-header-table">\n' + ' <thead>\n' + ' <!-- MAIN ROW OF COLUMN HEADERS -->\n' + ' <tr ui-sortable="sortableOptions" ng-model="enabledColumnObjects" class="ap-mesa-header-row">\n' + '\n' + ' <!-- COLUMN HEADERS -->\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-click="toggleSort($event,column)"\n' + ' ng-class="[\n' + ' {\n' + ' \'sortable-column\' : column.sort,\n' + ' \'select-column\': column.selector,\n' + ' \'is-sorting\': sortDirection[column.id]\n' + ' },\n' + ' \'table-header-\' + column.id,\n' + ' column.classes ? column.classes : \'\'\n' + ' ]"\n' + ' ng-attr-title="{{ column.title || \'\' }}"\n' + ' ng-style="{ width: column.width, \'min-width\': column.width, \'max-width\': column.width }">\n' + '\n' + ' <!-- COLUMN TEXT -->\n' + ' <span class="column-text">\n' + ' <input ng-if="column.selector" type="checkbox" ng-checked="isSelectedAll()" ng-click="toggleSelectAll($event)" />\n' + ' <span\n' + ' class="ap-mesa-sort-icon" \n' + ' ng-if="column.sort"\n' + ' title="This column is sortable. Click to toggle sort order. Hold shift while clicking multiple columns to stack sorting.">\n' + ' <span class="sorting-icon {{ getSortClass( sortDirection[column.id] ) }}"></span>\n' + ' <span ng-bind="transientState.sortPriority[column.id]" class="sort-priority" ng-if="transientState.sortPriorityShow && transientState.sortPriority[column.id]"></span>\n' + ' </span>\n' + ' <span class="ap-mesa-th-title" ap-mesa-th-title></span>\n' + ' </span>\n' + '\n' + ' <!-- COLUMN RESIZER -->\n' + ' <span\n' + ' ng-if="!column.lockWidth"\n' + ' class="column-resizer"\n' + ' ng-class="{\'discreet-width\': !!column.width}"\n' + ' title="Click and drag to set discreet width. Click once to clear discreet width."\n' + ' ng-mousedown="startColumnResize($event, column)">\n' + ' &nbsp;\n' + ' </span>\n' + '\n' + ' </th>\n' + ' </tr>\n' + '\n' + ' <!-- ROW OF COLUMMN FILTERS -->\n' + ' <tr ng-if="hasFilterFields() && transientState.showFiltersRow" class="ap-mesa-filter-row">\n' + '\n' + ' <!-- COLUMN FILTER CELLS -->\n' + ' <td ng-repeat="column in enabledColumnObjects" ng-class="\'column-\' + column.id">\n' + '\n' + ' <!-- FILTER INPUT -->\n' + ' <input\n' + ' type="text"\n' + ' ng-if="(column.filter)"\n' + ' ng-model="persistentState.searchTerms[column.id]"\n' + ' ng-attr-placeholder="{{ column.filterPlaceholder ? column.filterPlaceholder : (column.filter.placeholder || \'filter\') }}"\n' + ' ng-attr-title="{{ column.filter && column.filter.title }}"\n' + ' ng-class="{\'active\': persistentState.searchTerms[column.id] }">\n' + '\n' + ' <!-- FILTER CLEAR BUTTON -->\n' + ' <button\n' + ' ng-if="(column.filter)"\n' + ' ng-show="persistentState.searchTerms[column.id]"\n' + ' class="clear-search-btn"\n' + ' role="button"\n' + ' type="button"\n' + ' ng-click="clearAndFocusSearch(column.id)">\n' + ' &times;\n' + ' </button>\n' + '\n' + ' </td>\n' + ' </tr>\n' + ' </thead>\n' + ' </table>\n' + ' <div ap-mesa-status-display></div>\n' + ' <div class="mesa-rows-table-wrapper" ng-style="tbodyNgStyle" ng-hide="transientState.loadingError">\n' + ' <table ng-class="classes" class="ap-mesa mesa-rows-table">\n' + ' <thead>\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-style="{ width: column.width, \'min-width\': column.width, \'max-width\': column.width }"\n' + ' ></th>\n' + ' </tr>\n' + ' </thead>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[0,transientState.rowOffset]" cell-content="..."></tbody>\n' + ' <tbody ap-mesa-rows class="ap-mesa-rendered-rows"></tbody>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[transientState.rowOffset + visible_rows.length, transientState.filterCount]" cell-content="..."></tbody>\n' + ' </table>\n' + ' </div>\n' + ' <div class="ap-mesa-pagination" ng-if="options.pagingStrategy === \'PAGINATE\'" ap-mesa-pagination-ctrls></div>\n' + '</div>\n' + '');
$templateCache.put('src/templates/apMesa.tpl.html', '<div>\n' + ' <div class="ap-mesa-wrapper" ng-class="{\n' + ' \'paging-strategy-paginate\': options.pagingStrategy === \'PAGINATE\',\n' + ' \'paging-strategy-scroll\': options.pagingStrategy === \'SCROLL\',\n' + ' \'ap-mesa-loading-error\': !!transientState.loadingError,\n' + ' \'ap-mesa-no-data\': !transientState.loading && !transientState.loadingError && visible_rows.length === 0,\n' + ' \'ap-mesa-nonfluid\': options.fixedWidthLayout\n' + ' }">\n' + ' <table ng-class="classes" class="ap-mesa mesa-header-table">\n' + ' <thead>\n' + ' <!-- MAIN ROW OF COLUMN HEADERS -->\n' + ' <tr ui-sortable="sortableOptions" ng-model="enabledColumnObjects" class="ap-mesa-header-row">\n' + '\n' + ' <!-- COLUMN HEADERS -->\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-click="toggleSort($event,column)"\n' + ' ng-class="[\n' + ' {\n' + ' \'sortable-column\' : column.sort,\n' + ' \'select-column\': column.selector,\n' + ' \'is-sorting\': sortDirection[column.id]\n' + ' },\n' + ' \'table-header-\' + column.id,\n' + ' column.classes ? column.classes : \'\'\n' + ' ]"\n' + ' ng-attr-title="{{ column.title || \'\' }}"\n' + ' ng-style="{ width: options.fixedWidthLayout ? \'auto\' : column.width, \'min-width\': column.width, \'max-width\': column.width }">\n' + '\n' + ' <!-- COLUMN TEXT -->\n' + ' <span class="column-text">\n' + ' <input ng-if="column.selector" type="checkbox" ng-checked="isSelectedAll()" ng-click="toggleSelectAll($event)" />\n' + ' <span\n' + ' class="ap-mesa-sort-icon" \n' + ' ng-if="column.sort"\n' + ' title="This column is sortable. Click to toggle sort order. Hold shift while clicking multiple columns to stack sorting.">\n' + ' <span class="sorting-icon {{ getSortClass( sortDirection[column.id] ) }}"></span>\n' + ' <span ng-bind="transientState.sortPriority[column.id]" class="sort-priority" ng-if="transientState.sortPriorityShow && transientState.sortPriority[column.id]"></span>\n' + ' </span>\n' + ' <span class="ap-mesa-th-title" ap-mesa-th-title></span>\n' + ' </span>\n' + '\n' + ' <!-- COLUMN RESIZER -->\n' + ' <span\n' + ' ng-if="!column.lockWidth"\n' + ' class="column-resizer"\n' + ' ng-class="{\'discreet-width\': !!column.width}"\n' + ' title="Click and drag to set discreet width. Click once to clear discreet width."\n' + ' ng-mousedown="startColumnResize($event, column)">\n' + ' &nbsp;\n' + ' </span>\n' + '\n' + ' </th>\n' + ' </tr>\n' + '\n' + ' <!-- ROW OF COLUMMN FILTERS -->\n' + ' <tr ng-if="hasFilterFields() && transientState.showFiltersRow" class="ap-mesa-filter-row">\n' + '\n' + ' <!-- COLUMN FILTER CELLS -->\n' + ' <td ng-repeat="column in enabledColumnObjects" ng-class="\'column-\' + column.id">\n' + '\n' + ' <!-- FILTER INPUT -->\n' + ' <input\n' + ' type="text"\n' + ' ng-if="(column.filter)"\n' + ' ng-model="persistentState.searchTerms[column.id]"\n' + ' ng-attr-placeholder="{{ column.filterPlaceholder ? column.filterPlaceholder : (column.filter.placeholder || \'filter\') }}"\n' + ' ng-attr-title="{{ column.filter && column.filter.title }}"\n' + ' ng-class="{\'active\': persistentState.searchTerms[column.id] }"\n' + ' ng-style="{\'width\': options.fixedWidthLayout ? column.width : \'100%\'}">\n' + '\n' + ' <!-- FILTER CLEAR BUTTON -->\n' + ' <button\n' + ' ng-if="(column.filter)"\n' + ' ng-show="persistentState.searchTerms[column.id]"\n' + ' class="clear-search-btn"\n' + ' role="button"\n' + ' type="button"\n' + ' ng-click="clearAndFocusSearch(column.id)">\n' + ' &times;\n' + ' </button>\n' + '\n' + ' </td>\n' + ' </tr>\n' + ' </thead>\n' + ' </table>\n' + ' <div ap-mesa-status-display></div>\n' + ' <div class="mesa-rows-table-wrapper" ng-style="tbodyNgStyle" ng-hide="transientState.loadingError"\n' + ' ng-class="{\n' + ' \'fixed-width-layout\': options.fixedWidthLayout,\n' + ' \'auto-layout\': !options.fixedWidthLayout\n' + ' }">\n' + ' <table ng-class="classes" class="ap-mesa mesa-rows-table">\n' + ' <colgroup ng-if="options.fixedWidthLayout">\n' + ' <col ng-repeat="column in enabledColumnObjects"\n' + ' ng-style="{ width: column.width }"\n' + ' />\n' + ' </colgroup>\n' + ' <thead>\n' + ' <tr>\n' + ' <th\n' + ' scope="col"\n' + ' ng-repeat="column in enabledColumnObjects"\n' + ' ng-style="{ width: options.fixedWidthLayout ? \'auto\' : column.width, \'min-width\': column.width, \'max-width\': column.width }"\n' + ' ></th>\n' + ' </tr>\n' + ' </thead>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[0,transientState.rowOffset]" cell-content="..."></tbody>\n' + ' <tbody ap-mesa-rows class="ap-mesa-rendered-rows"></tbody>\n' + ' <tbody ng-if="options.pagingStrategy === \'SCROLL\'" ap-mesa-dummy-rows="[transientState.rowOffset + visible_rows.length, transientState.filterCount]" cell-content="..."></tbody>\n' + ' </table>\n' + ' </div>\n' + ' </div>\n' + ' <div class="ap-mesa-pagination" ng-if="options.pagingStrategy === \'PAGINATE\'" ap-mesa-pagination-ctrls></div>\n' + '</div>');
}
]);
angular.module('src/templates/apMesaDummyRows.tpl.html', []).run([
Expand Down
Loading