0

Despite getting more savvy on all the functional capabilities of LWCs, I am still totally lost on the proper way to apply styling.

enter image description here

This lightning data table is displaying what I need, but for some reason the buttons defaulted to a massive size and stretching the rows. There is apparently an initial width property I can tap into when setting my columns but I tried adding an initial height and it did nothing.

If I want those Fix Hierarchy buttons to be only half as tall, how would I do so?

Here are some of the relevant code snippets: The HTML that generates the table:

<template if:false={emptyTable}>
    <template if:false={error}>                
        <div class="slds-table_col-bordered slds-table_bordered">
            <lightning-datatable
                    if:false={isLoading}
                    key-field="Account ID"
                    data={accounts}
                    hide-checkbox-column
                    columns={Columns}
                    onrowaction={callRowAction}>
            </lightning-datatable>
        </div>         
    </template>   
</template>

And the javascript that sets those columns:

@track Columns = [
    { label: 'Account', fieldName: 'AccountURL', type: 'url', typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}, sortable: "true"},    
    { label: 'Global Parent', fieldName: 'GlobalParentURL', type: 'url', typeAttributes: {label: { fieldName: 'GlobalParentName' }, target: '_blank'}, sortable: "true"},    
    { label: 'Parent Account', fieldName: 'ParentURL', type: 'url', typeAttributes: {label: { fieldName: 'ParentName' }, target: '_blank'}, sortable: "true"},    
    { label: 'Parents Global Parent', fieldName: 'ParentGlobalParentURL', type: 'url', typeAttributes: {label: { fieldName: 'ParentGlobalParentName' }, target: '_blank'}, sortable: "true"}, 
    {
        type: "button", label: '', initialWidth: 100, initialHeight: 40, typeAttributes: {
            label: 'Fix Hierarchy',
            name: 'Fix Hierarchy',
            title: 'Fix Hierarchy',
            disabled: false,
            variant:'Brand',
        }
    },   

Do I need to create my own .css file for something like this? Can I inject it inline? What is the simplest way?

Thanks

1 Answer 1

1

It's on two lines due to the initialWidth value: the label doesn't fit in 100px. Changing initialWidth to 150 or more will fix the issue.
If you can't change it, you could add a custom CSS class (e.g. small-button) to the div containing the table, then set the line-height via Styling Hooks.

HTML:

<div class="slds-table_col-bordered slds-table_bordered small-button">
    <lightning-datatable
            if:false={isLoading}
            key-field="Account ID"
            data={accounts}
            hide-checkbox-column
            columns={Columns}
            onrowaction={callRowAction}>
    </lightning-datatable>
</div>

Please note that key-field should be the name of a unique property of your data, so probably it should be AccountId instead of Account ID. Keep in mind that Javascript is case-sensitive.

CSS:

:host .small-button {
    --slds-c-button-line-height: 1rem;
}

Here's the list of available Styling Hooks for buttons.

Just a last thing, you should use lwc:if|elseif|else directive instead of legacy if:true and if:false ones, since they are going to be deprecated.

2
  • Updating the initial width worked- Thank you! and I will look into that if/else documentation.
    – Chris
    Commented Aug 14, 2023 at 17:16
  • @Chris You're welcome, glad I could help. Please consider to mark helpful answers provided to your questions as accepted, to benefit the whole community. Here you can read why this is a good practice.
    – RubenDG
    Commented Aug 15, 2023 at 9:04

You must log in to answer this question.

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