Colspan

The function of merging cells can set header cell merging, content cell merging, and footer cell merging.

If you want to use header cell merging, you need to set the field colSpan in the title parameter, for example colSpan: 3

If you want to use content cell merging, you need to set the field colSpan in the data.field parameter, for example colSpan: 4

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

const Colspan = () => {
    return <AcroolTable
        title={{
            avatar:   {text: '#',      col: 50,      titleAlign: 'center', dataAlign: 'center', colSpan: 3},
            name:     {text: 'Name',   col: 'auto'},
            amount:   {text: 'Amount', col: '80px',  titleAlign: 'right',  dataAlign: 'right'},
            role:     {text: 'Role',   col: '120px'},
            createdAt:{text: 'Crated', col: '110px'},
            joined:  {text: 'Joined',  col: '80px'},
        }}
        data={data.slice(0, 6).map((row, index) => {
            return {
                id: row.id,
                field: {
                    avatar: <Avatar src={row.avatar}/>,
                    name: row.name,
                    role: row.role,
                    createdAt: dayjs(row.createdAt).format('MM/DD'),
                    joined: row.isJoined ? 'Y':'N',
                    amount: {
                        colSpan: index === 0 ? 4: 1,
                        dataAlign: index === 0 ? 'center': 'right',
                        value: index === 0 ? 'ColSpan 4': `$ ${formatCurrency(row.amount)}`
                    },
                },
            };
        })}
    />
}

		Role	Crated	Joined
Jack Wu	ColSpan 4
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
Stanley McQueen	$ 200	Guest	12/12	N

Show 1 - 0 itemTotal 0 item / 1 Page