0

I want to make header-fixed and rownumberColumn-fixed table in lightning:datatable.

Header is fixed by default, you know, but I can't fix rownumberColumns.

How can I activate CSS(like position: sticky) only for rownumberColumns?

Maybe there are some other solutions?

Here is my sample code.

CMP

    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" description="初期化処理"/>
    <lightning:card>
    <lightning:datatable data="{!v.mydata}"
                     columns="{!v.mycolumns}"
                     keyField="Id"
                     showRowNumberColumn="true"/>
    </lightning:card>

JS

 doInit:function(component,event,helper){
        var sampleColumn = [];
        for(var i = 1; i<20 ;i++ ){    
            var sampleColumnItem = {label:i, fieldname:i,type:'text'};
            sampleColumn.push(sampleColumnItem);  
        }
        var sampleData = [{1:""}];
        component.set("v.mycolumns",sampleColumn);
        component.set("v.mydata", sampleData);
    }

CSS

.THIS {
}
.THIS tr td:first-child{
    position: fixed;
    z-index: 1;
    background: white;
}

This is screenshot when I try to set CSS, with showRowNumberColumn="true".

enter image description here

1 Answer 1

1

We dont have any control over Row number column. The only thing we can decide is whether to show column or not using showRowNumberColumn attribute.


However, below is the alternate solution:

Put this style in the component where you implement lightning:datatable:

STYLE:

.THIS tr td:first-child{
    position: fixed;
    z-index: 1;
    background: white;
}

This has to be added by opening STYLE:

enter image description here

COMPONENT:

<lightning:datatable data="{! v.mydata }"
                     columns="{! v.mycolumns }"
                     keyField="Id"
                     showRowNumberColumn="true"/>

Important: This is anti-pattern to reach and manipulate DOM of different component and most importantly different namespace component. Although this works in Aura, this will not work in LWC because of shadow DOM. So, this might break anytime in future when strict DOM isolation is introduced in Aura.

With the data you are showing in question:

enter image description here

Notice the row 1. Its fixed

11
  • Thanks. I tried your solution, and got blank rownumberColumn. But it was not sticky when I scroll page. You expected such a situation?
    – Hayato
    Commented Aug 16, 2019 at 6:59
  • you need showRowNumberColumn="true" to get row numbers as shown in answer Commented Aug 16, 2019 at 7:00
  • you have to use CSS in Style component. Can you show how you implemented code? Commented Aug 16, 2019 at 7:52
  • I just added your style to "STYLE" in console(Style component mean this?).
    – Hayato
    Commented Aug 16, 2019 at 8:05
  • added in answer. This style is same component where you implemented datatable Commented Aug 16, 2019 at 8:06

You must log in to answer this question.

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