[SalesForce] Inline Editing field needs to be required field in Lightning Data table – LWC

I have a lightning data table displaying a set of Records. Also, it have inline editing set true for one column called Price.

Is it possible to have the Price column as Required while editing?

My Cmp code:

<lightning-datatable
          data-id={table.category}
          key-field="Id"
          selected-rows={preSelectedRows}
          onsave={handleSave}
          draft-values={draftValues}
          max-row-selection =1
          data={table.data}
          columns={column}
          
        >

MY js:

 column = [
        { fieldName: 'Name', label: 'Name' },
        { fieldName: 'Description__c', label: 'Description' },
        {fieldName:'Place__c',label:'Place'},
        {fieldName:'Price__c',label:'Price',type:'currency',editable:true}

    ];

How to make price field as a required field in this table ?

Best Answer

There are a few scenarios you should consider when requiring / validating entry in a lightning-datatable.

A custom "required input cell" with an asterisk on edit would only be possible if you create a custom data type, see the following resources:

OOTB - Required Field

If the field is configured, out of the box (OOTB), as required, then an error on the cell will display after you attempt a save. The DML operation will fail, and the standard table error will be returned: LWC Datatable: See section 'Displaying Errors'

OOTB - Apex (Triggers) / Validation Rules

When an error is added to a record during a DML operation, via configuration or Apex code, then those errors will propagate back to the LWC datatable as error messages at the table and row levels -- see above documentation 'Displaying Errors'.

Client side validation

If none of the above are configured in your org, then you can create an onsave handler in your JavaScript, check the validity of the table rows (both draftValues & existing table data), and if validation fails populate an error object that you pass back to the table error attribute. See above documentation 'Working with Inline Editing'

From a UI perspective you can always provide additional clarity on the required column.

You can highlight the cells (probably just add the 'slds-has-error' class if the field is empty) Conditionally highlight a cell using datatable in LWC
Apply an asterisk in the header *Price
Call it out to user in some other way

Related Solutions

[SalesForce] Lightning Web Components inline editing Datatable – data update issue

Before I begin with my answer, I would like to point a few key points.

1) There is no two-way binding, LWC works in prop-down - event up. That means when you edit anything on the UI, you have to write an onChange handler to update those individual values back to your javascript model. In your case when cell changes you have to update your filteredProducts attribute.

2) The one-way binding is from JS - HTML. But...there are some limitations to it. Complex Object /Array changed in JS are not propagated to the markup. I have asked a similar post for this behavior.

Now coming to your question, as there is no two-way binding, so when you edit a cell cellChange event is called and when you click on save then save event is called.

In those events you get the recordId and updated values in event.detail.draftValues. You can call apex to update those values.

mySaveMethod(event){
         console.log('save method valled');
         console.log(event.detail.draftValues);
        //Update the rows by calling apex and passing array.
        updateMyOppList(event.detail.draftValue).then(()=>{
            refreshApex(this.filteredProducts); //To fetch latest updated values from database, and rerender the UI
        });


    }

Note: Original Array which you are iterating over, even if you edited the value, it still contains the old values. You have to update them, i prefer using refreshApex to get latest values from database.

Sample Playground code: https://developer.salesforce.com/docs/component-library/tools/playground/xYVFGbRGb/7/edit

[SalesForce] LWC lightning data table with column level validation

I would imagine that you are referring to tab out from a cell instead of a column. If that's what you mean, you can capture it using oncellchange event.

From documentation:

You can handle the oncancel, oncellchange, and onsave actions when the cell value changes or is saved. When the onsave action is used, the Cancel and Save button appears after a value cell changes and you press the Enter or Tab key, or move away from the cell.

Remember though, you will need to manipulate the values in the cell to be able to perform any validation as this event will be fired from any cell change and tab outs.

My personal approach will not to implement any validations on tab if you are really looking to edit things in table but wait until you are saving the table so that you are able to reduce the multiple back and forth communication.