[SalesForce] Date formatting to MM/DD/YYYY in LWC datatable

How do we format the date in datatable like MM/DD/YYYY in LWC data table.

In my datatable column type is defined as date, value display in table as
Jan 10, 2020. Expecting in MM/DD/YYYY format.

{ label: "Start Date", fieldName: "Program_Start_Date__c", type: "date" },

I gone through the LWC data table Documentation:

Displays a date and time based on the locale using lightning-formatted-date-time.

Displaying Date and Time Using Type Attributes.

Type Attribute: day, era, hour, hour12, minute, month, second, timeZone, timeZoneName, weekday, year

typeAttributes: {
 day: 'numeric',
month: 'short',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true
}

Still not works, Can anyone Please help me on this.

Best Answer

lightning-datatable internally uses lightning-formatted-date to output date field.

To output, the date in MM/DD/YYYY format set the type attribute to

typeAttributes: {
    day: "numeric",
    month: "numeric",
    year: "numeric"
}

Related Solutions

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.

LWC – dynamically update a datatable column to editable

When dealing with objects, there are two ways LWC knows that a render cycle needs to occur. First, when oldValue !== newValue, which is a memory-address type comparison, a render cycle is automatically triggered, and second, you can use the @track decorator in order to tell LWC that it needs to perform a deep comparison of objects, which will then trigger a render cycle. So, the two main ways you can fix this problem are to either copy the current object, or use track. You do not need to use both, either will suffice.

@track

import { LightningElement, track } from 'lwc'

...

@track columns = [... // omitted for brevity

Copy Array

this.columns[5].editable = true
this.columns = [...this.columns]; // shallow copy array, trigger render