Flexible data table (resizable columns)

[lordisp]

Does anyone have an example on how to resize table columns?

I found this: https://codepen.io/adam-lynch/pen/GaqgXP but would love a kind of Tailwind/AplineJS combo-thing

[half-metal]

You can do something like this with a div

<div class="bg-accent w-fit resize-x">
    <textarea class="resize rounded-md bg-accent">foobar</textarea>
</div>

And you can also do it with a table column header, except it doesn't fill out the entire column. It's still resizable but weirdly the <textarea> tag doesn't response to many of the other tailwind classes like w-max so you'll see I tried putting in various items, but to no avail
<th class="bg-secondary top-0 sticky hover:bg-accent "> <textarea class=" resize-x bg-secondary w-max text-center flex self-center rounded-md"> {dataColumn.name}</textarea></th>
I wonder if this is an actual issue with the tag.

[lordisp]

Thanks @half-metal, I'm aware of the resize-x class in div and I used it for more simple things but this isn't really a pretty solution.

[half-metal]

Agreed. Maybe this should be an issue on here. A tailwind class for resizing would be great.

[Naveenthummalacharla]

HI,
how can i implement resize columns and column drag and drop features in tailwind css and flowbite