See this playground link for an example.

The table gets sortedBy a url, rather than label. I guess I could try to hardcode something or name my fields in a way that's easy to drop url suffix, but it's a bit dirty.

Note event.detail doesn't have a fieldLabel property, just fieldName.

Is there some more elegant solution? Feels like datatable should have built in sorting function that's controlled declaratively, but that's topic for another discussion :)

Edit: For now my fix is

const dataField = column && column.typeAttributes && column.typeAttributes.label
    && column.typeAttributes.label.fieldName || sortedBy
cloneData.sort(this.sortBy(dataField, sortDirection === 'asc' ? 1 : -1))

1 Answer 1


You could add a custom attribute and use that for sorting purposes:

const columns = [
    { label: 'Name', fieldName: 'name', sortBy: 'name' },
        label: 'Age',
        fieldName: 'ageUrl',
        sortBy: 'age',
        typeAttributes: {
            label: {fieldName: 'age'},
        type: 'url',
        sortable: true,
        cellAttributes: { alignment: 'left' },

onHandleSort(event) {
    const { fieldName: sortedBy, sortDirection } = event.detail;
    const cloneData = [...this.data];
    const sortFieldName = this.columns.find(field=>sortedBy===field.fieldName).sortBy;
    cloneData.sort(this.sortBy(sortFieldName, sortDirection === 'asc' ? 1 : -1));
    this.data = cloneData;
    this.sortDirection = sortDirection;
    this.sortedBy = sortedBy;

This trades a small extra setup (sortBy) to gain the ability to sort by whatever attribute you want, even a hidden value in a completely different field.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .