跳至主要内容

明細列

明細資料,是在資料列中夾帶額外資訊

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$ 200Admin12/14Y
Imagine Chiu$ 99Guest12/15Y
Jason Dinwiddie$ 880Manage12/12N
Gloria Lu$ 12,300Guest12/11Y
Adam Bolton$ 2,500Guest12/12N
Loading...
Show 1 - 0 itemTotal 0 item / 1 Page