Introduction:
I always prefer using repeater over tables due to design flexibility. I had always thought only repeater can have 2-3 line items per row. However, sometimes I have the constraints of a fixed height in an area that cannot expand. In that case, only a table (with vertical scroll bar) will do, despite the lack of design flexibility (or so I thought).
I was stuck for a long time, until I discovered the “richText” type in Table.
What is richText? It means html and CSS… I hope the documentation spells it out more explicitly.
https://dev.wix.com/docs/velo/api-reference/$w/table/columns
How I did it:
After making this profound realization. I have coded the table below that looks like a repeater. Notice the scroll bar, it is a table not repeater.
Example:
Here is the code for multi-line per row Table (without using Repeater):
combinedArray = combinedArray.map(item => {
return {
...item,
tableTxt: `
<table style="width: 350px; border-collapse: collapse; table-layout: fixed;">
<tr style="height: 20px;">
<td style="width: 20%; text-align: left;">
<span style="color: #ed5a2d;">${item.xTicker}</span>
</td>
<td style="width: 20%; text-align: left;">${item.dateSignal}</td>
<td style="width: 20%; text-align: left;">${item.boStatusTxt}</td>
<td style="width: 20%; text-align: left;">${item.daysLeftTxt}</td>
<td style="width: 20%; text-align: left;">${item.vPctTxt}</td>
</tr>
<tr style="height: 1px;">
<td colspan="5" style="text-align: left; vertical-align: middle;">
<hr style="height:1px; border-width:0; color:#e8e6e6; background-color:#e8e6e6; margin:0.5px">
</td>
</tr>
<tr style="height: 20px;">
<td colspan="3" style="text-align: left; font-size: 8pt; color: #666666;">
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
${item.tickerName}
</div>
</td>
</td>
</tr>
</table>
`
};
$w('#tableBear').columns = [
{
id: "col1",
dataPath: "tableTxt",
label: "",
type: "richText"
}
]
A further note is that the table is actually nested inside a repeater. Upon click of the repeater, the Table will expand. Table is clickable to lead to other content.
