Sticky

In the title parameter, add isSticky: true to the field that needs to be sticky to achieve the sticky effect.

import AcroolTable from '@acrool/react-table';

export interface IPaginateData {
    id: number,
    name: string,
    role: string,
}

const StickyHeader = () => {

    const data: IPaginateData[] = [
        {id: 1, name: 'Jack Wu', role: 'Admin'},
        {id: 2, name: 'Imagine Chiu', role: 'Guest'},
        {id: 3, name: 'Jason Dinwiddie', role: 'Manage'},
        {id: 4, name: 'Gloria Lu', role: 'Guest'},
    ];

    return <MyTable
        title={{
            name: {text: 'Name', col: 'auto', isSticky: true},
            role: {text: 'Role', col: '120px'},
        }}
        data={data.map(row => {
            return {
                id: row.id,
                field: {
                    name: row.name,
                    role: row.role,
                },
            };
        })}
    />
}

Name	Amount	Role	Crated	Joined
Jack Wu	$ 200	Admin	12/14	Y
Imagine Chiu	$ 99	Guest	12/15	Y
Jason Dinwiddie	$ 880	Manage	12/12	N
Gloria Lu	$ 12,300	Guest	12/11	Y
Adam Bolton	$ 2,500	Guest	12/12	N

Show 1 - 0 itemTotal 0 item / 1 Page