Table

Enter parameters to quickly create table data. The default settings include pagination.

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			Dark theme
isFetching	boolean			Whether to display the read mask
title	TTableTitle<K>	✓		Header list settings
data	ITableBody<K,I>[]			Data list settings
footer	TFooter<K>			Footer list settings
headerLineHeight	TLineHeight			Header row height setting
bodyLineHeight	TLineHeight			Body row height setting
footerLineHeight	TLineHeight			Footer row height setting
cellLineHeight	TLineHeight			cell mode row height setting
gap	string		5px	Field item spacing settings
paginateInfo	IPaginateInfo		{totalItems: 0,totalPages: 1}	Currently specified page parameter
paginateMeta	IPaginateMeta			Page count information
nextText	ReactNode			Next page button text
prevText	ReactNode			Previous page button text
isVisibleHeader	boolean		true	Whether to display header
isVisiblePaginate	boolean		true	Whether to display pagination
isEnableChangePageScrollTop	boolean		true	Whether to move to the top when switching pages
tableCellMediaSize	number			Maximum size of Cell display mode
onChangePage	TOnChangePage			Method when changing page
pageLimitOptions	number[]		[8, 40, 72, 150]	Select the menu to display the number of items per page
orderByType	IOrderByType			Alignment categories
renderNoData	() => JSX.Element|string			Content when no data is available
renderPageButton	(args: IPageButtonArgs) => ReactNode			Render page feed button
renderFetching	() => JSX.Element|string		'Loading...'	Render and read block content

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	✓	width
text	string|number | ReactNode		Display content
titleAlign	'left'|'center' |'right'		Horizontal Alignment
isEnableSort	booldan		Whether to enable sorting function
isSticky	booldan		Whether to enable the sticky function
isHidden	booldan		Whether to hide the field

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'		Vertical alignment
dataVertical	'top'|'center' |'bottom'		Horizontal alignment

IOrderByType

Props Name	Type	Required	Default	Description
asc	string			Corresponding strings arranged in ascending order
desc	string			Arrange corresponding strings in descending exponentiation

ITableBody

Props Name	Type	Required	Default	Description
id	I	✓		Identification ID (Array key)
className	string
detail	JSX.Element | TBodyDataDetail<K>[]			Additional details
disabled	boolean			Disable clicks
onClickRow	(collapse: () => void) => void			When clicking on the data column
field	TBodyDataField<K>	✓		Field settings

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	✓