0

I've been struggling for a while now trying to set the height of icons displayed in lwc datable or lightning tree grid.

In short, I'm unable to have any impact on their height. I find that readability could really be improved should my icon be a little bigger.

You can see on the images that the icons are hardly viewable (and here the screenshot is making a zoom), whick make them almost useless (they are supposed to show the file types in case it wasn't clear).

In datatable:

enter image description here

In lightning tree grid:

enter image description here

What I have so far is:

Datatable:

const columns = [
    {
        fieldName: 'DownloadUrl',
        label: 'Nom du fichier',
        initialWidth: 800,
        type: 'button',
        typeAttributes: {
            label: {fieldName: 'file_name'},
            iconName: { fieldName: 'file_type_icon' },
            variant: 'base',
            name: "Download",
            target: "_blank"
        },
        cellAttributes: { class: 'slds-p-vertical_none slds-m-vertical_none force_height'},
        sortable: true,
        hideDefaultActions: true
    }
]

OR also something with button-icon in a dedicated column:

columns =[    {
        label: "icone",
        type: 'button-icon',
        typeAttributes: {iconName:{ fieldName: 'file_type_icon' },
        hideDefaultActions: true
        }
    ]

but unable to do anything in the first attempt, the classes "slds-p-vertical_none slds-m-vertical_none" allowed to reduce the margin around the icon otherwise they were making the row bigger, but no impact on the icon of course. I've tried to add a custom class force_height and put this:

.force_height{ height: 100px} 

and also no impact

LIGHTNING TREE GRID:

gridColumns = [
        {
            type: 'button',
            label: 'Nom',
            initialWidth: 600,
            wrapText: true,
            typeAttributes: {
                label: {fieldName: 'name'},
                iconName: {fieldName: 'icon_name'},
                variant: 'base',
            },
        }
]

Here I have less idea what I could do

I've searched everywhere and nothing regarding the height of icons in datatable or lightning tree grid.

How should I do ?

Thanks for your help

1 Answer 1

0

I'm not sure if you found a solution, but I wanted to share what I've found. If it helps you, that's fantastic, but regardless I hope it will help the internet at large as well.

I've been looking into this for a few days now. I was hoping there was a way to accomplish this with styling hooks or via a configuration in the 'columns' object, however I'm not finding that to be the case.

Fortunately, I do know of a workaround. It is less elegant than those options, so I was hoping to avoid it, but it is not a hack and is a supported method. This will work for standard lightning components that otherwise cannot be styled because they are in the Shadow DOM.

The steps are:

  1. Create an external stylesheet with appropriate CSS to style the desired element(s).

In my case, I was trying to add an icon to each table row in a lightning datatable component with a modified icon size, much like yourself. The default icon size in the datatable component is set by the ‘slds-icon-size_x-small’ CSS class. I wanted the icon size to be set by the ‘slds-icon-size_small’ CSS class.

I created a new CSS file, entered a new CSS class, and set a selector to apply the styling to any SVG element that is a child of a parent element with the new CSS class applied to it. The new CSS class was a direct copy of the ‘slds-icon-size_small’ class.

For anyone curious, W3 schools has a great resource for CSS Selectors, which can be found here - https://www.w3schools.com/cssref/css_selectors.php

.icon-size_small svg {
    width: var(--lwc-squareIconSmallBoundary,1.5rem);
    height: var(--lwc-squareIconSmallBoundary,1.5rem);
    line-height: var(--lwc-lineHeightReset,1);
}
  1. Once the CSS file is created and saved, upload the external stylesheet to Static Resources in Salesforce - https://help.salesforce.com/s/articleView?id=sf.pages_static_resources_create.htm&type=5

  2. Import the static resource into your LWC.

import LWC_DATATABLE_CSS from '@salesforce/resourceUrl/myNewCssFile'
  1. Import the ‘loadstyle’ function from 'lightning/platformResourceLoader'
import { loadStyle } from 'lightning/platformResourceLoader';
  1. Load the stylesheet using the ‘loadstyle’ function
connectedCallback() {
    loadStyle(this, LWC_DATATABLE_CSS);
}
  1. Set up your icon and apply the desired CSS class from your new external CSS file. Follow the Salesforce documentation for the component you are using (I will demo using a DataTable columns object example).
columns = [
   { 
       label: 'File Name', 
       fieldName: 'fileName', 
       cellAttributes: {
           iconName: { 
               fieldName: 'previewIcon',
           },
           class: 'icon-size_small'
       }, 
       hideDefaultActions: true}
   }
];

That's it. The styling you added in your external stylesheet should now be applied accordingly using the class and CSS selectors.

Before:

Image of a default extra small icon in Lightning DataTable

After:

Image of the small icon override in Lightning DataTable

If it's not working, you may need to inspect the component you're trying to style in your browser's dev tools and ensure that you're using selectors appropriate to the markup of the component you're trying to modify.

Keep in mind, that while loading CSS in this way is made possible by Salesforce, Lightning Components are subject to change and future updates to said components could require you to modify your CSS to keep it compatible with those updates. This doesn't happen frequently, but I have seen it happen.

Hopefully in the future, Salesforce will support applying classes to icons directly from the DataTable configuration objects.

2
  • brilliant this worked both for lightnint tree grid and datatable !! thank you !!
    – yeye
    Jul 8, 2023 at 11:48
  • Glad it worked and the instructions were clear enough :)
    – acraw43
    Jul 9, 2023 at 15:51

You must log in to answer this question.

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