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.
Comments