[SalesForce] How to make buttons in a lightning-datatable smaller in LWC

I have a lightning-datatable in my Lightning Web Component (LWC) that has several buttons in each row (first button only shown here):

Table snippet

These standard-sized buttons consume quite a lot of vertical space so I thought CSS like this in my component would help:

button.slds-button {
    transform: scale(0.75);
}

i.e. scale down all buttons inside my component.

But it does not, I assume because of the "parent can’t reach into a child" described in Create a CSS Style Sheet for a Component. That is, my component cannot reach inside the lightning-datatable to reach the buttons.

Passing a CSS class in the columns data of the lightning-datatable for the buttons does work, at least when using an SLDS class like slds-hidden; the lightning-button documentation says that:

You can also apply utility classes with the class attribute.

and the class name is set in the DOM and works for classes like slds-hidden. But I haven't managed to scale the buttons using this approach. Perhaps this is another level of "parent can’t reach into a child": this time it is that lightning-datatable can't reach inside lightning-button.

A clear explanation of what is going on (or links to such an explanation) would be appreciated. And is there any way to scale down the buttons for this case?

PS

The current .css file in my component contains:

.scaled-down {
    transform: scale(0.75);
}

and my component contains:

        <lightning-datatable
                class="slds-table_striped"
                key-field="Id"
                data={claims}
                columns={columns}
                hide-checkbox-column
                >
        </lightning-datatable>

and an example button column definition is:

const columns = [
    {
        type: "button",
        fixedWidth: 150,
        typeAttributes: {
            label: 'View Details',
            title: 'View Details',
            name: 'viewDetails',
            value: 'viewDetails',
            variant: 'brand',
            class: 'scaled-down'
        }
    },

And the output using "Inspect" in Chrome is:

<lightning-button class="scaled-down">
    <button name="viewDetails" title="View Details" type="button"
        class="slds-button slds-button_brand">View Details</button>
</lightning-button>

PPS

Some progress. Manually editing in Chrome this doesn't scale the button:

<lightning-button style="transform: scale(0.75)">
    <button name="viewDetails" title="View Details" type="button"
        class="slds-button slds-button_brand">View Details</button>
</lightning-button>

but this does scale the button:

<lightning-button>
    <button style="transform: scale(0.75)"
        name="viewDetails" title="View Details" type="button"
        class="slds-button slds-button_brand">View Details</button>
</lightning-button>

Unfortunately this CSS selector doesn't work:

.scaled-down button {
    transform: scale(0.75);
}

Best Answer

1.5 years later there seems to be a cleaner way if you're OK with using a beta feature.

https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/

You need to go to LDS page for the component you're interested in and scroll all the way down, for example https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview

I needed custom button colo(u)r and making them nice and round. Simply add this to the CSS file

:host {
    --sds-c-button-brand-color-background: #006CF4;
    --sds-c-button-brand-color-background-hover: #003578;
    --sds-c-button-radius-border: 20px;
}

buttons with rounded borders

No cellAttributes, no hacks with special class added at runtime. My datatable's column is just

{
    label: 'Click to retrieve', type: 'button', fieldName: 'quoteRetrievalURL', typeAttributes: {
        label: { fieldName: 'quoteRetrievalRef' },
        variant: 'brand'
    }
}
Related Topic