DEV Community

Cover image for How to Create Resizable Columns in Angular Table: A Step-by-Step Guide

How to Create Resizable Columns in Angular Table: A Step-by-Step Guide

chintanonweb on September 29, 2023

Introduction In modern web applications, presenting data in tables is a common practice. However, sometimes, users need the flexibility ...
Collapse
 
carmona profile image
Filipe Carmona

Hi! Do you have this in a jsbin or something I can see the entire code in? I tried just adding this directive and there's a bunch of errors like not including it in a module, etc.
Would be helpful to see the entire project.

Collapse
 
chintanonweb profile image
chintanonweb

Can you please share the errors

Collapse
 
chintanonweb profile image
chintanonweb
Collapse
 
mdennis281 profile image
Michael Dennis

Noticed a pretty big issue- the findParentTable method will cause an endless loop that will crash your browser if no parent table exists.
the fix is to change this:

if (element?.parentElement) element = element.parentElement;

to this:

element = element?.parentElement;

I've completely ripped apart this code at this point, it was a great starting point for me. I added some code that wraps all elements within the cells, and sets the width on both the cell, and the wrapper div. This made the resize work way more reliably, regardless of the content i threw at it.

Overall, your code has some room for improvement- but it proved extremely useful to me in terms of solution approach.. and it's the only place I'm seeing someone use a directive to solve this problem.

Thanks for sharing :)

Collapse
 
chintanonweb profile image
chintanonweb
Collapse
 
chintanonweb profile image
chintanonweb

updated the code please check. My pleasure

Collapse
 
keiuom profile image
Md Keiuom

I implemented this solution, and resizing works but does not work smoothly. Anything wrong with this solution

Collapse
 
chintanonweb profile image
chintanonweb
Collapse
 
mdennis281 profile image
Michael Dennis

noticed commenting out the code after:
"// Adjust the width if the table if it has a fixed width"

makes the resize work a lot better. seems like there's quite a bit of missing required css at the table level to make this work. I'm modifying it into my own because I really like this directive approach.

Collapse
 
chintanonweb profile image
chintanonweb

updated the code please check. My pleasure

Thread Thread
 
melania_stewart_8dcd0e64e profile image
Melania Stewart

Hi, The code won't compile. Where is the last code on this topic? Thanks!!

Thread Thread
 
chintanonweb profile image
chintanonweb

Can you please share the error screenshot or problem you are facing details! So I can get the better idea.

Collapse
 
chintanonweb profile image
chintanonweb