Resize table columns of html table
Hi friends,
I was replicating a desktop application in php. Everything was going fine but I was stuck at one of the requirements by client. He wanted column resize functionality just like we have in windows environment. User should be able to resize table cell width by dragging the separator between 2 columns.
When I was looking for suitable solution on net, got a very robust one. Take a look at, http://www.millstream.com.au/view/code/tablekit/
It's not as powerful as the resize functionality in windows environment because of limitations in html table. The 100% width of table is maintained automatically. So, once you drag one column, other columns are resized. But still, this script is very much helpful.
This script not only provides column resize functionality but also column sorting with a single click and that to without any additional code !! You just have to call respective class in the table and that's all !! You are ready to go.
The column type can be specified so the sorting works properly i.e. you can mention data type in table column e.g. date format (mm/dd/yy or dd/mm/yy), currency, numbers etc.
Have a demo at, http://www.millstream.com.au/upload/code/tablekit/
There is one more to go :) This code also provides data edit functionality on a single click in table cell. You can edit, save or cancel the changes. Just like the data grid concept in .Net. The page is not reloaded and you can instantly see the new changes.
This code is written using AJAX and Prototype, a javascript framework.
I was replicating a desktop application in php. Everything was going fine but I was stuck at one of the requirements by client. He wanted column resize functionality just like we have in windows environment. User should be able to resize table cell width by dragging the separator between 2 columns.
When I was looking for suitable solution on net, got a very robust one. Take a look at, http://www.millstream.com.au/view/code/tablekit/
It's not as powerful as the resize functionality in windows environment because of limitations in html table. The 100% width of table is maintained automatically. So, once you drag one column, other columns are resized. But still, this script is very much helpful.
This script not only provides column resize functionality but also column sorting with a single click and that to without any additional code !! You just have to call respective class in the table and that's all !! You are ready to go.
The column type can be specified so the sorting works properly i.e. you can mention data type in table column e.g. date format (mm/dd/yy or dd/mm/yy), currency, numbers etc.
Have a demo at, http://www.millstream.com.au/upload/code/tablekit/
There is one more to go :) This code also provides data edit functionality on a single click in table cell. You can edit, save or cancel the changes. Just like the data grid concept in .Net. The page is not reloaded and you can instantly see the new changes.
This code is written using AJAX and Prototype, a javascript framework.
Comments