3

How to make the column width auto for LWC datatable columns (not AURA). Tried the following it looks its working but adds extra space on horizontal scrollbar and headers are not aligned with data rows

Html

<template>
    <div style="height: 300px">
    <lightning-datatable
            key-field="id"
            columns={columns}
            data={data}
            hide-checkbox-column
            default-sort-direction={defaultSortDirection}
            sorted-direction={sortDirection}
            sorted-by={sortedBy}
            onsort={onHandleSort}
             column-widths-mode="auto">
    </lightning-datatable>
    </div>
</template>

JS

  import { LightningElement } from 'lwc';

const data = [
    { id: 1, name: 'Billy Simonnsdfrtwretwertwertwertsdfasdfasdfs', age: 40, email: '[email protected]', street:'123 main street', street2:'none', city:'Orlando', state:'Florida', country :'USA', county:'Median', zip:'99001'},
    { id: 2, name: 'Kelsey Denesik', age: 35, email: '[email protected]',street:'123 main street', street2:'none', city:'Orlando', state:'Florida', country :'USA', county:'Median', zip:'99001' },
    { id: 3, name: 'Kyle Ruecker', age: 50, email: '[email protected]',street:'123 main street', street2:'none', city:'Orlando', state:'Florida', country :'USA', county:'Median', zip:'99001' },
    {
        id: 4,
        name: 'Krystina Kerluke',
        age: 37,
        email: '[email protected]',
        street:'123 main street', street2:'none', city:'Orlando', state:'Florida', country :'USA', county:'Median', zip:'99001'
    },
];

const columns = [
    { label: 'Name', fieldName: 'name' },
    {
        label: 'Age',
        fieldName: 'age',
        type: 'number',
        sortable: true,
        cellAttributes: { alignment: 'left' },
    },
    { label: 'Email', fieldName: 'email', type:'email' },
    { label: 'Street', fieldName: 'street' },
     { label: 'Street2', fieldName: 'street2' },
      { label: 'City', fieldName: 'city' },
       { label: 'State', fieldName: 'state' },
        { label: 'Country', fieldName: 'country' },
         { label: 'County', fieldName: 'county' },
          { label: 'Zip', fieldName: 'zip' },
];

export default class DemoApp extends LightningElement {
    data = data;
    columns = columns;
    defaultSortDirection = 'asc';
    sortDirection = 'asc';
    sortedBy;

    // Used to sort the 'Age' column
    sortBy(field, reverse, primer) {
        const key = primer
            ? function(x) {
                  return primer(x[field]);
              }
            : function(x) {
                  return x[field];
              };

        return function(a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        };
    }

    onHandleSort(event) {
        const { fieldName: sortedBy, sortDirection } = event.detail;
        const cloneData = [...this.data];

        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
        this.data = cloneData;
        this.sortDirection = sortDirection;
        this.sortedBy = sortedBy;
    }
}

Image enter image description here

0

You must log in to answer this question.

Browse other questions tagged .