Detail

Detailed data is to include additional information in the data column

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

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

const Detail = () => {

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

    return <AcroolTable
        title={{
            name: {text: 'Name', col: 'auto'},
            role: {text: 'Role', col: '120px'},
        }}
        data={data.map(row => {
            return {
                id: row.id,
                onClickRow: collapse => collapse(),
                detail: <>
                    <div>{row.name}</div>
                    <div>{row.amount}</div>
                    <div>{row.role}</div>
                </>,
                field: {
                    name: row.name,
                    role: row.role,
                },
            };
        })}
    />;
}

<AcroolTable
    // ignore
    title={{
        plus: {col: 'auto'},
        name: {text: 'Name', col: 'auto'},
        role: {text: 'Role', col: '120px'},
    }}
    data={data.map(row => {
        return {
            id: row.id,
            detail: [
                {
                    name: {value: 'Fax'},
                    amount: {value: 100, dataAlign: 'right'},
                },
                {
                    name: {value: 'Total'},
                    amount: {value: calcAmount(data), dataAlign: 'right'},
                }
            ],
            field: {
                plus: (args) => <button
                    type="button" onClick={args.collapse}
                    data-active={args.isActive ? '':undefined}
                >
                    {args.isActive ? '-': '+'}
                </button>,
                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