3

I have a datatable placed inside a limited area.

I had a scroll horizontally but not in the correct place.. since user need to scroll all rows to access it. How to make it available without need scroll data vertically?

Please point me to correct code.. Thanks!!

scrollable datatable

Component:

 <lightning:layout>
    <div class="slds-scrollable scrollable_x" style="width:1000rem; border-color: #fff; margin-top: 15px; margin-left: 15px; margin-right: 1px; padding-right:0px;">
         <div id="datatable" class="datatable"> 
            <lightning:datatable indexVar='index'
                                            keyField="id"
                                            data="{! v.lstRetornoRede }"
                                            columns="{! v.columns }"
                                            hideCheckboxColumn="true"
                                            minColumnWidth="10"

                                            /> 
         </div> 
    </div>         
</lightning:layout>     

CSS:

.THIS .datatable{
   max-height:170px;  
    text-align: center;
    border-bottom: 0px;
    overflow-x: auto !important;
}
.THIS .data{
    width:500px;
    max-height:170px;  
    text-align: center;
    box-sizing: content-box;

}

1 Answer 1

0

lightning-datatable will always try to take up 100% of its container's width, and automatically provide a scrollbar across the bottom if the maximum width is too small to show all the columns. In other words, we need to give the data table enough space to not provide its own internal scrollbar.

Here's a short app I wrote that demonstrates this:

<aura:application extends="force:slds">
    <aura:attribute name="columns" type="List" access="global" />
    <aura:attribute name="data" type="List" access="global" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div style="max-width: 500px;  max-height: 500px; overflow: auto">
        <div style="min-width: 400%">
            <lightning:datatable columns="{!v.columns}" data="{!v.data}" keyField="id"/>
        </div>
    </div>
</aura:application>
({
    doInit: function(component, event, helper) {
        let columns = [...Array(20).keys()].map(
            (value)=>
            ({ 
                fieldName: `field${value}`, 
             label: `Field ${value}`
             })
        );
        let data = [...Array(20).keys()].map(
            (value1)=>Object.fromEntries(
                [ ['id', `id.${value1}`],
                ...[...Array(20).keys()].map(
                    (value2)=>[`field${value2}`, `${value1}` ] )]));
        component.set("v.columns", columns);
        component.set("v.data", data);
    }
})

Here, I'm making a 20x20 grid of cells and rows, and then constraining them to a 500x500 box. Here's the output from this app on my screen:

Example of overflow box

Note that this example doesn't include a fixedWidth property, so if I resize the fields to be larger, I would end up with two scrollbars along the bottom. If you want to have it not look and behave weird, you must fix the width of all the columns so that the table cannot think it doesn't have enough space.

You must log in to answer this question.

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