表尾資料列

頁尾資料列，可放置統計或是額外資訊

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

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

const Footer = () => {

    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'},
        }}
        footer={{
            name: {value: 'Total'},
            amount: {value: calcAmount(data), dataAlign: 'right'},
        }}
        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
Fax	100
Total	27,249

Show 1 - 0 itemTotal 0 item / 1 Page