表格Cell顯示模式
表格Cell顯示模式,只需要設定你希望該模式的螢幕尺寸,例如:tableCellMediaSize={400}
import AcroolTable from '@acrool/react-table';
export interface IPaginateData {
id: number,
name: string,
role: string,
}
const TableCell = () => {
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 <AcroolTable
tableCellMediaSize={400}
title={{
name: {text: 'Name', col: 'auto'},
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 | |
Stanley McQueen | $ 200 | Guest | 12/12 | N | |
Bryson White | $ 200 | Guest | 12/12 | N | |
Joe Bieber | $ 200 | Guest | 12/12 | N |
Loading...
Show 1 - 0 itemTotal 0 item / 1 Page