My table component is showing information with random info, some blanks are with URL, some randomly with long text… (more than 1000 characters). Is there anyway to limit the text length in the column?
Say showing as “…” or even click to show detail on pop-up box, if the text length exceeds the limit.
Are you saying that your table is displaying data in error? Or the data that you’re intentionally showing is sometimes upwards of 1000 characters? Sorry, just confused by your phrasing.
I had this thought actually about a rich text field where it could be 20 characters or it could be 500.
You could try something like this…
You’d have to sub out .p with the table field you want to shorten.
You could also use JavaScript but I can’t help with that.
Here’s another solution you can use if you wanted to be able to limit the number of characters text inside a table component and have a “Show More” and “Show Less” option.
Here’s how that would look.
The first thing you’ll need to do is find the component ID of the table you are applying this to.
It would awesome if the “show more” and “Show Less” were in a different colour to stand out. I dont like to mess with JS so I very crudely did it with some css, but it would be very convenient for the JS to do it:
I have used ChatGPT to alter the code that @Chem provided since the originial Javascript doesn’t hide all of the text if using a rich text field where line or paragraph breaks are present. Feel free to test the following in your applciation.
TB.render('component_14', function(data) {
setTimeout(() => {
var len = 60;
var shrinkables = jQuery('tbody td.component_14_field_682 span', data.ele);
shrinkables.each(function(i) {
var fullText = jQuery(this).html();
var visibleText = getVisibleText(fullText, len);
var hiddenText = fullText.slice(visibleText.length);
var id = `shrinkable${i}`;
var html = `<span>${visibleText}<span class="hidden" id="${id}Overflow">${hiddenText}</span></span><a id="${id}MoreLink">... <span style="display: inline-block; color: blue; text-decoration: underline;">Show More</span></a><a class="hidden" id="${id}LessLink"> <span style="display: inline-block; color: blue; text-decoration: underline;">Show Less</span></a>`;
jQuery(this).html(html);
jQuery(`#${id}MoreLink, #${id}LessLink`).css("cursor", "pointer");
jQuery(this).find(`#${id}MoreLink, #${id}LessLink`).on('click', function() {
jQuery(`#${id}Overflow, #${id}MoreLink`).toggleClass('hidden');
jQuery(`#${id}LessLink`).toggleClass('hidden');
});
});
});
});
function getVisibleText(text, maxLength) {
var result = '';
var charCount = 0;
var insideTag = false;
var firstChar = true;
for (var i = 0; i < text.length; i++) {
var char = text[i];
if (char === '<') {
insideTag = true;
} else if (char === '>') {
insideTag = false;
}
if (!insideTag) {
if (firstChar && char === '>') {
firstChar = false;
continue;
}
result += char;
charCount++;
if (charCount >= maxLength) {
if (char === ' ' || char === '\n' || char === '\r') {
break;
}
}
}
}
return result;
}