Devextreme-reactive: Column Sizing

[DanHarman]

Hi,

Using the TableColumnResizing feature I've noticed a few issues:

• all columns must have a default width assigned.
• there is no facility to have a column take up remaining space, or even better take up a percentage of the remaining space, so that the space could be shared by more than one column.

This leads to uncomfortable looking grids with a bunch of white space down the right hand side, if the default widths don't make usage of the grids area. Any chance you could consider these features please?

[kvet]

Hi,

We will consider this changes for future releases. As for now, I can recommend you to use the AutoSizer component from react-virtualized to update table column widths according to the Grid width.

[leandro-silva-me]

@kvet i am struggling to do what you recommended, do you have any example?

[kvet]

Hi @leandro-silva-me,
 
I am afraid that I don't have a sample with the described workaround, as its implementation may vary according to user needs.
 
Allow me to elaborate on my idea. As I said earlier, it is possible to use the AutoSizer component to get the current Grid width. So, you will know the Grid width and the width of the Grid columns (as they are stored in the columnWidths property of the TableResizing plugin). After that, you can subscribe to changes in the Grid width and the Grid columns width to correctly adjust the sizes.

[Rid]

@kvet I was trying your solution to enable using percentages rather than pixels (to fill the whole grid) however the issue is using AutoSizer in render means that we'd then need to update the state with the new computed width (I'm using redux), which would cause a loop.

The initial setting of the widths needs to be done before render, however it cannot be done in pixels (as we don't know the gird size). Do you have any idea how we could set the width using percentages?

[DanHarman]

I think the implementation approach suggested will work ('m already using autosize to hack the grid height in the dom), but think I can wait for vendor support as its actually quite complicated to implement. The config would have to set the initial sizes and proportions for the flex columns, but then on resize the proportions of the flex columns need to be maintained by calculating difference of new free space and apportioning based on configured flex proportions + taking into account the current position.

[kvet]

Hi @Rid,
 
As far as I understand, you want to set column widths in percentages instead of pixels. And you don't need to resize columns. If so, here is a workaround: https://stackblitz.com/edit/react-fdhnfe?file=index.js

[Rid]

@kvet thanks! It would be nice if this would work with resizing 😊

[apotox]

Error: The "XXXXX" column's width is not specified.
The TableColumnResizing plugin requires that all columns have the specified width.

this error happen when i update the columns state

[kvet]

Hi @apotox,

Currently, column resizing requires a column width to be defined in the columnWidths or defaultColumnWidths properties of the TableColumnResizing plugin. If the problem still exists, feel free to create a new issue for the specific problem.

[rao123dk]

Error: The "XXXXX" column's width is not specified.
The TableColumnResizing plugin requires that all columns have the specified width.

this error happen when i update the columns state

Still happening. Could you please guide me for this problem?

[churkin]

Hi @rao123dk,
I am sorry for the late response. Is this problem still actual? We are ready to investigate it and find a solution. Let me know if I can help you.

[llaver]

Would be extremely helpful to have automatic or percentage widths by default, then allow the user to set a specific width after resizing.

[churkin]

Hi @llaver,
We will add this enhancement implementation to our plans. Thank you for your cooperation.

[kelsoncosta]

Hi @churkin, you have news about this feature?

[alexferri]

Hi all, we need this feature please!!!!

[churkin]

Hi @alexferri,
our team is working on this issue. I'll let you know of our progress.

[mviens]

@churkin ,
The use case we require is a little different than just fixed vs percentage values. Please add support for using both simultaneously. Here is an example of what we need:

Column 1: * (remainder)
Column 2: 10%
Column 3: 90px
Column 4: 90px
Column 5: 40%
Column 6: 15%

I hope this helps illustrate the necessity of this feature. If not, let me know what more is needed.

[LazyLahtak]

Hi @mviens ,
 
Thank you for this example. We will research it and inform you of our progress.

[R1D3]

news about this features ?!

[LazyLahtak]

Hi @R1D3,
 
We are working on this issue. Already have added resizing columns with "auto" widths. For now, we are adding additional measurement units such as "%", "em", "rem" and other.
You can follow the appropriate pull request to be informed of any progress.

[LazyLahtak]

Hi,
 
We're happy to announce the new column resizing enhancements. We made the following changes:

1. Now it's possible to define column width in different CSS-accepted units (including auto and %). The full list of supported unites is listed in our documentation. Note that this enhancement has no effect for VirtualTable
2. We implemented the resizingMode option for the TableColumnResizing plugin. This option supports two modes: 'nextColumn' and 'widget'.
   
   
   
   • nextColumn
     
     When a user resizes a column, the width of the next column changes.
   
   
   • widget
     
     When a user resizes a column, the width of the component changes.
     
     Note that the auto and % CSS units are not supported if resizingMode is 'widget'
   
   

We also added a new demo demonstrating this feature:  React Grid - Resizing Mode
 

[mviens]

@LazyLahtak ,

It's great to see this has been implemented. Is there any reason why VirtualTable was excluded from this? We switched to VirtualTable from Table because with table, the component would grow beyond the bounds of what we wanted and would not scroll. Using VirtualTable, we saw that the table would stay within the specified bounds and scroll as desired.

Please consider adding this support to VirtualTable too.

[LazyLahtak]

@mviens,
 
Virtual Table has certain limitations caused by the way how it is formed (we need to render only columns visible in the viewport). For this reason, relative CSS-accepted units (em, rem, etc) work incorrectly. However, we will consider adding support for auto and % widths in Virtual Table.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.