How to add padding to rows in the Lightning data table in LWC?

749 Asked by BuffyHeaton in Salesforce , Asked on Aug 22, 2023

I have created a data table using HTML and JavaScript. But I cannot apply padding on the rows vertically. Is there any way I can do that?

HTML code:


                    resize-column-disabled show-row-number-column="false" 
                class="slds-table slds-table_bordered slds-table_striped">
    

JavaScript Code: 
import { LightningElement, track } from 'lwc';
import searchAccounts from '@salesforce/apex/AccountController.searchAccount';
const columnList = [
    {label: 'Id', fieldName: 'Id'},
    {label: 'Name', fieldName: 'Name', type: 'text'},
    {label: 'Website', fieldName: 'Website'},
    {label: 'Industry', fieldName: 'Industry'}
];
export default class datatableDemo extends LightningElement {
    @track accountList;
    @track columnList = columnList;
    @track noRecordsFound = true;
    connectedCallback() {  
            searchAccounts() 
            .then(result => {
                this.accountList = result;
                this.noRecordsFound = false;
            })
            .catch(error => {
                this.accountList = undefined;
                this.noRecordsFound = true;
            })
        
    }
}

Answered by Dan Peters

You can use a property called cellAttributes to add a class name within a cell. If you add an SLDS padding class or define a class inside the LWC css file, the lightning data table will rewrite it. So, you can define the CSS as a static source by following some simple steps:

Create a CSS file which is a static source, by defining the CSS query. 

Use load style for loading the static source. 

Add the properties required for columns. 

You can use the SLDS data table if you want to add padding to every row, and if you want to add padding to rows, consider using

Your Answer

Answer (1)

Ranjana

To add padding to rows in a Lightning Data Table in LWC (Lightning Web Components), you can use custom CSS styling. Here's how you can achieve this:

Create CSS file:

Create a CSS file in your LWC component's folder if you don't have one already. For example, let's name it customStyles.css.

Define padding styles:

.slds-table tbody tr {

    padding: 10px; /* Adjust the padding value according to your preference */

}Add CSS rules to define the padding for the rows. You can target the rows using their class or element selectors.Include CSS file in your component:

Import the CSS file in your LWC component's JavaScript file.import { LightningElement } from 'lwc';

import customStyles from '@salesforce/resourceUrl/customStyles';

export default class YourComponentName extends LightningElement {

    // Include CSS

    renderedCallback() {

        Promise.all([

            loadStyle(this, customStyles)

        ]);

    }

}

Apply Data Table customization:

Apply your custom CSS to the Lightning Data Table component. Ensure that the CSS file is loaded and the padding styles are applied to the rows.

djust the CSS:

Adjust the CSS styles according to your design requirements, such as changing the padding value or adding additional styling.

By following these steps, you can add padding to rows in the Lightning Data Table in LWC using custom CSS. This allows you to customize the appearance of the data table to match your application's design.

6 Months