0

Lightning datatable header scrolls along with values in my LWC. How can I make the headers fixed? I tried pasting the datatable code from here and adding CSS position:fixed attribute, but it did not work as expected.

Headers are present: Headers are present

Headers scroll down: Headers scroll down

HTML:

<div>
       <lightning-datatable key-field="Id" data={wrappers} columns={columns}
               onrowaction={navigateToRecordViewPage} hide-checkbox-column="true">
       </lightning-datatable>
</div>

Javascript:

const columns = [
    {
        label: 'View',
        type: 'button',
        initialWidth: 50,
        typeAttributes: {
            label: 'View',
            title: 'View',
            variant: 'base',
            alternativeText: 'View',
            target:'_blank'
        }
    },
    { label: 'Name', fieldName: 'name', type:'text' },
    { label: 'Email', fieldName: 'email', type: 'email' },
    { label: 'Phone', fieldName: 'phone', type: 'phone'},
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' },
];
1

You just have to restrict the height of datatable as shown in example:

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                columns={columns}>
        </lightning-datatable>
    </div>    
</template>

Above table is restricted to 300px of height and so the header will be static in nature automatically

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.