I have a table with multiple Markdown columns. When I click on a specific row and a specific field inside that row, only that expands and the other content remains hidden until I click on each one. Is there a way to have all expand and all collapse when I click on a row?
I don’t want all rows of the table to expand, only all fields inside that row.
In the following image I try to explain somehow the desired idea. What is red is just blurred information. But what I did, I pressed only on the first column and only that expanded. The blue lines are the other columns which should have expanded, showing that there should be more content
unfortunately, UIBakery by itself does not provide that option.
So either you can choose “string” as field type which will always show the full text or you can use this small custom JS action I wrote:
let unclamped = document.querySelectorAll("[style$='px;']");
unclamped.forEach( text => text.setAttribute("style", text.getAttribute("style") + " -webkit-line-clamp: 3;"));
let clamped = document.querySelector('datatable-body-row.active')?.querySelectorAll("[style*='-webkit-line-clamp']");
if(!clamped)
return null;
clamped.forEach(text => text.setAttribute("style", text.getAttribute("style").replace(/ -webkit-line-clamp: \d+;/, "")) );
return null;
Attach this action to the rowSelect event of the table.
This does manipulate the attributes of some elements in the DOM and you have to check if it does work for you application. If you have multiple tables and only one or some of them should be affected by this action, you need to change the way the clamped elements are selected.
For a single table change to this
For multiple tables simply change the first selector to querySelectorAll, select a comma seperated list of table class names and then sum the further down selected cell texts in a single array. So something like:
let tables = document.querySelectorAll(".yourFirstTableName, .yourSecondTableName");
let clamped = [...tables].reduce((acc, curr) => {
let cells = curr.querySelector('datatable-body-row.active')?.querySelectorAll("[style*='-webkit-line-clamp']");
if(cells && cell.length > 1)
acc.push(...cells);
return acc;
}, [])
Or simply have an action for each table using the single table selection above.
Hope this helps!
Thank you so much! The first variant works very fine. Glad that you understood the exact behaviour I was trying to explain😆.
I even took it a step ahead and implemented the “collapse back” feature.
For everyone watching this thread, to get the best behaviour, you can add this attached code to an action and that action to a “On Row Double Click” inside the Table Triggers. See the screenshots for a better explanation.
Also, to improve the behaviour, you would probably use this for Long Text fields and you would likely disable the built-in “Expand On Click” from UI Bakery.
// Select elements with a specific style
let unclamped = document.querySelectorAll("[style$='px;']");
let clamped = document.querySelector('datatable-body-row.active')?.querySelectorAll("[style*='-webkit-line-clamp']");
if (clamped && clamped.length > 0) {
// If clamped elements are found, remove the clamping
clamped.forEach(text => {
text.setAttribute("style", text.getAttribute("style").replace(/ -webkit-line-clamp: \d+;/, ""));
});
} else {
// If no clamped elements are found, add the clamping
// The "10" inside these lines represents how many lines should be visible when the element is clamped (collapsed)
unclamped.forEach(text => {
text.setAttribute("style", text.getAttribute("style") + " -webkit-line-clamp: 10;");
});
}
return null;
No problem, was fun to find out.
The idea image was difficult to interprete at first, I didn’t quite understand that it’s a single row as there is so much text ^^
And your are absolutely right with the settings of the table component, didnt think about that!
Kind of confused about
as that should already be in the code I posted, but as long you sorted everything out, whatever ;p
And now that I think about it, this could be useful in my app as well :d
I have yet to implement it in my app, but I quickly tested it out for you.
On cloud version v3.98.0 and on-prem v3.92.0 it worked without changing anything.
You might want to check if you added or meddled with anything that caused this sudden change. I tried adding some random components all over the place, but nothing seemed to interrupt the code.
Maybe an unrestricted component, or an different action that alters the behaviour of the table itself, or that somehow the settings of the table fields were changed.
Anyway it should work; You should also check the dev tools if the style attribute of the paraghraphs actually does change:
