angular-table-resize
An AngularJS module for resizing table columns!Demo
You can try out a demo by clicking here. You can also use the demo as an example for implementing the module on your own page. The source can be found in the gh-pages branchInstallation
Bower
bower install angular-table-resize
NPM
npm install angular-table-resize
Quick Setup
Link style sheets
<link rel="stylesheet" href="angular-table-resize.css">
Import dependencies
<script src="jquery.js"></script>
<script src="angular.js"></script>
Import the module
<script src="angular-table-resize.js"></script>
Install the module
Add the module to your applicationangular.module('myApplication', ['rzTable']);
On a HTML table tag put the
rz-table
directive
<table rz-table>...</table>
That wasn't so hard was it now?
Attributes
rz-mode
rz-save
true
.
rz-busy
rz-options
rz-model
rz-profile
rz-container
Local Storage
The module automatically saves the current column widths to localStorage. This however requires that you supply your<table>
an id and all of your table headers (<th>
) with an id as well. Otherwise you should set rz-save
to false. For dynamic tables you should use the rz-col
directive (see dynamic tables).Dynamic Tables
If you are generating your columns dynamically (e.g. usingng-repeat
) you should instead of using an id for your table headers (<th>
) use the rz-col
directive. Remember that your table must still have an id for local storage to work.Example:
<table rz-table id="myTable">
<thead>
<th ng-repeat="col in columns" rz-col="col"></th>
</thead>
...
</table>
The
rz-col
directive is a two-way-binding to a string, which is the id for that column.Resizing Modes
The resize mode can be set to any of the following modes. You may also chose to allow the enduser to chose from the below by bindingrz-mode
to a scope variable. Choose the one that works best for you in practice.| Resize Mode | Description | | :---------------- |:--------------| | BasicResizer | Only the two adjecent cell are resized when dragging a handler. Cell widths are always in percentage | | FixedResizer | First columns is width auto. Subsequent column sizes are never changed after resizing | | OverflowResizer | Table may expand out of its container, adding scrollbars. Columns are always the same size after resizing |
Custom Stylesheets
If you want to use your own stylesheets in favor of the minimalistic angular-table-resize.css provided by the module you may do so. You can style the existing classes, or you can overwrite the default classnames (seetableClass
, handleClass
and handleClassActive
). You must keep in mind that the module works best with tables which has the following styles set for the <table>
element:
table-layout: fixed;
border-collapse: collapse;
Utilities
reset()
clearStorage()
reset()
afterwards if you wish to do so.
clearStorageActive()
reset()
instead if you want to do so.update()
Options
You may supply optional/additional options to the module for your personalization:onResizeStarted
:function(column)
onResizeEnded
:function(column)
onResizeInProgress
:function(column, newWidth, diffX)
tableClass
:string
rz-table
(from angular-table-resize.css).
handleClass
:string
rz-handle
(from angular-table-resize.css).handleClassActive
:string
rz-handle-active
(from angular-table-resize.css).