0

I am using a custom lightning data table which is used to display records in Inline Edit mode. Everytime the last row's picklist values is hidden underneath data tables border. We have to scroll down to see the values which is pain full user experience. Once the drop down is clicked. I should over lap the menu over the data table or simply increase the row Height or Padding .

I tried to increase the padding in console its working but unable to set the values in the component. Last Row

1 Answer 1

0

You can do it by importing a static resource with preferred css.

customDatatable.js:

import LightningDatatable from 'lightning/datatable';
import { loadStyle } from 'lightning/platformResourceLoader';
import CustomDatatableResource from '@salesforce/resourceUrl/CustomDatatable'
    
export default class CustomDataTable extends LightningDatatable {
    hasLoadedStyle = false;
    
    renderedCallback() {
        if (LightningDatatable.prototype.renderedCallback) { // Run this check to bypass lwc jest error
            LightningDatatable.prototype.renderedCallback.call(this);
        }
        if (!this.hasLoadedStyle) {
            this.hasLoadedStyle = true;
            Promise.all([
                loadStyle(this, CustomDatatableResource),
            ]).then(() => { })
        }
    }
}

CustomDatatable.resource:

tr.slds-hint-parent{
    height: 40px;
}
1

You must log in to answer this question.

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