How Can I Add Column Resizing to Lightning Design System Data Table?

Question

I am working to build a Lightning Design System data table. I will have several columns that will push the width of the table body beyond a normal screen width. Therefore, I want to add column resizing to the table. I see that the LDS guide gives the CSS classes needed to display the resize bar, but not the interactive code via Javascript to execute the resize. I was unsure how to achieve this.

I did not know if there is an OOTB way to do this via LDS or if custom Javascript would be needed?

The LDS guide section I am referencing can be found here.

Answer 1

There is no out of the box way to do it in LDS. This has been discussed here as well.

There are several JS plugins which can help you achieve this though. A popular one is colResizable

Sample code

$("#sample").colResizable({
        liveDrag:true
});

You might want to look at this thread which lists multiple approaches and pick one based on our use cases (e.g. drag)