Handling GeoLocation Field In LWC Datatable

Have you had experience dealing with the GeoLocation field in LWC?

There’s a potential bottleneck you might encounter if you strictly adhere to the documentation. The reason behind this caution is that the documentation suggests a specific format for the columns property when displaying data in a datatable that includes a GeoLocation field.

{
    label: 'Longitude',
    fieldName: 'Location__Longitude__s',
    type: 'location'
},
{
    label: 'Latitude',
    fieldName: 'Location__Latitude__s',
    type: 'location'
}

However, when you implement this code snippet, it merely displays blank fields with little to no information.

Here’s a workaround for this issue…

{
    label: 'Longitude',
    fieldName: 'Location__Longitude__s',
    type: 'number',
    /* 
    	type: 'location' → Documentation says type should be location 
    	but it doesn't work that way and it only works when the type is 		number
    */
    typeAttributes: {maximumFractionDigits: 8}
},
{
    label: 'Latitude',
    fieldName: 'Location__Latitude__s',
    type: 'number',
    /*
    	type: 'location' → Documentation says type should be 
        location but it doesn't work that way and it only works 
        when the type is number
	*/
    typeAttributes: {maximumFractionDigits: 8}
}

Presented below is the entire JavaScript file for the web component.

import { LightningElement, wire } from "lwc";
import getAccounts from "@salesforce/apex/AccountsControllerLWC.getAccounts";

const columns = [
  {
    label: "Account Name",
    fieldName: "Name",
    type: "text",
    sortable: true
  },
  {
    label: "Rating",
    fieldName: "Rating",
    type: "text",
    sortable: true
  },
  {
    label: "Longitude",
    fieldName: "Location__Longitude__s",
    type: "number",
    /*  
        Documentation says type should be location (type: 'location')
        but it doesn’t work that way and it only works when the type is 		number.
    */
    typeAttributes: { maximumFractionDigits: 8 }
  },
  {
    label: "Latitude",
    fieldName: "Location__Latitude__s",
    type: "number",
    /*
        Documentation says type should be location (type: 'location' ) 
        but it doesn’t work that way and it only works when the type is 		number.
    */
    typeAttributes: { maximumFractionDigits: 8 }
  }
];
export default class GeolocationDataTable extends LightningElement {
  data = [];
  columns = columns;
  error;

  @wire(getAccounts)
  wiredAccounts({ error, data }) {
    if (data) {
      this.data = data;
    } else if (error) {
      this.error = error;
    }
  }
}

Below is the HTML file.

<template>
  <lightning-datatable data={data} columns={columns} key-field="id">
  </lightning-datatable>
</template>

As for the Apex class, it will be straightforward and uncomplicated.

public with sharing class AccountsControllerLWC {
  public AccountsControllerLWC() {
  }

  @AuraEnabled(cacheable=true)
  public static List<Account> getAccounts() {
    try {
      return [
        SELECT
          Id,
          Name,
          Industry,
          Rating,
          Location__Longitude__s,
          Location__Latitude__s
        FROM Account
      ];
    } catch (Exception e) {
      throw new AuraHandledException(e.getMessage());
    }
  }
}

Enjoyed the post? Share your thoughts with me.