42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
// 列表表格使用页面纵向滚动与 sticky 表头吸顶，不设置表内纵向滚动。
|
|
// 保留横向滚动、固定首列/操作列与分页（每页 20 条，单页隐藏分页条）。
|
|
import { ProProvider, RouteContext } from '@ant-design/pro-components';
|
|
import type { ColumnsType, ColumnType } from 'antd/es/table';
|
|
import { useContext } from 'react';
|
|
import { usePageState } from '@/hooks/usePageState';
|
|
|
|
export const TABLE_PAGE_SIZE = 20;
|
|
|
|
export function useTableSticky() {
|
|
const { hasHeader, fixedHeader, layout } = useContext(RouteContext);
|
|
const { token } = useContext(ProProvider);
|
|
// ProLayout 的 mix 布局默认固定顶部栏；高度与其原生 token/default 保持一致。
|
|
const headerHeight = token.layout?.header?.heightLayoutHeader || 56;
|
|
return { offsetHeader: hasHeader && (fixedHeader || layout === 'mix') ? headerHeight : 0 };
|
|
}
|
|
|
|
export function tablePagination() {
|
|
return { pageSize: TABLE_PAGE_SIZE, hideOnSinglePage: true };
|
|
}
|
|
|
|
export function useTablePagination() {
|
|
const [pagination, setPagination] = usePageState('pagination', { current: 1, pageSize: TABLE_PAGE_SIZE });
|
|
return {
|
|
...tablePagination(),
|
|
...pagination,
|
|
onChange: (current: number, pageSize: number) => {
|
|
setPagination(previous => ({ current: pageSize === previous.pageSize ? current : 1, pageSize }));
|
|
},
|
|
};
|
|
}
|
|
|
|
export function fixedLeft<RecordType>(column: ColumnType<RecordType>): ColumnType<RecordType> {
|
|
return { ...column, fixed: 'left' as const };
|
|
}
|
|
|
|
export function fixedRight<RecordType>(column: ColumnType<RecordType>): ColumnType<RecordType> {
|
|
return { ...column, fixed: 'right' as const };
|
|
}
|
|
|
|
export type { ColumnsType };
|