antd 设置表头属性_React表格固定表头/锁定列

Ant Design的Table组件挺好用，固定表头及锁定列的功能不在话下，但Ant Design Mobile没有Table组件。移动端要实现表格固定表头及锁定列的功能应该可以使用rc-table，当然也可以自己写一个。

通过分析AntD的Table，可以看出固定表头的表格是由上下两个

原理整明白了，写代码就比较容易了。

components/ScrollableTable/interface.tsx

import * as React from 'react';

export declare type AlignType = 'left' | 'center' | 'right';

export interface ColumnType {

align?: AlignType;

className?: string;

dataKey?: string;

fixed?: boolean;

title?: React.ReactNode;

width?: number;

render?: (value: any, record: any, index: number) => React.ReactNode;

}

export interface TableProps {

className?: string;

style?: React.CSSProperties;

columns?: ColumnType[];

dataSource?: any[];

width?: number;

height?: number;

}

components/ScrollableTable/index.tsx

import React, { FunctionComponent, useRef } from 'react';

import { TableProps, ColumnType } from './interface';

import './index.less';

const ScrollableTable: FunctionComponent = (props: TableProps) => {

const style: React.CSSProperties = props.style || {};

const maxHeight: string = props.width ? (props.height + 'px') : 'unset';

const columns: ColumnType[] = props.columns || [];

const dataSource: any[] = props.dataSource || [];

let maxWidth: number = 0;

if (props.width) style.width = props.width;

if (columns.length === 0) {

columns.push({

dataKey: 'key'

});

}

columns.forEach((column: ColumnType) => {

const width: number = column.width || 50;

maxWidth += width;

});

const fixedColumns: number[][] = getFixedColumns(columns);

const leftFixedColumns: number[] = fixedColumns[0];

const rightFixedColumns: number[] = fixedColumns[1];

const tableBody: any = useRef();

const handleScroll = (target: any) => {

const scrollLeft: number = target.scrollLeft;

const tableHeaders: any = target.parentElement.getElementsByClassName('st-table-header');

if (tableHeaders.length > 0) {

tableHeaders[0].scrollLeft = scrollLeft;

}

};

return (

className={classNames('st-table-container', props.className)}

style={style}

>