angular-table-resizeAn AngularJS module for resizing table columns!
DemoYou 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 branch
bower install angular-table-resize
npm install angular-table-resize
Link style sheets
<link rel="stylesheet" href="angular-table-resize.css">
<script src="jquery.js"></script> <script src="angular.js"></script>
Import the module
Install the moduleAdd the module to your application
On a HTML table tag put the
That wasn't so hard was it now?
Local StorageThe 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-saveto false. For dynamic tables you should use the
rz-coldirective (see dynamic tables).
Dynamic TablesIf you are generating your columns dynamically (e.g. using
ng-repeat) you should instead of using an id for your table headers (
<th>) use the
rz-coldirective. Remember that your table must still have an id for local storage to work.
<table rz-table id="myTable"> <thead> <th ng-repeat="col in columns" rz-col="col"></th> </thead> ... </table>
rz-coldirective is a two-way-binding to a string, which is the id for that column.
Resizing ModesThe 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 binding
rz-modeto 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 StylesheetsIf 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 (see
handleClassActive). You must keep in mind that the module works best with tables which has the following styles set for the
table-layout: fixed; border-collapse: collapse;
reset()afterwards if you wish to do so.
reset()instead if you want to do so.
OptionsYou may supply optional/additional options to the module for your personalization:
function(column, newWidth, diffX)