Resizable DataTable Columns

PrimeFaces DataTable Columns are now resizable, you just need to set resizableColumns to true. State is preserved on postback via cookie based persistence and we might add some ajax resize listeners if there is demand from community.

Beta demos are available at Labs Showcase.

This feature is actually sponsored by a client so it is paid work. It is always great to find the chance to have a sponsor to implement something for PrimeFaces and also share the final work with the Open Source PrimeFaces Community. Best of both worlds.

16 Responses to Resizable DataTable Columns

  1. Oleg says:

    Yes, paid work is fine. I wish you more paid works in the future Cagatay🙂

    By the way, one question. There is a resizable column “Year” in the demo. If I try to resize this column by the right horizontal line, everything is okey. If I try to resize this column by the left horizontal line, the column can’t be much resized to be narrower.
    Is it an own implementation or adopted from somewhere?

  2. Daniel says:

    Nice!!!!!!!!!!!!!!!

  3. @Oleg, I’ve looked at various implementation and come up with my own implementation. Each column currently has it’s own resizer which is the right one, so left one is mainly to resize the column on the left. Feature is still beta and being worked on at the moment.

  4. atamer says:

    It is not working , if table is resizable and scroolable,
    Are you planning to implement datatable with more options , like horizontal scroll , and a good implementation of without bug ( for example Lazy datatable first filter bug ..)

  5. Oleg says:

    All right Cagatay. I think, an own implementation is always better to maintain / enhance.
    I have noticed that the resizing is a little bit slow. I mean mouse can be dragged quickly and the resizing is trailing. I can move e.g. my mouse outside of table and still resize a column🙂 Maybe you can apply here a technique for time consuming refreshes after resizing. You know it already from jQuery Layout (PrimeFaces full layout with resizing is one example). The other example is e.g. here http://www.ita.es/jquery/jquery.grid.columnSizing.htm You see just a helper line during resizing, but no resizing happens. The resizing happens just one time after mouse is released.
    I hope you are not angry about my ideas. Thanks a lot for resizable columns!

  6. @atamer: I didn’t say resizable works with scrolling, it is being worked on at the moment. DataTable is complicated, it needs to be stable, free of bugs before thinking about new features. Resizable feature is kinda special case because it is paid work.

  7. @Oleg, for column resizing case, I like live resizing without helper which is an ugly div.

  8. atamer says:

    After all ,you are making wonderfull components..
    Thank you..

  9. Oleg says:

    It’s up to you of course. Matter of taste. But you can reproduce with a couple of drags some strange effects at the moment. I know, it is being worked on at the moment. I just wanted to tell what I found – you can sometimes drag to the right direction and the column expands to the left direction and visa-versa. Sometimes is everything ok. I’m sure you will find all issues during tests.

  10. Turns out client wanted more so expect improvements on this feature like scrollable datatable support, helper and more. Busy times.

  11. Venu says:

    Can a cookie option be a fall back option instead use HTML5 local storage as default?

  12. Daniel says:

    I know this is not the right place, but i ´d like to report a strange behavior on datatable sorting after u added this new feature.

  13. @Daniel, yes sort/resize should be improved not to conflict as resize might cause a sort.

    @Venu, sounds like a good enhancement idea.

  14. It would be nice to extend this functionality with auto size behavior, for example when double clicked on the resize bar the width of the column should automatically be set to the default or to the max length of the label or content of the row (this is similar to resizing behavior in Excel sheets).

    Keep up the good work!

  15. Robert M. says:

    Wow this is very nice!

%d bloggers like this: