# Resizable columns (not Datagrid)

**URL:** <https://community.weweb.io/t/resizable-columns-not-datagrid/17661>\
**Category:** Show and Tell\
**Created:** [April 7, 2025, 8:34pm UTC](https://community.weweb.io/t/resizable-columns-not-datagrid/17661 "2025-04-07T20:34:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [April 7, 2025, 8:34pm UTC](https://community.weweb.io/t/resizable-columns-not-datagrid/17661/1 "2025-04-07T20:34:56Z")

</div>

**Showcase:**  
 ![ezgif-8b6f13dc861553](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1bd90618842fd4c5c0d018b1183446ab16a0c9df.gif)

I don’t know if this is kinda common sense, but I created a way to make resizable columns for non datagrid columns…

Here is how I did it:

1. Make the column width equals a variable “col1\_width”
2. Added a container to the end of the colum header (in a way it expands a little into the next column). Made it transparent and blue on hover. Also, on hover, another 1px flexbox appear that goes all the way down. I made the parent flexbox a block with overflow visible so the big vertical line shows up on hover.
3. Created an overlay for the page, initially hidden, so I can use it to run the resize action.
4. The flexbox in 1 has mouse down and a mouse up actions, that changes a **showResizerOverlay** variable to true/false
5. In the overlay, I added a **on mouse move** action, that changes a **column1\_deltaX** to be equal to **event.x - col1\_startX** (col1\_startX is a variable that is equals to col1\_width in the start)
6. The overlay has, than, a **mouse up** action that does:  
6.1 Change **col1\_width** to **col1\_width + coumn1\_deltaX** (deltaX was changed in the mouse move)  
6.2 Change **col1\_start** to be equal **col1\_width**  
6.3 Reset **showResizerOverlay** and Reset **column1\_deltaX**

With this, I get the effect shown in the Gif above…

It’s a bit cumbersome, but I need a very customized table for this project, and will need to use this method only here for 6 or 7 columns, so it works great for me!

---

<div class="post-metadata">

**Author:** ![Toby007](https://avatars.discourse-cdn.com/v4/letter/t/c37758/32.png) [@Toby007](https://community.weweb.io/u/Toby007)\
**Post date:** [July 1, 2025, 9:44am UTC](https://community.weweb.io/t/resizable-columns-not-datagrid/17661/2 "2025-07-01T09:44:21Z")

</div>

Would love to know how you build the table + dates.

---

<div class="post-metadata">

**Author:** ![thijs](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/thijs/32/13651_2.png) [@thijs](https://community.weweb.io/u/thijs)\
**Post date:** [July 11, 2025, 9:27am UTC](https://community.weweb.io/t/resizable-columns-not-datagrid/17661/3 "2025-07-11T09:27:43Z")

</div>

Hi @Toby007 ,

I guess there are many ways to go about this, but one way is:

Columns:

- get the “Date” plugin to help you with formulas on timestamps/dates
- create a dynamic list bound to an array that just counts up numbers like [1,2,3,4,5,6,7,8,9,10,etc]
- you can assign any startdate to number 1.. and then have each number be like the startday +its own number in days added.

Rows:

- any list you want to display

Content is a lookup if the row has any content matching the specific date.

Good luck!