1

I have created a datatable in LWC as below:

HTML:

<div class = "slds-m-around_medium">
    <lightning-datatable key-field="Id" data={accountList} columns={columnList} hide-checkbox-column
                resize-column-disabled show-row-number-column="false" 
                class="slds-table slds-table_bordered slds-table_striped">
    </lightning-datatable>
</div>

js:

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

}

Is there any way I can add padding vertically on the rows in this datatable?

3
  • can you show us how do you want it to look – User6670 Nov 15 '20 at 16:20
  • Hey. I just want to padding at top and bottom just like using 'slds-p-vertical_medium' on each row. – Ak47_SFDC Nov 15 '20 at 16:56
  • i can post a workaround for border but not for padding if you want – User6670 Nov 18 '20 at 5:51
4
+50

There is a way, which is not so common. You can add a classname within the cell using cellAttributes property. More detail see 'Adding Styles To Columns section' from the official documentation. Unfortunately if you add SLDS padding class, it will rewrite by the lightning-datatable component style, so you have define your own css class there, like this:

const columns = [
    { label: 'Label', fieldName: 'name' ,
    cellAttributes: 
      { class: 'my-vertical-padding'}},
]

And if you define the class inside of lwc css file, it will also eventually get rewrite by the lightning-datatable component style. So the only solution is define your css as a static resource.

I tried it on my org and it works.

enter image description here

Follow these steps to achieve it.

  1. Create css file as a static resource. You have to define the css query on point in order to not get rewrite by the lightning-datatable component style like this:
table > tbody > tr > td.my-vertical-padding {
  padding: 20px 0;
}
  1. Load the static resource using loadStyle like this:
async connectedCallback() {
  const data = await fetchDataHelper({ amountOfRecords: 100 });
  this.data = data;
  loadStyle(this, customStyle)
}
  1. Finally, add to your columns property
const columns = [
    { label: 'Label', fieldName: 'name' ,
    cellAttributes: 
      { class: 'my-vertical-padding'}},
    { label: 'Website', fieldName: 'website', type: 'url' ,
    cellAttributes: 
      { class: 'my-vertical-padding'}},
    { label: 'Phone', fieldName: 'phone', type: 'phone' ,
    cellAttributes: 
      { class: 'my-vertical-padding'}},
    { label: 'Balance', fieldName: 'amount', type: 'currency' ,
    cellAttributes: 
      { class: 'my-vertical-padding'}},
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date' ,
    cellAttributes: 
      { class: 'my-vertical-padding'}},
];

Have a try and let me know if you have issue on it.

0

There is no way to add padding to individual rows in the standard component for datatable.

If you want to add padding to individual rows, you can use SLDS datatable instead of using the standard <lightning-datatable>. Here is the link for SLDS datatable. You can use <template iterator> to iterate through the datatable rows and you can add padding to rows using slds-p-vertical_medium or any other padding from SLDS.

If you want to use the standard datatable, I would suggest you to try zooming out of the datatable.

HTML

<div class = "zoom-out">
    <lightning-datatable key-field="Id" data={accountList} columns={columnList} hide-checkbox-column
                resize-column-disabled show-row-number-column="false" 
                class="slds-table slds-table_bordered slds-table_striped">
    </lightning-datatable>
</div>

CSS

.zoom-out {
    zoom: 80%;
}

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.