react-table

caution

Note#

  • react-table 核心功能
    • 状态管理
    • 操作 reduce
    • 行列处理
    • 其他功能由插件提供

useTable#

  • 需要 memoized 的属性
    • colums, data, getSubRows, getRowId

插件#

export const usePagination = (hooks) => {
hooks.stateReducers.push(reducer);
hooks.useInstance.push(useInstance);
};
// 状态处理
function reducer(state, action: { type }, previousState, instance) {
// 初始化
if (action.type === actions.init) {
return {
pageSize: 10,
pageIndex: 0,
...state,
};
}
}
// 会在 hook 中循环调用 - 可以使用 react hook 实现插件状态
// 可添加额外方法到 instance
function useInstance(instance) {}

usePagination#

  • 受控分页
    • 对 row 数据进行分页
    • 基于行数计算 pageCount
  • 非受控分页
    • 用于服务端接口场景
    • 提供 pageCount
interface PaginationState {
pageIndex;
pageSize;
}
interface PaginationInstance {
pageCount: number;
pageOptions: number[];
page: Row[];
canPreviousPage: boolean;
canNextPage: boolean;
// 操作 - 进行 dispatch
gotoPage(pageIndex);
previousPage();
nextPage();
setPageSize(pageSize);
}

useTokenPagination#

useRowSelect#

  • 默认会在 row 上设置 isSelected
interface RowSelectOptions {
initialState: {
selectedRowIds: Record<string: boolean> // rowId
}
manualRowSelectedKey?:string // 'isSelected'
autoResetSelectedRows?:bool // true
}
interface RowSelectInstance {
toggleRowSelected(rowPath: string, set?: boolean): void;
toggleAllRowsSelected(set?: boolean): void;
toggleAllPageRowsSelected(set?: boolean): void;
getToggleAllPageRowsSelectedProps(props): RowSelectProps;
getToggleAllRowsSelectedProps(props): RowSelectProps;
isAllRowsSelected: boolean;
selectedFlatRows: Array<Row>;
}
interface RowSelectProps {
onChange;
style: { cursor };
indeterminate;
title;
}
interface RowSelectRowProps {
isSelected: boolean;
isSomeSelected: boolean;
toggleRowSelected(set?: boolean);
getToggleRowSelectedProps(props): RowSelectProps;
}