SOLVED: How to show all data in table rows without making rows maximum height

Ask the community
,
1

Tables are great until they aren’t. Not having row height adjust for the amount of data in the row is a disadvantage. I have a work around. In fact, in some ways it is better than auto adjusting row heights. For example, a table row may have 3 columns but only one cell (across multiple rows and columns) needs to be bigger to show all the data. Even if we could auto increase the row size of that one row it would take up a lot of space on our page just to accommodate that one cell. So, instead, I am making all rows tall enough to give the reader a hint at what is contained. Then, if they click on a cell, a pop-up box will display all the data for that cell.

In most cases, I would prefer a repeater nested in a repeater for several reasons - including the adjusting row size. However, until that is available, here is a solution that works for me. I hope it is useful to others who use tables but struggle with the fact that the amount of data in each record varies (so its row size is never perfect for all rows). I decided I would commit to a row height of two courses (two rows of text) then use a pop-up box for those that want to read more. I used the cellSelect() event because my issue was cell by cell.

Elements I needed
Table
Box (text element and button go in here)
Text Element (or richTextBox in my case)
Button (aka: closeBox)

Element States
Table: under settings → clicking selects cells
Box: hidden, collapsed, and pinned to the center of the screen
Text Element: disabled because mine was a rich text box and I didn’t want editing

export function Table_cellSelect(event) {
let cellData = event.cellData;  

  $w('#box').show();
  $w('#box').expand();
  $w('#richTextBox').value = cellData; 
}
 
export function closeBox_click(event) {
    $w('#box').hide();
    $w('#box').collapse();
}

903×657 69.2 KB

1148×732 80.5 KB

2

This code no longer works. Here is an updated version:

// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction

$w.onReady(function () {
});

$w("#table1").onCellSelect((event) => { //When a cell is selected
  let cellData = event.cellData; //Get Cell data
  $w('#box2').show(); //Show the box
  $w('#box2').expand(); //Expand the box
  $w('#richTextBox1').value = cellData; //Input the cell data in the box
});

$w("#closeBox").onClick((event) => { //When close button is pressed
	$w('#box2').hide(); //Hide the box
	$w('#box2').collapse(); //Collapse the box
});