0

My lightning-datatable has a column that is a button, variant 'base', which causes all rows to be unnecessarily high. Because it is of variant 'base', it is shown as a simpel text link, so the height allocated to it is simply too much. I know that this button is responsible for the height of the row, because omitting it makes the row lower (as I want it to be).

How can I set the maximum height of this button, or of the entire row?

This is the definition of the datatable:

<div class="slds-col slds-p-vertical_xx-small">
    <lightning-datatable
        key-field="Id"
        data={searchResults}
        columns={searchResultColumns}
        draft-values={draftValues}
        oncellchange={handleChangedQuantity}
        onrowaction={handleSearchResultRowAction}
        hide-checkbox-column="true"
        column-widths-mode="auto"
        suppress-bottom-bar="true">
    </lightning-datatable>
</div>

This is the definition of the column that contains the button:

{ label: data.fields.OnOrder__c.label, fieldName: 'OnOrder__c', type: 'button',
  typeAttributes: { name: 'backorders', value: 'backorders', label: { fieldName: 'OnOrder__c' },
  variant: 'base', disabled: { fieldName: 'ProductNotOnOrder__c' } },
  hideDefaultActions: true }
1
  • Not Sure, But maybe try SLDS button custom styling hooks for LWC. Dec 21, 2020 at 15:57

2 Answers 2

1

Well, I forgot to mention in my question that I had already tried the naieve solution, such as setting the height of the button, but those setting were ignored.

After literally more than a day of googling and investigation, this is what worked for me. Adding the following to the definition of the button:

cellAttributes: { class: 'slds-p-vertical_none slds-m-vertical_none' }

Quite simple when you look at it, but for me it was not so simple to find out. This addition removes all vertical space around the button and brings the rows closer together, vertically, though there is still space left.

0

Does this still work for you? I have found that it limits some padding but not as much as I need.

            {   label: 'Build Task',
            fieldName: 'name',
            type: 'button',
            iconName: "custom:custom70",
            sortable: true,
            typeAttributes: {
                name: 'view',
                value: 'view',
                label: { fieldName: 'name' },
                variant: 'base'
            },
            cellAttributes: { class: 'slds-p-vertical_none slds-m-vertical_none'},
            hideDefaultActions: true,
            initialWidth: 145,
        },

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .