Resizable Columns
Stable Version 2.0.0
Published on 31 Oct by 
Created on 22 March 2017
Details
Component that allows users to resize the columns of any table at run time. Configured to notify the values needed to store the size of the columns to per session or in the database. Simply store this value and then pass it back into the component via input parameter 'ColumnSizeString' for the table to be restore to the last size. Very flexible with many configuration inputs, just drag onto screen, and pass in the runtime id of your table. Wraps: https://github.com/alvaro-prieto/colResizable
Read More

Component that allows users to resize the columns of any table at run time.

Configured to notify the values needed to store the size of the columns to per session or in the database. Simply store this value and then pass it back into the component via input parameter 'ColumnSizeString' for the table to be restore to the last size.

Very flexible with many configuration inputs, just drag onto screen, and pass in the runtime id of your table.

colResizable is a jQuery plugin designed to enhance any kind of HTML table object adding column resizing features by dragging column anchors manually. It is compatible with both mouse and touch devices and has some nice features such as layout persistence after page refresh or postback and compatibility with both percentage and pixel-based table layouts. It is tiny in size (colResizable 1.0 is only 2kb) and it is fully compatible with all major browsers(IE7+, Firefox, Chrome and Opera).

Wraps: https://github.com/alvaro-prieto/colResizable

If you find any issues with this component or have any ideas for enhancements, please let me know!

Enjoy!

What’s new (2.0.0)

Breaking Change: Instead of using Deprecated_NotifyGetMessage() to retrieve the ColumnSizes string, the ColumnSizes string is now an input parameter to the ColumnResized Event. The parameter is named 'ColumnSizes'. Pass this into your screen action to retrieve the column sizes value.

Other Notes:

Deprecated the use of :

  • FakeNotifyWidget
  • Deprecated_Notify
  • Deprecated_NotifyGetMessage

Now uses web block events and calls event directly from JS.

Minor updates to the demo page to use a table from the OutSystemsSampleDataDB module instead of WebPatterns.

Reviews (0)
Category
Libraries, Connectors, Mobile Plugins, Components
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Justin Babel who created this component.
Dependencies
See all 1 dependencies
Requirements
Platform
11.0.0.200
Database
All
Stack
All
Component Consumers
Resizable Columns has no consumers.
Weekly Downloads 
Related Components
Google Drive Connector
OutSystems R&D
Google Drive Connector allows your OutSystems Applications to use the Google Drive REST API to interact with your files.
1009
OutSystems UI Mobile
OutSystems R&D
Create amazing native mobile applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
7372
Google Maps
Labs
Google Maps is a Google Maps Javascript V3 API component, providing Web Blocks and Actions to add interactive maps, markers and directions, along with event driven functionality.
10732
More from Justin Babel
DragTable
Justin Babel
JQuery library used to reorder/drag table columns during runtime. Support for touch and click events. Based on: https://github.com/akottr/dragtable and https://github.com/sindu12jun/table-dragger
148
Super Placeholder
Justin Babel
superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.
Custom Touch Events
Justin Babel
Custom touch events uses Hammer.JS to handle tap, pan, pinch, press, rotate, and swipe events customized by you based on inputs to the event handlers. For example, detecting x amount of taps on an object, detecting a long press of over x amount of seconds, swiping an object right at a certain amount of velocity, etc Wraps: http://hammerjs.github.io/