How to create table with resizable columns using Lightning Design System ( Column Resizable DataTable )

Lightning design system comes with some really nice cascading stylesheet but still, there are some components where JS support is not provided. During a project, I came across the same where I had to write Javascript code by myself. After going many rounds of testing and changes, finally, I managed to get it working. It’s Data Table component which I am talking about.

How does the column resizing work?

I have used mousedown and mousemove events to recognize the mouse cursor moment. Resizable columns have a divider which let users change the column width. You can check the following Gist for the code.

LINK TO SAMPLE CODE

Table

Please feel free to comment your question/suggestions in the comment box.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s