6

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.

  • I had used these attributes in the past and it worked fine (and quite sure it does not work now because of the known issue :)). Not sure if there's any other way that you can fix the widths. – Jayant Das Aug 9 '18 at 15:11
12

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'
        }
    }
]
| improve this answer | |
  • initialWidth worked like a dream. Thank you! – Brian Miller Dec 9 '18 at 18:16
  • Does the framework take care of responsiveness? It doesn't seem we need to use media queries, so I was curious about that. – Andy Hitchings Feb 17 at 19:09
0

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>

| improve this answer | |
  • 1
    You're suggesting to put a grid / layout around the datatable. I need the widths of the columns themselves of the datatable to be adjusted – Brian Miller Aug 26 '18 at 7:44
0

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;
            }
        }

    }

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.