Search

Hide Save/Cancel Inline Edit


Hide Save/Cancel button when inline edit is enabled for Lightning Data Table in LWC


Lightning Data Table now comes with an in-built attribute to hide the bottom bar which contains Save and Cancel Buttons when Inline Edit is enabled for users.


It provides ease to developers who do not want to use standard save and cancel buttons, instead need to provide custom button for fulfilling business requirements.


Here is the code snippet for the same:

SampleComponent.html

<template>

<div style="height: 300px;">

<lightning-datatable key-field="id" data={data} show-row-number-column

row-number-offset={rowOffset}

suppress-bottom-bar

columns={columns}>

</lightning-datatable>

</div>

</template>


SampleComponent.js

import { LightningElement } from "lwc";

import fetchDataHelper from "@salesforce/apex/ApexClassName.fetchDataHelper";


const columns = [

{ label: 'name', fieldName: 'name', editable: true },

{ label: 'Phone', fieldName: 'phone', type: 'phone', editable: true },

{ label: 'description', fieldName: 'description', type: 'text', editable: true },

{ label: 'Balance', fieldName: 'amount', type: 'currency', editable: true },

];

export default class DatatableWithInlineEdit extends LightningElement {

data = [];

columns = columns;

rowOffset = 0;


// eslint-disable-next-line @lwc/lwc/no-async-await

async connectedCallback() {

this.data = await fetchDataHelper({ amountOfRecords: 100 });

}

}


NOTE: "suppress-bottom-bar" is the attribute to hide the bottom bar when inline edit is enabled.


We will look forward to interact for any questions.

19 views0 comments

Recent Posts

See All