自定义功能指南

export interface TableFeature<TData extends RowData = any> {
  createCell?: (
    cell: Cell<TData, unknown>,
    column: Column<TData>,
    row: Row<TData>,
    table: Table<TData>,
  ) => void;
  createColumn?: (column: Column<TData, unknown>, table: Table<TData>) => void;
  createHeader?: (header: Header<TData, unknown>, table: Table<TData>) => void;
  createRow?: (row: Row<TData>, table: Table<TData>) => void;
  createTable?: (table: Table<TData>) => void;
  getDefaultColumnDef?: () => Partial<ColumnDef<TData, unknown>>;
  getDefaultOptions?: (table: Table<TData>) => Partial<TableOptionsResolved<TData>>;
  getInitialState?: (initialState?: InitialTableState) => Partial<TableState>;
}

// 为我们新功能的自定义状态定义类型
export type DensityState = 'sm' | 'md' | 'lg';
export interface DensityTableState {
  density: DensityState;
}

// 为我们新功能的表格选项定义类型
export interface DensityOptions {
  enableDensity?: boolean;
  onDensityChange?: OnChangeFn<DensityState>;
}

// 为我们新功能的表格 API 定义类型
export interface DensityInstance {
  setDensity: (updater: Updater<DensityState>) => void;
  toggleDensity: (value?: DensityState) => void;
}

// 使用声明合并将我们新功能的 API 和状态类型添加到 TanStack Table 现有的类型中。
declare module '@tanstack/react-table' {
  // 或你正在使用的任何框架适配器
  // 合并我们新功能的状态与现有表格状态
  interface TableState extends DensityTableState {}
  // 合并我们新功能的选项与现有表格选项
  interface TableOptionsResolved<TData extends RowData> extends DensityOptions {}
  // 合并我们新功能的实例 API 与现有表格实例 API
  interface Table<TData extends RowData> extends DensityInstance {}
  // 如果你需要添加单元格实例 API...
  // interface Cell<TData extends RowData, TValue> extends DensityCell
  // 如果你需要添加行实例 API...
  // interface Row<TData extends RowData> extends DensityRow
  // 如果你需要添加列实例 API...
  // interface Column<TData extends RowData, TValue> extends DensityColumn
  // 如果你需要添加标题实例 API...
  // interface Header<TData extends RowData, TValue> extends DensityHeader
  // 注意：`ColumnDef` 无法进行声明合并，因为它是一个复杂类型，而不是接口。
  // 但你仍然可以在 `ColumnDef.meta` 上使用声明合并。
}

export const DensityFeature: TableFeature<any> = {
  // 使用 TableFeature 类型！！
  // 定义新功能的初始状态
  getInitialState: (state): DensityTableState => {
    return {
      density: 'md',
      ...state,
    };
  },
  // 定义新功能的默认选项
  getDefaultOptions: <TData extends RowData>(table: Table<TData>): DensityOptions => {
    return {
      enableDensity: true,
      onDensityChange: makeStateUpdater('density', table),
    } as DensityOptions;
  },
  // 如果你需要添加默认列定义...
  // getDefaultColumnDef: <TData extends RowData>(): Partial<ColumnDef<TData>> => {
  //   return { meta: {} } // 使用 meta 而不是直接添加到 columnDef 以避免难以解决的 typescript 问题
  // },
  // 定义新功能的表格实例方法
  createTable: <TData extends RowData>(table: Table<TData>): void => {
    table.setDensity = (updater) => {
      const safeUpdater: Updater<DensityState> = (old) => {
        let newState = functionalUpdate(updater, old);
        return newState;
      };
      return table.options.onDensityChange?.(safeUpdater);
    };
    table.toggleDensity = (value) => {
      table.setDensity((old) => {
        if (value) return value;
        return old === 'lg' ? 'md' : old === 'md' ? 'sm' : 'lg'; // 在 3 个选项之间循环
      });
    };
  },
  // 如果你需要添加行实例 API...
  // createRow: <TData extends RowData>(row, table): void => {},
  // 如果你需要添加单元格实例 API...
  // createCell: <TData extends RowData>(cell, column, row, table): void => {},
  // 如果你需要添加列实例 API...
  // createColumn: <TData extends RowData>(column, table): void => {},
  // 如果你需要添加标题实例 API...
  // createHeader: <TData extends RowData>(header, table): void => {},
};

const table = useReactTable({
  _features: [DensityFeature], // 传入新功能以在底层与所有内置功能合并
  columns,
  data,
  //..
});

const table = useReactTable({
  _features: [DensityFeature], // 在创建时将我们的自定义功能传递给表格以进行实例化
  columns,
  data,
  //...
  state: {
    density, // 将密度状态传递给表格，TS 仍然正常 :)
  },
  onDensityChange: setDensity, // 使用新的 onDensityChange 选项，TS 仍然正常 :)
});

//...
const { density } = table.getState();

return (
  <td
    key={cell.id}
    style={{
      // 在代码中使用我们的新功能
      padding: density === 'sm' ? '4px' : density === 'md' ? '8px' : '16px',
      transition: 'padding 0.2s',
    }}
  >
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </td>
);