react-table

• tannerlinsley/react-table
  • 基于 Hook 功能强大的 Table 组件
• v8+ 框架无关,不再使用插件模式

警告

• 不支持 sticky 行列
  • 可使用 GuillaumeJasmin/react-table-sticky
    • react-table v7

Note

• table-core
  • 状态管理
  • 操作 reduce
  • 行列处理
  • 其他功能由插件提供
  • createTable
  • table
    • reset - 状态设置为 initialState
• react-table
  • useReactTable
    • 主要提供状态

// 完整空状态
const InitialReactTableState = {
  columnVisibility: {},
  columnOrder: [],
  columnPinning: {
    left: [],
    right: [],
  },
  columnFilters: [],
  globalFilter: {},
  sorting: [],
  expanded: {},
  grouping: [],
  columnSizing: {},
  columnSizingInfo: {
    startOffset: null,
    startSize: null,
    deltaOffset: null,
    deltaPercentage: null,
    isResizingColumn: false,
    columnSizingStart: [], // [string, number][]
  },
  pagination: {
    pageIndex: 0,
    pageSize: 30,
  },
  rowSelection: {},
} as TableState;

• react-table 基于 table-core 提供简单的状态管理
  • 提供 flexRender, useReactTable
• useReactTable
  • 处理 - state, onStateChange
  • 核心逻辑
    • createTable, 持有 ref
      • 返回的 table 一直不会变
    • 更新 table 状态
      • useState 作为 table 的 state - 初始值为构建后的 initialState
      • onStateChange 为 setState
        • 因此每次 state 变化 useTable 也会 rerender

useTable

• 需要 memoized 的属性
  • colums, data, getSubRows, getRowId
• getCoreRowModel
  • (table: Table<TData>) => () => RowModel<TData>
  • 只会调用 1 次
  • memo table.options.data
• getSubRows?: (originalRow: TData,index: number) => undefined | TData[]
• getRowId?: (originalRow: TData,index: number,parent?: Row<TData>) => string
  • 默认用 index 作为 id

export function useReactTable<TData extends RowData>(
  options: TableOptions<TData>
) {
  // 合并选项
  const resolvedOptions: TableOptionsResolved<TData> = {
    state: {}, // Dummy state
    onStateChange: () => {}, // noop
    renderFallbackValue: null,
    ...options,
  }

  // 创建 table
  const [tableRef] = React.useState(() => ({
    current: createTable<TData>(resolvedOptions),
  }))

  // 使用 react 状态
  const [state, setState] = React.useState(() => tableRef.current.initialState)

  // 优先使用用户提供的状态
  tableRef.current.setOptions(prev => ({
    ...prev,
    ...options,
    state: {
      ...state,
      ...options.state,
    },
    // 维护两边状态
    onStateChange: updater => {
      setState(updater)
      options.onStateChange?.(updater)
    },
  }))

  return tableRef.current
}

插件

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

• src/utility-hooks/useTokenPagination.js
  • 未包含在正常包里
  • 独立使用
• 状态
  • pageToken
  • nextPageToken
  • previousPageTokens
    • 数组 - 记录经过的 token
  • pageIndex

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