function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Chirag PaliwalChirag Paliwal 

Adjust lightning:datatable row height

I need to adjust the row height of the datatable (https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example)

The default behaviour is it takes up as much height needed to accommodate the content, I need a way to resize the row size.

Attaching the image for reference
User-added imagea
Ajay K DubediAjay K Dubedi
Hi Chirag,

The width and height of the datatable are determined by the container element. A scroller is appended to the table body if there are more rows to display. For example, you can restrict the height to 300px by applying CSS styling to the container element.

 
<div style="height: 300px;">
        <!-- lightning-datatable goes here -->
    </div>

If you want to resize the columns then you can click and drag the width to a minimum of 50px and a maximum of 1000px, unless the default values are changed. To change the minimum and maximum width column, use the 'min-column-width' and 'max-column-width' attributes.

For more information you can go to the documentation part of the datatable in the component library:
https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation    

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
Edwin Schaeffer 11Edwin Schaeffer 11
Row height doesn't look to be supported, but maybe a workaround could be to limit the number of characters in the field before it hits the table. Of course, if you use "getSelectedRows()", and/or you need the data in that field, you're only giong to get back what you truncated.  
<lightning:datatable aura:id="caseTable"
                         keyField="id"
                         data="{! v.inCaseList }"
                         columns="{! v.columns }"
                         maxColumnWidth="500"
                         />

 
 
init : function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Case Number', fieldName: 'CaseNumber', type: 'text'},
            {label: 'Created Date', fieldName: 'CreatedDate', type: 'date'},
            {label: 'Last Comment Date', fieldName: 'Latest_Case_Comment_Date__c', type: 'date'},
            {label: 'Description', fieldName: 'Description', type: 'text'}
        ]);
        var cases = component.get('v.inCaseList');
        cases.forEach(function (item, index) {
            
            for (var property in item) {
                if(item[property] != null && item[property].length > 50) {
                    item[property] = item[property].substring(0, 50) + "...";
                }
            }
        });
    }