This plugin, applied to a number of HTML tables, provides the behaviour of resizing their columns

# This plugin, applied to n-tables of an HTML page, provides the behaviour of resizing columns by dragging the mouse or double-clicking over a “handler hint”.
# I want it to be FAST, non-intrusive, and for HUGE tables (intranet applications, as well as for internet)
# If you double-click, the column collapse (to minimum width property); if you repeat double-click, the column returns to previous width status, and viceversa.
# If the plugin “jquery.cookies.pack.js” is present and the property “cookies” is true, then the columns width status are preserved from load to load.
Compatibility
Tested in IE6+, Firefox 2+
Release Notes
[25 July 2008] Release version 0.5
Bugs / TODO
(buggy) double-click behaviour is tricky
to update to future jQuery UI module or interface version 2
to indicate visually pixels width, while dragging
to use dinamic methods like “create” / “destroy”
to use dinamic methods like “collapse/expand X column/s”
possibility of defining columns width default values for initiating
to improve documentation and demos
(perhaps?) to change “jquery.grid.” into “jquery.table.” as the connotations of “grid” word are too ambitious…

Javascript:

  <script type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="jquery.cookies.pack.js"></script>
<script type="text/javascript" src="jquery.iutil.pack.js"></script>
<script type="text/javascript" src="jquery.idrag.js"></script>
<script type="text/javascript" src="jquery.grid.columnSizing.js"></script>
 

CSS:

 table.jquery_columnSizing{
	table-layout: fixed;
	width : 100%;
	}
table.jquery_columnSizing tr td{
	overflow : hidden;
	}
  

Demo: http://www.ita.es/jquery/jquery.grid.columnSizing.htm
Download: http://www.ita.es/jquery/jquery.grid.columnSizing.pack.jsjquery javascript grid columns collapsible collapse plugin
Source: http://www.ita.es/jquery/jquery.grid.columnSizing.htm

Related Listings:

1. Jquery.grid.rowSizing # This plugin, applied to n-tables of an HTML page,...
2. jQuery Column Filters This jQuery plugin for a quick way of allowing table...
3. DataDrop – Drag Grid Data in From a Spreadsheet with ExtJS Andrea Giammarchi came up with, it was so cool –...
4. Improving Extra Wide Tables Grid View The codebase for the web application I am currently working...
5. ColumnHover JQuery Plugin Script A jQuery-plugin that highlights whole columns in a table when...

Do you like this post?

Email: