Dynamic Table with Records

[tcsa]

I have records in two tables. I built it dynamically this way. This works, but I want the ‘patente’ field to be displayed in 3 columns per row, and not as a single value per row. I will provide the structure of the table.

<table id="table_vehiculo" class="table--light" data-column-resize="" data-hide-when-empty="" style="width :100%" data-expander="2019">
    <thead>
        <tr>
            <th style="text-align: left; width: 100%;">
                Polizas Patente<br>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-repeat="vehiculo">
            <td style="text-align: left;" data-field="vigenciadesde">@vigenciadesde@</td> 
        </tr>
        <tr data-repeat="vehiculo.patentes">
            <td style="text-align: left;" data-field="patente">@patente@</td>
            
        </tr>
    </tbody>
</table>

[Marten]

You may want to take a look at the solution provided here and modify it so that it works with three columns instead of two.

[Marten]

Here you have an example by which the example shared here is kept in mind.

Please note that this example works a little bit differently, as shown in the image below.

The only values that need to be changed basically are the values of the following variables:

Variable	Description
tableName	Name of the detail table
fieldName	Name of the detail table field
columnsNo	Number of columns

Example.OL-template (9.5 KB)

Standard script

Name: Populate table with data
Selector: table#example tbody

var tableName = "detail",
	fieldName = "Sample",
	columnsNo = 3,
	recordsNo = 0;

if (tableName in record.tables) recordsNo = record[tableName].length;

if (recordsNo != 0) {
	var rowsNo = Math.ceil(recordsNo / columnsNo),
		rows = [];
	
	// 1. Populate the array `rows` with placeholders
	
	for (var i = 0; i < rowsNo; i++) {
		rows.push([]);
		
		for (var j = 0; j < columnsNo; j++) {
			rows[i].push("@Column" + j + "@");
		}
	}
	
	//logger.info("rows: " + JSON.stringify(rows));
	
	// 2. Polulate the array `rows` with actual data
	
	var rowIndex = 0,
		columnIndex = 0;
	
	for (var i = 0; i < recordsNo; i++) {
		rows[rowIndex][columnIndex] = record[tableName][i][fieldName];
		
		if (rowIndex < (rowsNo - 1)) {
			rowIndex++;
		} else {
			rowIndex = 0;
			columnIndex++;
		}
	}
	
	//logger.info("rows: " + JSON.stringify(rows));
	
	// 3. Empty the `tbody` element
	results.html("");
	
	// 4. Populate the table with data
	
	for (var i = 0; i < rows.length; i++) {
		var rowElem = query("<tr data-breakable>");
		
		for (var j = 0; j < rows[i].length; j++) {
			var columnElem = query("<td>");
			
			if (rows[i][j] !== "@Column" + j + "@") {
				columnElem.text(rows[i][j]);
			}
			
			rowElem.append(columnElem);
		}
		
		results.append(rowElem);
	}
} else {
	results.parent().remove();
}