2

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);
}
  • Instead of modifying the standard slds-* CSS classes, if you created a custom CSS class (i.e. makeSmaller) and set the properties of that class and then apply the class to your button, can you see if that works? – Bryan Anderson Nov 20 '19 at 18:57
  • I’ll check. Offline for an hour though. – Keith C Nov 20 '19 at 18:59
  • did you try initialWidth property ? – sdandamud1 Nov 20 '19 at 19:00
  • @BryanAnderson Passing an explicit class name does not work with either of the CSS definition .abcdef or .abcdef button. – Keith C Nov 20 '19 at 19:49
  • 1
    Hi @PranayJaiswal, See the answer I just added - I better understand what is going on now. – Keith C Nov 21 '19 at 10:47
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/

enter image description here

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

enter image description here

enter image description here

| improve this answer | |
  • 1
    Thanks for this! Making some progress with cellAttributes: { style: 'transform: scale(0.75); }; setting the style seems to be a help or me. Haven't figured out what I am doing that is different to what you are doing yet. – Keith C Nov 21 '19 at 8:29
3

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.