Table Column Auto Resize on double clicking on column drag handles

[gourav2110]

@Ahoo-Wang @LORDofDOOM @alexinea @cairabbit @Oceania2018 @EdiWang

In Bootstrap Blazor table it provides a lot of options,
but it would will be great to have more 2 things added to it will be :

1. Resizing fixed columns in the table
2. Auto Resize of a column according to that column data (Cell having most characters in the column) on double click of that column width drag handle

[densen2014]

ediwang？

[EdiWang]

👀

[ArgoZhang]

@gourav2110

Resizing fixed columns in the table

This function is achievable. But currently, it's quite difficult, there's a lot of code that needs to be modified, and I don't think it's very important

Auto Resize of a column according to that column data (Cell having most characters in the column) on double click of that column width drag handle

first. how to measure the width of the element in table-cell. This part is too flexible. Users can fully take over this part of the rendering logic. so can you provide some ideas for this? thanks very much.

could you give this project a star? thank you again.

[gourav2110]

@Ahoo-Wang @LORDofDOOM @alexinea @cairabbit @Oceania2018 @EdiWang

@ArgoZhang Thank you for the reply

Resizing fixed columns in the table

It is important to resize a fixed column as we set an initial width for the fixed column but the data doesn't fit, one way is to hover over the data and see the data using tooltip but when the user want to see the complete column data there is no way. So resizing fixed columns will really help the user and enhance user experience on blazor zone table

If you say it's achievable then we can make it flagwise attribute that whether the user want to resize the fixed column or not.

Auto Resize of a column according to that column data (Cell having most characters in the column) on double click of that column width drag handle

we can add a event on the double click of .col-resizer of the table on which it can fetch the column name and then it can find the max length of the items.columnName whichever object is bind to table and then set the column width accordingly. We have tried with QuickGrid which works fine.

So wanted the same feature in Blazor Zone table as I want to replace QuickGrid to Blazor Zone table in our project.

Already gave this project a star as it's truly deserves one.

[ArgoZhang]

@gourav2110

1. The alternative is to use the Template of TableColumn, where you can do some things, such as set the wrap style. However, resizing column function is the optimal solution. In the coming period, I will refactor this feature. thank you

2. an event on the double click of resizer bar is a good idea. However, it is still very difficult for users to obtain the appropriate width of cells.

The sequence of events

1. trigger double-click event on the browser
2. JavaScript invokes C# code trigger OnDoubleClickResizerBar
3. user need call js again to measure the element width
4. pass the width value to JavaScript

I'm worried that this may not have a good performance. Do you have any suggestions? thank you very much

[gourav2110]

@ArgoZhang

1. Hope it comes soon and if possible can u please share an expected timeline .

2. Even if we can't set the width of the cells that appropriately but we can always use some extra space for safety .
   The sequence is fine, that's the same way we did with QuickGrid and it works fine so it won't have any performance issues as far as I am concerned.

Please let me know your development and deployment plans of these features 😊 (If Any)

Thank You

[ArgoZhang]

maybe today or tomorrow 😊

• track Issue feat(Table): can resize the fixed column #3447
• track Issue feat(Table): add OnDoubleClickResizerBarAsync parameter #3448

please click the make as answer button