type TdRender<T> = (item: T, index: number) => JSX.Element;export interface TableColumn<T> {dataIndex?: string;header: string | JSX.Element;content: TdRender<T> | string;selected?: boolean;hidden?: boolean;order?: number;
}

export default class<T extends { [key: string]: any }> {dataSource: T[] = [];columns: TableColumn<T>[] = [];// operateddisplayColumns: TableColumn<T>[] = [];// change ordercurrentOrderKey: string;changeOrder = (key: string, desc = true) => {this.displayColumns.sort((pre, next) => {if (pre[key] > next[key]) {return desc ? -1 : 1;} else if (pre[key] == next[key]) {return 0;} else if (pre[key] < next[key]) {return desc ? 1 : -1;}});this.currentOrderKey = key;};/*** hide/show column**/toggleSomeContent = (dataIndexs: string[], show = true) => {for (let item of this.columns) {if (dataIndexs.includes(item.dataIndex)) {item.hidden = show;}}this.displayColumns = this.columns.filter((el) => !el.hidden);};constructor(dataSource: T[], columns: TableColumn<T>[]) {this.dataSource = dataSource;this.columns = columns;this.displayColumns = this.columns.filter((el) => !el.hidden);provide("cdk-table", this);}
}

 <table><tr>{tableModel.columns.map(el=>(<th>el.header</th>))}</tr>{tableModel.dataSource.map((el,key)=><tr key={key}>{tableModel.displayColumns.map(item,index=><td key={item.dataIndex+'index'}>{item.dataIndex?item.content:item.content(el,key))}</td>}</tr>)}</table>

 <table><tr><th colSpan="10"></th></tr>{tableModel.dataSource.map((el,key)=><tr key={key}>{tableModel.displayColumns.map(item,index=><td key={item.dataIndex+'index'}>{item.dataIndex?item.content:item.content(el,key))}</td>}</tr>)}</table>

<th>{item.dataIndex?item.content:item.content(el,key))}</th>

<antdTable/>// 组建中
const tableModel = inejct('tableModel')
return ()=>(<table>{/* ... */}</table>
)