信息录入
数据展示
Table
Table 是一个用于展示数据的表格组件。
基础用法
详细 react table 使用请参考 react-table
useTable 扩展点
useTable(options)
options.meta
table 中大部分扩展点都是通过 meta 进行配置的。
1interface TableMeta<TData extends RowData> {2tableName: string; // table 名称, 现在仅用于存储状态3refetch?: () => void; // 重新获取数据4storageStateKeys?: (keyof TableState)[] | '*'; // 需要存储的状态字段, 配合 Status2StorageFeature 使用5manual?: boolean; // 是否手动控制数据6enable?: {7// 是否启用某些功能8pagination?: boolean; // 是否启用分页9toolbar?: boolean; // 是否启用工具栏10visible?: boolean; // 是否启用隐藏列11filters?: boolean; // 是否启用过滤12};13enableDefault?: {14// 是否启用默认功能15toolbar?: boolean; // toolbar 默认功能,包含选中显示多选操作状态切换等16th?: boolean; // th 多于一行时,启用 border17};18getProps?: {19// 自定义 BaseTable 中各个组件的 props,可以通过函数返回。各个组件的 props 参考 BaseTable20filters?: (table: Table<TData>) => BaseTable.ToolbarProps['filterProps'];21toolbar?: (22table: Table<TData>23) => Partial<Omit<BaseTable.ToolbarProps, 'filtersProps' | 'enableFilters'>>;24table?: (table: Table<TData>) => Partial<BaseTable.TableProps>;25th?: (26table: Table<TData>,27header: Header<TData, unknown>28) => Omit<BaseTable.TableCellProps, 'ref'>;29pagination?: (table: Table<TData>) => Partial<BaseTable.BaseTablePaginationProps> & {30total?: number;31};32tr?: (table: Table<TData>, row: Row<TData>) => Partial<BaseTable.TableRowProps>;33td?: (table: Table<TData>, props: Record<string, any>) => Omit<BaseTable.TableCellProps, 'ref'>;34empty?: () => Partial<BaseTable.TableFilteredEmptyProps>;35};3637registerHandlers?: StateHandler[];38}
options.meta.registerHandlers
扩展 table 的状态处理函数,通过 registerHandlers
注册。
stateKeys
为 '*' 时,是通过 useEffect
监听所有状态变化。(keyof TableState[])
时,通过 onXXXChange 监听状态变化。
handleName
和 callback
为可选项,callback
优先级大于 handleName
。
1interface StateHandler {2handlerName?: string; // options 中的方法名3stateKeys: (keyof TableState)[] | '*'; // 监听的状态4callback?: (state: Partial<TableState>) => void; // 状态变化时的回调5}
options.columns
通过设置 column.meta
自定义列配置
1interface ColumnMeta<TData extends RowData, TValue = unknown> {2description?: Record<string, any>; // icon ? tooltip props3// filterOptions?: { key: string; label: React.ReactNode }[]; // 过滤选项4selectType?: 'single' | 'multiple'; // 多选类型5sortable?: boolean; // 是否可排序6searchKey?: string; // 自定义搜索 key7th?: Partial<BaseTable.TableCellProps>; // baseTable th props,优先级高于 getProps.th8td?: Partial<BaseTable.TableCellProps>; //baseTable td props,优先级高于 getProps.td9}
Feature
Status2StorageFeature
加入到 _features 后,默认将配置的 state 中字段存储到 localStorage 中。 getDefaultTableOptions 会自动注册该 feature。
options.state2Storage
状态转换为存储的方法,将 state 转换为存储的方法。options.storage2State
存储转换为状态的方法,将存储转换为状态的方法。options.meta.storageKeys
需要存储的字段。
1// storageKey 字段构成 kube-table-${tableName}-state2interface StorageStateOptions {3storage2State?: (storageKey: string) => Partial<TableState>;4state2Storage?: (storageKey: string, state: Partial<TableState>) => void;5}67interface TableMeta<TData extends RowData> {8storageKeys?: Array<keyof TableState>;9tableName: string;10}
getDefaultTableOptions(config)
可快速生成默认 options 配置项
config:
1interface Config {2tableName: string;3manual: boolean; // 是否手动控制数据4enableToolbar?: boolean; // 是否启用 toolbar5enablePagination?: boolean; // 是否启用分页6enableVisible?: boolean; // 是否启用隐藏列7enableFilters?: boolean; // 是否启用过滤8enableStateToStorage?: boolean; // 是否将 state 存储到 storage,配合 options.meta.storageKeys 使用9enableSelection?: boolean; // 是否启用选择10enableSort?: boolean; // 是否启用排序11enableMultiSelection?: boolean; // 是否启用多选12enableInitParamsByUrl?: boolean; // TODO: 是否启用 url 参数初始化(未实现)13enableParamsToUrl?: boolean; // TODO: 是否启用 url 参数(未实现)14}
默认开启功能:
enableFilters
enablePagination
enableToolbar
enableVisible
enableStateToStorage
enableSort
默认启用 Feature:
Status2StorageFeature
默认生成配置:
1{2storageStateKeys: ['columnVisibility'],3registerHandlers: manual4? [5{6handlerName: 'onParamsChange',7stateKeys: ['pagination', 'columnFilters', 'sorting'],8},9]10: [],11}
BaseTable
BaseTable.TableProps
1interface TableInnerProps {2padding?: 'normal' | 'none';3size?: 'small' | 'medium';4stickyHeader?: boolean; // 是否固定表头5className?: string;6style?: React.CSSProperties;7tableWrapperClassName?: string;8}
BaseTable.TableHeadProps
1interface TableHeadProps {2className?: string;3style?: React.CSSProperties;4hasBorder?: boolean; // table th 是否有边框5}
BaseTable.TableBodyProps
1interface TableBodyProps {2className?: string;3style?: React.CSSProperties;4hasBorder?: boolean; // table body 中 td 是否有边框5}
BaseTable.TableRowProps
1export interface TableRowProps {2className?: string;3hover?: boolean; // 是否 hover 效果4selected?: boolean; // 是否选中5style?: React.CSSProperties;6}
BaseTable.TableCellProps
1/**2padding 为 normal 时, variant 和 size 对应 padding 属性3'head-small': '8px 12px',4'head-medium': '16px 12px',5'body-small': '4px 8px',6'body-medium': '8px 12px',7*/8export type TableCellProps = {9padding?: 'none' | 'normal'; // 单元格 padding10align?: 'left' | 'center' | 'right' | 'justify'; // 单元格对齐方式11className?: string;12size?: 'small' | 'medium'; // 单元格大小13ariaSort?: 'asc' | 'desc' | false; // 是否排序14variant?: 'head' | 'body'; // 区分 th 和 td15stickyHeader?: boolean; // 是否固定表头16fixed?: 'left' | 'right'; // 固定列17fixedWidth?: number; // 固定列时的宽度(当 position 为 sticky; left 或者 right 值)18fixedLastLeft?: boolean; // 是否是最左侧的 fixed,主要用于隔断阴影效果19fixedLastRight?: boolean; // 是否是最右侧的 fixed,主要用于隔断阴影效果20style?: React.CSSProperties;21hasBorder?: boolean;22};
BaseTable.ToolbarProps
1interface ToolbarProps {2enableBatchActions: boolean; // 是否多选时操作3enableSettingMenu?: boolean; // 是否暂时操作按钮4onDisableBatchActions?: () => void; // 取消多选操作框5enableFilters?: boolean; // 是否启用过滤6settingMenu?: React.ReactNode; // 操作列表7settingMenuText?: string;8toolbarLeft?: React.ReactNode; // left 组件9toolbarRight?: React.ReactNode; // right 组件10batchActions?: React.ReactNode; // 多选操作按钮11filterProps: {12// FilterInput props13filters?: any;14placeholder?: string;15suggestions: Suggestions;16simpleMode?: boolean;17onChange?: (value: any) => void;18initialKeyword?: string;19};20onFilterInputChange?: (value: any) => void; // FilterInput onChange21refetch?: any; // 刷新22loading?: boolean; // 刷新按钮上的 loading23}
BaseTable.EmptyProps
1// empty 创建按钮 props2interface CreateButtonProps {3enableCreate?: boolean;4createButton?: ReactElement;5clickCreateButtonFn?: (event: MouseEvent<HTMLButtonElement>) => void;6}78// data 为空,无过滤条件9export type TableEmptyProps = PropsWithChildren<EmptyProps & CreateButtonProps>;1011interface DescriptionProps {12clearAndRefetch?: false | (() => void); // 清除过滤条件13refetch?: false | (() => void); // 刷新14}1516// data 为空,有过滤条件17export type TableFilteredEmptyProps = TableEmptyProps & DescriptionProps;
完整示例
Base Table
BaseTable 是一个基础的表格组件,提供了一些基础的表格组件,如 Table, TableHead, TableBody, TableRow, TableCell。