antd-design源码学习系列-Table
table展示是经常要使用的数据展示,这边看一下源码实现。
antd 实现效果如下:
第一层 InternalTable:
return ( <div ref={ref} className={wrapperClassNames} style={style}> // wrapperClassNames 是className 以及classNames()调用之后的className,style是传入的样式style <Spin spinning={false} {...spinProps}> {topPaginationNode} <RcTable<RecordType> {...tableProps} columns={mergedColumns as RcTableProps<RecordType>['columns']} // 对于传入的columns进行处理mergedColumns direction={direction} expandable={mergedExpandable} prefixCls={prefixCls} className={classNames({ [`${prefixCls}-middle`]: mergedSize === 'middle', [`${prefixCls}-small`]: mergedSize === 'small', [`${prefixCls}-bordered`]: bordered, [`${prefixCls}-empty`]: rawData.length === 0, })} data={pageData} // pageData是对传入的dataSource进行处理, //{ //const rawData: readonly RecordType[] = dataSource || //EMPTY_LIST; //const sortedData = React.useMemo( // () => getSortData(rawData, sortStates, //childrenColumnName), //[rawData, sortStates], //) //const mergedData = getFilterData(sortedData, filterStates); //} rowKey={getRowKey} rowClassName={internalRowClassName} emptyText={(locale && locale.emptyText) || renderEmpty('Table')} // Internal internalHooks={INTERNAL_HOOKS} internalRefs={internalRefs as any} transformColumns={transformColumns as RcTableProps<RecordType>['transformColumns']} /> {bottomPaginationNode} </Spin> </div> );
其中 {topPaginationNode} 是底部的pagination
topPaginationNode = renderPagination(topPos!.toLowerCase().replace('top', '')); const renderPagination = (position: string) => ( <Pagination {...mergedPagination} className={classNames( `${prefixCls}-pagination ${prefixCls}-pagination-${position}`, mergedPagination.className, )} size={paginationSize} /> );
<RcPagination {...getIconsProps()} // 底部按钮配置 {...restProps} prefixCls={prefixCls} selectPrefixCls={selectPrefixCls} className={extendedClassName} selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)} locale={locale} /> );
最内部是RcTable, 其实就是https://www.npmjs.com/package/rc-table的Table
相关api参考 以上链接的api
本质上就是对于RcTable的高阶封装