How to set lightning:datatable fixed column widths

Question

I'm trying to set the column widths for lightning:datatable, but I don't see anywhere in the documentation on how to do this. I was thinking of tinkering with minColumnWidth and maxColumnWidth and see if it would auto-adjust to my liking, but as of August 2018, this functionality is broken

I have a datatable that has many columns that can be very skinny, while other columns should be much bigger. Right now, everytime the page loads, the column widths are evenly distributed.

Answer 1

You can use the initialWidth property of the column to set the width when it is rendered. It can still be resized.

[
    { label: 'Message', fieldName: 'Description', type: 'text' },
    {   
        type:  'button',
        initialWidth: 34,
        typeAttributes: {
            iconName: 'utility:new_window',
            name: 'newWindow', 
            title: 'Popout Window', 
            disabled: false, 
            value: 'test'
        }
    }
]

Answer 2

you need to use your Lightning:DataTable inside Div Tag and Apply the SLDS Stlying.You can't control the Column width of DataTable Directly.

You need to use SLDS for Div and it will show accordingly.PFB the Code.

<div style="slds-col slds-size_2-of-8"> <lightning:datatable data="{!v.mydata}" columns="{!v.mycolumns}" keyField="id" hideCheckboxColumn="true" onrowaction="{! c.handleRowAction }"/> </div>

Answer 3

we ran too into this bug too in LWC, possible workaround is to query datatable object and set 'minColumnWidth' dynamically- but this will apply min width for all columns without explicitly set 'initialWidth' and assumes default min width is 50 as per documentation

columnMinWidthSet = false;

    renderedCallback() { 
        if(!this.columnMinWidthSet){
            const someDataTable = this.template.querySelector('.dataTableClassName');
            if(someDataTable ){            
                someDataTable.minColumnWidth = someDataTable.minColumnWidth <= 50 ? 100 : someDataTable.minColumnWidth;
                this.columnMinWidthSet = true;
            }
        }

    }