表格

輸入參數即可快速建立表格資料。預設設定包括分頁。

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

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},
];

<AcroolTable
    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,
            },
        };
    })}
/>

Title	Text
Image Chiu	this is a frontend coder
Gary Chien	this is a backend coder

Loading...

Show 1 - 0 itemTotal 0 item / 1 Page

8/Page40/Page72/Page150/Page

Props

Props Name	Type	Required	Default	Description
style	CSS.Properties
className	string
isDark	boolean			暗黑主題
isFetching	boolean			是否顯示讀取中遮罩
title	TTableTitle<K>	✓		表頭列設定
data	ITableBody<K,I>[]			資料列設定
footer	TFooter<K>			頁尾資訊列設定
headerLineHeight	TLineHeight			表頭列高度設定
bodyLineHeight	TLineHeight			內容列高度設定
footerLineHeight	TLineHeight			頁尾列高度設定
cellLineHeight	TLineHeight			cell模式高度設定
gap	string		5px	間距設定
paginateInfo	IPaginateInfo		{totalItems: 0,totalPages: 1}	目前分頁資訊
paginateMeta	IPaginateMeta			指定分頁設定
nextText	ReactNode			下一頁按鈕文字設定
prevText	ReactNode			上一頁按鈕文字設定
isVisibleHeader	boolean		true	是否顯示表頭
isVisiblePaginate	boolean		true	是否顯示分頁
isEnableChangePageScrollTop	boolean		true	切換頁時，是否移動到最上方
tableCellMediaSize	number			Cell顯示模式的最大尺寸設定
onChangePage	TOnChangePage			當換頁時呼叫方法
pageLimitOptions	number[]		[8, 40, 72, 150]	一頁顯示幾筆的下拉選單
orderByType	IOrderByType			排序類型對應字串
renderNoData	() => JSX.Element|string			渲染無資料時顯示方式
renderPageButton	(args: IPageButtonArgs) => ReactNode			渲染分頁按鈕
renderFetching	() => JSX.Element|string		'Loading...'	渲染讀取中樣式內容

type TLineHeight = `${number}${TSizeUnit}`|'auto'

TTableTitle

type TTableTitle<K extends string> = {
    [P in K]: ITitleField;
}

ITitleField

Props Name	Type	Required	Description
className	string
col	TTitleCol	✓	欄位寬度
text	string|number | ReactNode		顯示內容
titleAlign	'left'|'center' |'right'		標題水平對期方式
isEnableSort	booldan		是否啟用排序功能
isSticky	booldan		是否欄位沾黏
isHidden	booldan		是否隱藏欄位

type TSizeUnit = 'px' | '%' | 'em' | 'fr' | 'rem';
type TTitleCol = true|'auto'|number|`${number}${TSizeUnit}`|'min-content'|'max-content'|`minmax('${number}${TSizeUnit}', '${number}${TSizeUnit}')`;

IConfig

Props Name	Type	Required	Description
colSpan	number
dataAlign	'left'|'center' |'right'		垂直排序
dataVertical	'top'|'center' |'bottom'		水平排序

IOrderByType

Props Name	Type	Required	Default	Description
asc	string			對應的字串按升序排列
desc	string			將對應的字串依降序冪排列

ITableBody

Props Name	Type	Required	Default	Description
id	I	✓		識別碼 ID (Array key)
className	string
detail	JSX.Element | TBodyDataDetail<K>[]			額外內容明細
disabled	boolean			是否禁用
onClickRow	(collapse: () => void) => void			點擊列時呼叫的方法
field	TBodyDataField<K>	✓		欄位設定

type TBodyDataDetail<K extends TBodyDataFieldKey> = {
    [P in K]?: { value: TFieldValue } & IConfig;
}
type TFieldFunc = (args: TFieldFuncArgs) => TFieldValue;

type TBodyDataFieldKey = string;
type TFieldValue = string | number | boolean | JSX.Element;

type TBodyDataField<K extends TBodyDataFieldKey> = {
    [P in K]?: TFieldValue | TFieldFunc | { value: TFieldValue } & IConfig;
}

IOrder

Props Name	Type	Required	Default	Description
orderField	number	✓
orderBy	number	✓