How to make buttons in a lightning-datatable smaller in LWC?

Question

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

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);
}

Answer 1

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;
}

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'
    }
}

Answer 2

Thanks to Wei Ni's answer (do upvote that), I think I now better understand what is going on.

I have been adding this CSS to my component:

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

which outputs this into the resulting HTML page:

<style type="text/css">
.scaled-down[cvnp-claims_claims] button[cvnp-claims_claims] {
    transform:scale(.75)
}
</style>

meaning this style only applies to elements that have an attribute named cvnp-claims_claims. That attribute name is added by LWC to many elements output directly by my component e.g.:

<lightning-card cvnp-claims_claims>
    ...
    <lightning-datatable cvnp-claims_claims>
        ...

but in this case, not the buttons (or any other cell content) that is output by the lightning-datatable:

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

I presume this is by design, but it is not helpful for my case...

The cleanest way to go, I think, is to pass in the style in the column definition:

{
    type: "button",
    fixedWidth: 150,
    typeAttributes: {
        label: 'View Details',
        title: 'View Details',
        name: 'viewDetails',
        value: 'viewDetails',
        variant: 'brand'
    },
    cellAttributes: {
        style: 'transform: scale(0.75)'
    }
}

so it is output like this:

<td role="gridcell" style="transform: scale(0.75);">

which works. Inserting some CSS that is not qualified by the attribute somehow would be another approach. But note that you get this error if you attempt to add style directly in the template:

The element is disallowed inside the template. Please add css rules into '.css' file of your component bundle.

Incidentally, while I'm now getting the styling applied, it is not quite right yet as the buttons are scaled-down but the row height is unchanged... But that is a CSS challenge - unsolved at present - not a LWC problem.

PS

See How to escape lightning CSS scoping for adding CSS not qualified an attribute.

Answer 3

I haven't tried it myself, but if this can get background color working, it should work for the size as well.

https://sfdcfacts.com/lwc/color-columns-of-data-table-lwc/

Basically, what it does is adding class attribute as part of cell attributes then manually assign class to it when define data.

{label: ‘Diet Type’, fieldName: ‘diet’, type: ‘text’, cellAttributes: { class: { fieldName: ‘dietCSSClass’ }}},
{diet : ‘Vegeterian’, dietCSSClass : ‘diet-veg’}

This will create a row in the data table with cell value as “Vegeterian”. Also you can have the definition of the class “diet-veg” in the CSS file of your component which will be applied to this cell.

.diet-veg{
background : yellowgreen;
}

Just did sth myself out of curiosity, in case the class cell attribute is not working, I replace it with Style and in the data column, I directly specify the style I want to, seems working as expected.

Example:

{label: 'Working', fieldName: 'working', type: 'boolean', cellAttributes: { style: { fieldName: 'workingCSSClass' }}}

data.push({working : true, workingCSSClass : 'background:black'});