You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Expand a row and render a custom component within it #140
I'd like to be able to expand a row by clicking on a custom action and load a custom component within it. The expanded row would have colspan = # of columns. Just like the picture below.
The row height is styled and fixed for every rows, there's no way to expand it dynamically. I tried using the row renderer method, and my content ends up being cut off or overflow to next row because the height are fixed.
Ahh, now I understand your requirement here, currently BaseTable doesn't support variable row height, so display an expanded row with a different height is not able to implement, I did implement that feature in BaseTable before but removed that later
Since the data will displayed in the expanded row will be pulled remotely, I am planning to just show it in the custom overlay for now. @nihgwu why is the feature being removed? Do you plan on re-implementing expanded row custom content feature anytime? Good job on the package by the way.
For expanded row, you have to provide the row height explicitly, so rowHeight should be a function, just like the VariableList in react-window, but I think that would limit the usage as sometimes we just don't know the exact height for the expanded area, so the best solution for this scenario should be the DynamicList in react-window, but that component is still working in progress(for quite a long time), so I'm planning to implement the dynamic list by myself, but I just don't have enough time on it right now
Reacted by Jt.Cheung, Danny van der Jagt, Greg Beaty and xwilders
Hi @nihgwu ,
I would very happy if you pleasee will add this feature, means that it is possible to insert a variable height custom component and not necessarily 50 height, and that the table behaves properly, meaning that the rows below will get down and start at the end of this component and that it will work well with (vertical) scrolling.
Reacted by Zhifeng Tan, Greg Beaty, xwilders and Kilian Tozzini
Activity
[-]Expand a row and load a custom component within it[/-][+]Expand a row and render a custom component within it[/+]nihgwu commentedon Mar 29, 2020
https://autodesk.github.io/react-base-table/examples/row-renderer or https://autodesk.github.io/react-base-table/examples/row-span
jasontll commentedon May 5, 2020
@nihgwu
The row height is styled and fixed for every rows, there's no way to expand it dynamically. I tried using the row renderer method, and my content ends up being cut off or overflow to next row because the height are fixed.
nihgwu commentedon May 5, 2020
Ahh, now I understand your requirement here, currently BaseTable doesn't support variable row height, so display an expanded row with a different height is not able to implement, I did implement that feature in BaseTable before but removed that later
jasontll commentedon May 5, 2020
Since the data will displayed in the expanded row will be pulled remotely, I am planning to just show it in the custom overlay for now. @nihgwu why is the feature being removed? Do you plan on re-implementing expanded row custom content feature anytime? Good job on the package by the way.
nihgwu commentedon May 5, 2020
For expanded row, you have to provide the row height explicitly, so
rowHeightshould be a function, just like theVariableListinreact-window, but I think that would limit the usage as sometimes we just don't know the exact height for the expanded area, so the best solution for this scenario should be theDynamicListinreact-window, but that component is still working in progress(for quite a long time), so I'm planning to implement the dynamic list by myself, but I just don't have enough time on it right nowMichael101sh commentedon May 27, 2020
Hi @nihgwu ,
I would very happy if you pleasee will add this feature, means that it is possible to insert a variable height custom component and not necessarily 50 height, and that the table behaves properly, meaning that the rows below will get down and start at the end of this component and that it will work well with (vertical) scrolling.
nihgwu commentedon Jun 29, 2020
OK, thanks #170, it is possible now, here is an example https://autodesk.github.io/react-base-table/examples/detail-view
Be sure it won't work with frozen columns