Skip to main content

BaseTable API

组件 props#

info

dataSource 和 columns 是必传 props,其他 props 均可选。

主要字段#

字段类型
dataSourceany[]表格数据源
columnsArtColumn[]表格的列配置
isLoadingboolean表格是否在加载中
primaryKeystring
(row: any) => string
用于指定每一行的 key
传入字符串表示从数据中获取对应字段的值作为 key
传入函数时将调用该函数来生成每一行的 key
不传该 prop 时,表格将使用下标作为每一行的 key
getRowProps(record: any, rowIndex: number): React.HTMLAttributes自定义每一行的 props

其他字段#

字段类型
classNamenumber自定义类名
styleReact.CSSProperties自定义内联样式
hasHeaderboolean表格是否具有头部
isStickyHeadboolean请使用 isStickyHeader 代替
isStickyHeaderboolean表格头部是否吸顶,默认为 true
stickyTopnumber表头吸顶后,距离顶部的距离,默认为 0
useOuterBorderboolean是否使用来自外层 div 的边框代替单元格的外边框,默认为 false
defaultColumnWidthnumber列的默认宽度
emptyCellHeightnumber数据为空时,单元格的高度
footerDataSourceany[]表格页脚数据源(数据中的字段一般要与 dataSource 相同)
isStickyFooterboolean表格页脚是否吸附在表格底部,默认为 true
hasStickyScrollboolean表格是否包含自定义的横向粘性滚动条是否出现,默认为 true
stickyScrollHeight'auto' / number指定自定义横向滚动条的高度,在定制滚动条样式时有用,默认为 'auto'
stickyBottomnumber表格底部距离页面下边缘的距离
useVirtual'auto'
boolean
或一个对象
是否开启虚拟滚动,用法详见进阶用法-虚拟滚动
flowRoot *'auto' / 'self' / HTMLElement / (() => HTMLElement)表格所处于的块格式化上下文(BFC)
v2.4 该属性已被移除
estimatedRowHeightnumber虚拟滚动开启情况下,表格中每一行的预估高度
componentsobject自定义表格内部使用的子组件,详见下方
  • flowRoot * (v2.4 该属性已被移除) 块格式化上下文 用于在开启虚拟滚动的情况下计算表格的可见范围。

自定义表格内的子组件#

字段类型
props.emptyContentReact.ReactNode请使用 components.EmptyContent 代替
components.LoadingIconReact.ComponentType自定义加载图标
components.EmptyContentReact.ComponentType自定义数据为空时表格的展示内容
components.LoadingContentWrapperReact.ComponentType自定义表格内容的 wrapper div,可用于实现自定义的加载效果
components.TableBodyReact.ComponentType自定义 tbody 元素的渲染
components.RowReact.ComponentType自定义 tr 元素的渲染
components.CellReact.ComponentType自定义 td 元素的渲染

components.* 的默认值如下,覆盖时可供参考:

function LoadingContentWrapper({ children, visible }: LoadingContentWrapperProps) {  // visible 表示表格是否处于加载状态中  // children 是表格的实际内容  return (    <div className="art-loading-content-wrapper" style={{ filter: visible ? 'blur(1px)' : 'none' }}>      {children}    </div>  )}
function TableBody({ tbodyProps }) {  // tbodyProps <tbody> 元素的 props  return <tbody {...tbodyProps} />}
function Row({ row, rowIndex, trProps }) {  // row 该行数据  // rowIndex 数据在 dataSource 中的下标  // trProps <tr> 元素的 props  return <tr {...trProps} />}
function Cell({ row, rowIndex, column, colIndex, tdProps }) {  // row 单元格的行数据  // rowIndex 单元格的行下标  // column 单元格的列配置  // colIndex 单元格的列下标  // tdProps <td> 元素的 props  return <td {...tdProps} />}

column 对象结构#

列配置注意事项:

  • name 为必传字段
  • 对于锁定的列(lock=true),宽度 width 为必传项
    • 推荐给所有的列都配置上宽度,或是给表格配置一个默认的列宽度
字段类型
namestring列的名称
codestring在数据中的字段 code
getValue(record: any, rowIndex: number) => any自定义取数方法
render(value: any, record: any, rowIndex: number) => ReactNode自定义渲染方法
getCellProps(value: any, record: any, rowIndex: number) => any自定义的获取单元格 props 的方法
getSpanRect(value: any, record: any, rowIndex: number) => SpanRect在虚拟滚动的情况下设置单元格合并
titleReactNode列标题的展示名称;在页面中进行展示时,该字段将覆盖 name 字段
widthnumber列的宽度,如果该列是锁定的,则宽度为必传项
align'left' / 'center' / 'right'单元格对齐方向
hiddenboolean是否隐藏
lockboolean是否锁列
childrenArtColumn[]该列的子节点
headerCellPropsReact.ThHTMLAttributes表头单元格的 props
features{ [key: string]: any }功能开关标记,用于对表格功能进行拓展

CSS 变量列表#

<BaseTable /> 中大部分样式都是通过 CSS variables 来定义的,你可以通过下面的方式对表格进行风格化:

<BaseTable style={{ '--color': '#333', '--cell-border': 'none' }} />

目前组件支持的自定义 CSS 变量如下:

export type BaseTableCSSVariables = Partial<{  /** 表格一行的高度,注意该属性将被作为 CSS variable,不能使用数字作为简写 */  '--row-height': string  /** 表格的字体颜色 */  '--color': string  /** 表格背景颜色 */  '--bgcolor': string  /** 鼠标悬停时的背景色 */  '--hover-bgcolor': string  /** 单元格高亮时的背景色 */  '--highlight-bgcolor': string
  /** 表头中一行的高度,注意该属性将被作为 CSS variable,不能使用数字作为简写 */  '--header-row-height': string  /** 表头中的字体颜色 */  '--header-color': string  /** 表头的背景色 */  '--header-bgcolor': string  /** 表头上鼠标悬停时的背景色 */  '--header-hover-bgcolor': string  /** 表头上单元格高亮时的背景色 */  '--header-highlight-bgcolor': string
  /** 单元格 padding */  '--cell-padding': string  /** 字体大小 */  '--font-size': string  /** 表格内字体的行高 */  '--line-height': string  /** 锁列阴影,默认为 rgba(152, 152, 152, 0.5) 0 0 6px 2px */  '--lock-shadow': string
  /** 单元格的边框颜色 */  '--border-color': string  /** 单元格边框,默认为 1px solid var(--border-color) */  '--cell-border': string  /** 单元格上下边框,默认为 var(--cell-border) */  '--cell-border-horizontal': string  /** 单元格左右边框,默认为 var(--cell-border) */  '--cell-border-vertical': string  /** 表头单元格边框,默认为 1px solid var(--border-color) */  '--header-cell-border': string  /** 表头单元格上下边框,默认为 var(--header-cell-border) */  '--header-cell-border-horizontal': string  /** 表头单元格左右边框,默认为 var(--header-cell-border) */  '--header-cell-border-vertical': string}>

当 CSS 变量无法满足自定义样式需求时,推荐通过 styled-components 来覆盖表格的默认样式。表格内各部分的 CSS 类名可以通过 Classes 对象来获取。

在更精细的场景下,可以使用 getCellProps 来定制每个单元格的样式。