LWC Datatable Date doesn't match Data

Question

I have a custom LWC displaying a Datatable. One of the columns for the Datatable is 'Activity Date'. It looks like the Date being passed into the Data Table and the Date displayed are off by a single day.

HTML:

    <lightning-card title="All Activity" icon-name="standard:task">
        <div slot="actions">
            <lightning-button-icon icon-name="action:refresh" alternative-text="Refresh" size="Medium"
                onclick={refreshActivity} style="margin-right: 10px;">
            </lightning-button-icon>

            <lightning-button-icon icon-name="utility:add" alternative-text="Refresh" size="Medium"
                onclick={addActivity}>
            </lightning-button-icon>
        </div>   

        <div class="slds-m-around_medium" if:true={activityList}>
            <!-- Loop Through data and display -->
            <lightning-datatable 
                key-field="sId" 
                hide-checkbox-column 
                data={activityList} 
                columns={activityColumns}
                >
            </lightning-datatable>
        </div>
        <div class="slds-m-around_medium" if:true={error}>
            <p>Sorry there was an error</p>
        </div>
    </lightning-card>

JS Columns:

 import {LightningElement, wire, api, track} from 'lwc';
import getActivityAndNotes from '@salesforce/apex/viewAllActivityNotesOnAccountLEX.getActivityAndNotes'
import { refreshApex } from '@salesforce/apex';
import Id from '@salesforce/user/Id';
import insertTask from '@salesforce/apex/InsertRecord.createTask';

export default class AccountActivity extends LightningElement {

    // Variables
    @api recordId;
    @api objectApiName;
    @track activityList;
    @track error;
    userId = Id;

    activityModal = false;
    activitySubject;
    activityDescription;

    activity;
    wiredActivityResult;

    activityColumns = [
        { 
            label: 'Subject',
            fieldName: 'sActivitySubject', 
            type: 'text', 
            initialWidth: 200,
        },
        { 
            label: 'Comments', 
            fieldName: 'sActivityComments',
            type: 'text',
            initialWidth: 400
        },
        { 
            label: 'Type', 
            fieldName: 'sActivityType', 
            type: 'text',
        },
        { 
            label: 'Activity Date', 
            fieldName: 'sActivityDate', 
            type: 'date', 
            initialWidth: 100
        },
        { 
            label: 'Assigned To', 
            fieldName: 'sActivityOwner', 
            type: 'text', 
            initialWidth: 100
        },
    ];
    

    @wire(getActivityAndNotes, {accountId: '$recordId'})
    activityResult(result){

        console.log('Activity Result:');
        console.log(result);

        this.wiredActivityResult = result;

        if(result.data){

            console.log('Activity Data Retrieved');
            this.activity = result.data;
            console.log(this.activity);
            console.log('Activities Data: ', result.data.Activities);
   
            this.activityList = result.data.Activities;

        } else if(result.error) {
            
            console.error('Activity Data Error');
            console.log(result.error);
            this.error = result.error;
        } else {

            console.log('Unknown Activity Data Result');
        
        }
    }

There is no Data manipulation within the JS of the LWC but it looks like the date displayed is changed by one. Here is the Data passed into the LWC:

Here is what is displayed:

Any assistance or direction would be greatly appreciated.

Answer 1

In lightning-datatable, the type: 'date' is considered as DateTime, while type: 'date-local' is considered as Date. I'm not sure why such naming was chosen, but see Displaying Date and Time Using Type Attributes in https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

The key difference between DateTime and Date is that in the latter, timezones do not matter. A date is a date, across the globe. But if you interpret 2020-10-09 as an UTC datetime, as in "midnight in London", then the issue is that Oct/09 00:00:00 in UTC is Oct/08 17:00:00 on the West Coast.