Resizable table columns in scrollable table body

Question

I need to implement a table, in which I can both resize columns and scroll trough the body (as seen here). I am currently using colResizable to resize columns, but I was unable to find a way to make the body scrollable and still keep the columns resizable. colResizable only changes the header's width and expects the columns to behave the same way.

As far as my research went, it is only possible to do scroll through the body by setting display: block on <tbody> which will ultimatly screw up colResizable.

Changing the width of the columns on each drag via JavaScript is possible, but I'd rather go for a html + css only solution, since the table will contain multiple hundred if not thousands of rows and it might effect the performance.

If one of you guys knows a way around this, please let me know.

Edit 1: Unfortunately I am not able to post any code related to my project, since it may contain confidential information, but I believe it is not needed anyways since this problem is not specific to my existing code.

Edit 2: I forgot to mention, that I am using <thead> for my headers. As C4pt4inC4nn4bis pointed out, it is easily doable to resize columns and scroll through <tbody> when not using a <thead> tag. Since I want my headers to stay on top of the table, even while scrolling, I can't simply move everything in <thead> to <tbody>.

I can set display:block to the demo-table you linked to and it still works. Just set `display: block; height: 38px; overflow-y: scroll;` on tbody. — C4pt4inC4nn4bis, Jun 25 '18 at 14:15
Thank you for your comment! And yes, you are right, it does work without a `` tag. I am using a `` for my headers though, which (for whatever reason) breaks colResizable, please correct me if I'm wrong, thats just what I experienced. I'll include that information in my question as well. — Naeramarth, Jun 25 '18 at 14:27
Maybe you can build the table without thead. Just styling the first row as a header -> problem solved ;-) Without a fiddle or sth. like that it's hard to find a better solution. By looking at the code it seems that the header ist used to calculate the whole table witdh and stuff like that. Would be good to see the table "brake". — C4pt4inC4nn4bis, Jun 25 '18 at 14:39
Yeah I thought about that :) I'd like to have the header stay on top though, so it's always clear what column the user is looking at. I implemented a similar solution for now by simply making the div enclosing the table scrollable — Naeramarth, Jun 25 '18 at 14:41
Are you using resizeMode: 'overflow' inside of a scrollable container? — K.F, Jun 25 '18 at 14:47
I'm currently only using resizeMode: 'fit' atm. Do you think setting it to overflow might do the trick? — Naeramarth, Jun 25 '18 at 15:02

score 0 · Answer 1 · answered Mar 15 '21 at 08:33

It's impossible to show Y-axis scroll at without display:block option. Also colResizable doesn't support this situation. Without , the headers can't not be fixed on the top.

Check this code. I manually resize columns whenever resize the table head. There is an event handler (onDrag) in the colResizable plugin.

$("table").colResizable({
    liveDrag: true,
    onDrag: function (e) {
      $("tbody tr td:nth-child(1)").width($("thead th:nth-child(1)").width());
      $("tbody tr td:nth-child(2)").width($("thead th:nth-child(2)").width());
      $("tbody tr td:nth-child(3)").width($("thead th:nth-child(3)").width());
      $("tbody tr td:nth-child(4)").width($("thead th:nth-child(4)").width());
    },
  });

If you do not use the liveDrag option, use the onResize event handler.

Hope it helps. Thank you.

Resizable table columns in scrollable table body

1 Answers1