[SalesForce] Controlling the height of a lightning-combobox dropdown

I have assumed, that data in criterion will be in this format.

{
    field1: "value"
    field2:223,
    ...
    ...
}

As we can't use expressions in LWC HTML, you need to preprocess the table data into an array. Basically a two-dimensional array. Instead of having each row as an object, I changed it to an array of key, fieldApiName, and value because we need generic field identifiers.

let criterionDataArray = [];
this.criterionArray.forEach((criterionRow, index) => {
    let newRow = Object.keys(criterionRow).map((currentValue, key) => {
        return {
            fieldApiName: key,
            value: currentValue,
            key: `${index}${key}`
        }
    });
    criterionDataArray.push({ Id: index, data: newRow });
});
this.tableData = criterionDataArray;

This is how you can iterate that.

HTML

<template if:true={tableData} for:each={tableData} for:item="criterion" for:index="index">
    <tr key={criterion.Id}>
        <td>{index}</td>
        <template if:true={criterion.data} for:each={criterion.data} for:item="row">
            <td data-field-api-name={row.fieldApiName} key={row.key}>{row.value}</td>
        </template>
    </tr>
</template>

When you need to save the data back, you need to convert this into an original format. You can do the same using array.map method.

Create a .css file associated to the Aura Component (Ctrl+Shift+4 STYLE option in the Developer Console when you opened a Lightning Aura Component) and then adjust the CSS as you please.

Refer here (in the Aura CSS Becomes Standard CSS section) to an example of how the CSS looks in an Aura component.

Sample taken from that link:

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, .3);
    padding: 6px 8px;
}
.THIS .lower-third > p {
    padding: 0;
    margin: 0;
}
.THIS .truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}