表格示例

组件引入方式：

import { BaseTable } from 'ali-react-table'

基本用法

通过 dataSource 设置表格的数据源，通过 columns 设置表格的列。 注意 column.code 要与 dataSource 中的数据字段相对应。

预览点击展开或收拢

省份	确诊	治愈	死亡	最后更新时间

湖北省	54406	4793	1457	2020-02-15 19:52:02
广东省	1294	409	2	2020-02-15 19:52:02
河南省	1212	390	13	2020-02-15 19:52:02
浙江省	1162	428	0	2020-02-15 19:52:02
湖南省	1001	417	2	2020-02-15 19:52:02

源码点击展开或收拢

function 基本用法() { const dataSource = [ { prov: '湖北省', confirmed: 54406, cured: 4793, dead: 1457, t: '2020-02-15 19:52:02' }, { prov: '广东省', confirmed: 1294, cured: 409, dead: 2, t: '2020-02-15 19:52:02' }, { prov: '河南省', confirmed: 1212, cured: 390, dead: 13, t: '2020-02-15 19:52:02' }, { prov: '浙江省', confirmed: 1162, cured: 428, dead: 0, t: '2020-02-15 19:52:02' }, { prov: '湖南省', confirmed: 1001, cured: 417, dead: 2, t: '2020-02-15 19:52:02' }, ] const columns = [ { code: 'prov', name: '省份', width: 150 }, { code: 'confirmed', name: '确诊', width: 100, align: 'right' }, { code: 'cured', name: '治愈', width: 100, align: 'right' }, { code: 'dead', name: '死亡', width: 100, align: 'right' }, { code: 't', name: '最后更新时间', width: 180 }, ] return <BaseTable dataSource={dataSource} columns={columns} /> }

function 基本用法() {
  const dataSource = [
    { prov: '湖北省', confirmed: 54406, cured: 4793, dead: 1457, t: '2020-02-15 19:52:02' },
    { prov: '广东省', confirmed: 1294, cured: 409, dead: 2, t: '2020-02-15 19:52:02' },
    { prov: '河南省', confirmed: 1212, cured: 390, dead: 13, t: '2020-02-15 19:52:02' },
    { prov: '浙江省', confirmed: 1162, cured: 428, dead: 0, t: '2020-02-15 19:52:02' },
    { prov: '湖南省', confirmed: 1001, cured: 417, dead: 2, t: '2020-02-15 19:52:02' },
  ]

  const columns = [
    { code: 'prov', name: '省份', width: 150 },
    { code: 'confirmed', name: '确诊', width: 100, align: 'right' },
    { code: 'cured', name: '治愈', width: 100, align: 'right' },
    { code: 'dead', name: '死亡', width: 100, align: 'right' },
    { code: 't', name: '最后更新时间', width: 180 },
  ]

  return <BaseTable dataSource={dataSource} columns={columns} />
}

数据为空状态

dataSource 的长度为 0 时，表格将展现空状态。上层可以通过 components.EmptyContent 对空状态进行定制。

预览点击展开或收拢

公司名称	部门名称	团建目的地	当地导游

没有符合查询条件的数据 请修改条件后重新查询

源码点击展开或收拢

function 数据为空() { return ( <BaseTable dataSource={[]} columns={assets.biz.columns2} // components={{ EmptyContent: () => <h1>数据为空~~</h1> }} /> ) }

function 数据为空() {
  return (
    <BaseTable
      dataSource={[]}
      columns={assets.biz.columns2}
      // components={{ EmptyContent: () => <h1>数据为空~~</h1> }}
    />
  )
}

数据加载状态

设置 isLoading=true 即可展示加载动画。

上层可以通过 components.LoadingContentWrapper 与 components.LoadingIcon 来定制加载动画。

预览点击展开或收拢

公司名称	部门名称	团建目的地	当地导游

蚂蚁金服	消费者事业部-淘宝-UED	South Maddison	Don Moreno
阿里巴巴(中国)有限公司	航旅事业部-酒店业务	Emilhaven	Douglas Richards
菜鸟网络	消费者事业部-淘宝-UED	云南大理	Douglas Lee
蚂蚁金服	信息平台部-用户体验部	杭州千岛湖	Eric Castillo
阿里巴巴(中国)有限公司	消费者事业部-淘宝-UED	East Karl	Herbert Patton

源码点击展开或收拢

function 表格数据加载() { return <BaseTable isLoading dataSource={assets.biz.dataSource2} columns={assets.biz.columns2} /> }

function 表格数据加载() {
  return <BaseTable isLoading dataSource={assets.biz.dataSource2} columns={assets.biz.columns2} />
}

左侧锁列

设置 column.lock=true 即可锁列，锁列的方向与嵌套关系详见 该文档

预览点击展开或收拢

省份	确诊	疑似	治愈	死亡	最后更新时间

源码点击展开或收拢

function 左侧锁列() { const { dataSource, isLoading } = assets.ncov19.useProvinceDataSource() const { time, amount } = assets.format return ( <BaseTable style={{ width: 500, height: 300, overflow: 'auto' }} useOuterBorder isLoading={isLoading} dataSource={dataSource} columns={[ { lock: true, code: 'provinceName', name: '省份', width: 150 }, { code: 'confirmedCount', name: '确诊', width: 100, render: amount, align: 'right' }, { code: 'suspectedCount', name: '疑似', width: 100, render: amount, align: 'right' }, { code: 'curedCount', name: '治愈', width: 100, render: amount, align: 'right' }, { code: 'deadCount', name: '死亡', width: 100, render: amount, align: 'right' }, { code: 'updateTime', name: '最后更新时间', width: 180, render: time }, ]} /> ) }

function 左侧锁列() {
  const { dataSource, isLoading } = assets.ncov19.useProvinceDataSource()
  const { time, amount } = assets.format

  return (
    <BaseTable
      style={{ width: 500, height: 300, overflow: 'auto' }}
      useOuterBorder
      isLoading={isLoading}
      dataSource={dataSource}
      columns={[
        { lock: true, code: 'provinceName', name: '省份', width: 150 },
        { code: 'confirmedCount', name: '确诊', width: 100, render: amount, align: 'right' },
        { code: 'suspectedCount', name: '疑似', width: 100, render: amount, align: 'right' },
        { code: 'curedCount', name: '治愈', width: 100, render: amount, align: 'right' },
        { code: 'deadCount', name: '死亡', width: 100, render: amount, align: 'right' },
        { code: 'updateTime', name: '最后更新时间', width: 180, render: time },
      ]}
    />
  )
}

表头吸顶

默认情况下表格已经开启了表头吸顶功能。设置 isStickyHead=false 可以关闭吸顶。

预览点击展开或收拢

表格操作栏，这里适合放置一些功能按钮

省份	确诊	治愈	死亡	最后更新时间

源码点击展开或收拢

function 表头吸顶() { const { dataSource, isLoading } = assets.ncov19.useProvinceDataSource() return ( <div> <div style={{ position: 'sticky', top: 0, height: 48, border: '1px solid #ccc', zIndex: 30, background: 'var(--ifm-background-surface-color)', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <div>表格操作栏，这里适合放置一些功能按钮</div> </div> <BaseTable isStickyHead // isStickyHead 的默认值为 true；设置为 false 可以关闭表头吸顶 stickyTop={48} isLoading={isLoading} dataSource={dataSource.slice(0, 6)} columns={assets.ncov19.testProvColumns} /> </div> ) }

function 表头吸顶() {
  const { dataSource, isLoading } = assets.ncov19.useProvinceDataSource()

  return (
    <div>
      <div
        style={{
          position: 'sticky',
          top: 0,
          height: 48,
          border: '1px solid #ccc',
          zIndex: 30,
          background: 'var(--ifm-background-surface-color)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <div>表格操作栏，这里适合放置一些功能按钮</div>
      </div>
      <BaseTable
        isStickyHead // isStickyHead 的默认值为 true；设置为 false 可以关闭表头吸顶
        stickyTop={48}
        isLoading={isLoading}
        dataSource={dataSource.slice(0, 6)}
        columns={assets.ncov19.testProvColumns}
      />
    </div>
  )
}

表头分组

在 columns.children=[...] 中添加子节点，<BaseTable /> 会绘制相应的嵌套表头结构。

预览点击展开或收拢

基本信息		指标分组
省份	最后更新时间	指标分组1		指标分组2
		确诊	疑似	治愈	死亡

源码点击展开或收拢

function 表头分组() { const { useProvinceDataSource, cols } = assets.ncov19 const { dataSource, isLoading } = useProvinceDataSource() return ( <BaseTable isLoading={isLoading} dataSource={dataSource.slice(0, 6)} columns={[ { name: '基本信息', lock: true, children: [cols.provinceName, cols.updateTime], }, { name: '指标分组', children: [ { name: '指标分组1', children: [cols.confirmedCount, cols.suspectedCount] }, { name: '指标分组2', children: [cols.curedCount, cols.deadCount] }, ], }, ]} /> ) }

function 表头分组() {
  const { useProvinceDataSource, cols } = assets.ncov19
  const { dataSource, isLoading } = useProvinceDataSource()

  return (
    <BaseTable
      isLoading={isLoading}
      dataSource={dataSource.slice(0, 6)}
      columns={[
        {
          name: '基本信息',
          lock: true,
          children: [cols.provinceName, cols.updateTime],
        },
        {
          name: '指标分组',
          children: [
            { name: '指标分组1', children: [cols.confirmedCount, cols.suspectedCount] },
            { name: '指标分组2', children: [cols.curedCount, cols.deadCount] },
          ],
        },
      ]}
    />
  )
}

单元格合并与自定义单元格样式

通过 column.getCellProps(...) 返回 colSpan/rowSpan 可实现单元格合并。

除了 colSpan, rowSpan 之外，getCellProps 也可以返回 td 元素的其他 props，例如 className, style, onClick 等。

预览点击展开或收拢

省份	确诊	治愈	最后更新时间

湖北省	54406	4793	2020-02-15 19:52:02
广东省	1294	409	2020-02-15 19:52:02
河南省	1212	390
浙江省		428
		417	2020-02-15 19:52:02

源码点击展开或收拢

function 单元格合并() { const dataSource = [ { prov: '湖北省', confirmed: 54406, cured: 4793, t: '2020-02-15 19:52:02' }, { prov: '广东省', confirmed: 1294, cured: 409, t: '2020-02-15 19:52:02' }, { prov: '河南省', confirmed: 1212, cured: 390, t: '2020-02-15 19:52:02' }, { prov: '浙江省', confirmed: 1162, cured: 428, t: '2020-02-15 19:52:02' }, { prov: '湖南省', confirmed: 1001, cured: 417, t: '2020-02-15 19:52:02' }, ] const columns = [ { code: 'prov', name: '省份', getCellProps(value, record, rowIndex) { if (rowIndex === 3) { return { colSpan: 2, rowSpan: 2, style: { background: '#141414', color: '#ccc', fontWeight: 'bold' }, } } }, }, { code: 'confirmed', name: '确诊', align: 'right' }, { code: 'cured', name: '治愈', align: 'right' }, { code: 't', name: '最后更新时间', getCellProps(value, record, rowIndex) { if (rowIndex === 1) { return { rowSpan: 3 } } }, }, ] return <BaseTable defaultColumnWidth={100} dataSource={dataSource} columns={columns} /> }

function 单元格合并() {
  const dataSource = [
    { prov: '湖北省', confirmed: 54406, cured: 4793, t: '2020-02-15 19:52:02' },
    { prov: '广东省', confirmed: 1294, cured: 409, t: '2020-02-15 19:52:02' },
    { prov: '河南省', confirmed: 1212, cured: 390, t: '2020-02-15 19:52:02' },
    { prov: '浙江省', confirmed: 1162, cured: 428, t: '2020-02-15 19:52:02' },
    { prov: '湖南省', confirmed: 1001, cured: 417, t: '2020-02-15 19:52:02' },
  ]

  const columns = [
    {
      code: 'prov',
      name: '省份',
      getCellProps(value, record, rowIndex) {
        if (rowIndex === 3) {
          return {
            colSpan: 2,
            rowSpan: 2,
            style: { background: '#141414', color: '#ccc', fontWeight: 'bold' },
          }
        }
      },
    },
    { code: 'confirmed', name: '确诊', align: 'right' },
    { code: 'cured', name: '治愈', align: 'right' },
    {
      code: 't',
      name: '最后更新时间',
      getCellProps(value, record, rowIndex) {
        if (rowIndex === 1) {
          return { rowSpan: 3 }
        }
      },
    },
  ]
  return <BaseTable defaultColumnWidth={100} dataSource={dataSource} columns={columns} />
}

自定义表格行样式

通过 getRowProps(...) 设置 tr 元素上的 props，例如 className, style, onClick 等。

预览点击展开或收拢

点击表格行以改变该行样式

省份	确诊	治愈	死亡	最后更新时间

源码点击展开或收拢

function 自定义表格行props() { const { useProvinceDataSource, testProvColumns } = assets.ncov19 const { isLoading, dataSource } = useProvinceDataSource() const [lastClickRowIndex, setLastClickRowIndex] = useState(2) return ( <div> <p>点击表格行以改变该行样式</p> <BaseTable style={{ '--bgcolor': 'transparent' }} isLoading={isLoading} dataSource={dataSource.slice(0, 6)} columns={testProvColumns} getRowProps={(record, rowIndex) => { return { style: rowIndex === lastClickRowIndex ? { outlineOffset: -2, outline: '2px solid gold', '--hover-bgcolor': 'transparent', background: 'linear-gradient(140deg, #ff000038, #009cff3d)', } : { // 覆盖 website 中自带的 style，实际使用时可以忽略 backgroundColor: 'transparent', }, onClick() { setLastClickRowIndex(rowIndex) }, } }} /> </div> ) }

function 自定义表格行props() {
  const { useProvinceDataSource, testProvColumns } = assets.ncov19
  const { isLoading, dataSource } = useProvinceDataSource()

  const [lastClickRowIndex, setLastClickRowIndex] = useState(2)

  return (
    <div>
      <p>点击表格行以改变该行样式</p>
      <BaseTable
        style={{ '--bgcolor': 'transparent' }}
        isLoading={isLoading}
        dataSource={dataSource.slice(0, 6)}
        columns={testProvColumns}
        getRowProps={(record, rowIndex) => {
          return {
            style:
              rowIndex === lastClickRowIndex
                ? {
                    outlineOffset: -2,
                    outline: '2px solid gold',
                    '--hover-bgcolor': 'transparent',
                    background: 'linear-gradient(140deg, #ff000038, #009cff3d)',
                  }
                : {
                    // 覆盖 website 中自带的 style，实际使用时可以忽略
                    backgroundColor: 'transparent',
                  },
            onClick() {
              setLastClickRowIndex(rowIndex)
            },
          }
        }}
      />
    </div>
  )
}

限定表格容器大小

通过 style.width/style.maxWidth 来限定表格的宽度；通过 style.height/style.maxHeight 来限定高度。限定宽度或高度时，要同时设置 style.overflow=auto。

预览点击展开或收拢

序号	公司名称	金额	金融机构	申请人	金额	金融机构	申请人	金额	金融机构	申请人	金额	金融机构	申请人	金额	金融机构	申请人	操作

1

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

编辑 删除 更多

2

阿里巴巴网络技术有限公司

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

编辑 删除 更多

3

阿里巴巴网络技术有限公司

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

编辑 删除 更多

4

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

编辑 删除 更多

5

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

编辑 删除 更多

6

阿里巴巴网络技术有限公司

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

编辑 删除 更多

7

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

编辑 删除 更多

8

阿里巴巴网络技术有限公司

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

编辑 删除 更多

9

阿里巴巴网络技术有限公司

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

编辑 删除 更多

10

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

编辑 删除 更多

11

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

编辑 删除 更多

12

阿里巴巴网络技术有限公司

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

编辑 删除 更多

13

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

编辑 删除 更多

14

阿里巴巴网络技术有限公司

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

编辑 删除 更多

15

阿里巴巴网络技术有限公司

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

编辑 删除 更多

16

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

编辑 删除 更多

17

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

编辑 删除 更多

18

阿里巴巴网络技术有限公司

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

编辑 删除 更多

19

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

编辑 删除 更多

20

阿里巴巴网络技术有限公司

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

编辑 删除 更多

21

阿里巴巴网络技术有限公司

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

编辑 删除 更多

22

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

编辑 删除 更多

23

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

编辑 删除 更多

24

阿里巴巴网络技术有限公司

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

编辑 删除 更多

25

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

600,000.00(CNY)

招商银行丨杭州分行

James Collier

编辑 删除 更多

26

阿里巴巴网络技术有限公司

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

600,000.00(CNY)

建设银行丨未来科技城

Philip Burke

编辑 删除 更多

27

阿里巴巴网络技术有限公司

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

600,000.00(CNY)

交通银行丨浙大路支行

Wesley Cruz

编辑 删除 更多

28

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

600,000.00(CNY)

招商银行丨庆春路支行

Billy Horton

编辑 删除 更多

29

阿里巴巴网络技术有限公司

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

600,000.00(CNY)

招商银行丨文一路分行

Paul Tran

编辑 删除 更多

30

阿里巴巴网络技术有限公司

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

600,000.00(CNY)

农业银行丨杭州分行

Anna Poole

编辑 删除 更多

源码点击展开或收拢

function 限定表格容器大小() { const { dataSource1, operationCol } = assets.biz const repeats = [ { code: 'amount', width: 160, align: 'right', name: '金额' }, { code: 'dept', width: 160, name: '金融机构' }, { code: 'applier', width: 120, name: '申请人' }, ] function repeat(arr, n) { let result = [] for (let i = 0; i < n; i++) { result = result.concat(arr) } return result } return ( <BaseTable style={{ maxWidth: 800, height: 385, overflow: 'auto' }} dataSource={repeat(dataSource1, 5)} columns={[ { name: '序号', width: 70, align: 'right', lock: true, getValue(_, rowIndex) { return String(rowIndex + 1) }, }, { code: 'name', width: 200, name: '公司名称' }, ...repeat(repeats, 5), operationCol, ]} /> ) }

function 限定表格容器大小() {
  const { dataSource1, operationCol } = assets.biz

  const repeats = [
    { code: 'amount', width: 160, align: 'right', name: '金额' },
    { code: 'dept', width: 160, name: '金融机构' },
    { code: 'applier', width: 120, name: '申请人' },
  ]

  function repeat(arr, n) {
    let result = []
    for (let i = 0; i < n; i++) {
      result = result.concat(arr)
    }
    return result
  }

  return (
    <BaseTable
      style={{ maxWidth: 800, height: 385, overflow: 'auto' }}
      dataSource={repeat(dataSource1, 5)}
      columns={[
        {
          name: '序号',
          width: 70,
          align: 'right',
          lock: true,
          getValue(_, rowIndex) {
            return String(rowIndex + 1)
          },
        },
        { code: 'name', width: 200, name: '公司名称' },
        ...repeat(repeats, 5),
        operationCol,
      ]}
    />
  )
}

表格页脚

为表格设置 footerDataSource={[...]} 来添加页脚（总结栏）。

表格页脚默认吸附在表格底部，可通过 isStickyFooter={false} 关闭吸底。

目前表格页脚还不兼容部分表格拓展，所以尽量只在展示类表格中使用表格页脚。

预览点击展开或收拢

省份	确诊	治愈	死亡	最后更新时间

湖北省	54406	4793	1457	2020-02-15 19:52:02
广东省	1294	409	2	2020-02-15 19:52:02
河南省	1212	390	13	2020-02-15 19:52:02
浙江省	1162	428	0	2020-02-15 19:52:02
湖南省	1001	417	2	2020-02-15 19:52:02
湖北省_copy1	54406	4793	1457	2020-02-15 19:52:02
广东省_copy1	1294	409	2	2020-02-15 19:52:02
河南省_copy1	1212	390	13	2020-02-15 19:52:02
浙江省_copy1	1162	428	0	2020-02-15 19:52:02
湖南省_copy1	1001	417	2	2020-02-15 19:52:02
湖北省_copy2	54406	4793	1457	2020-02-15 19:52:02
广东省_copy2	1294	409	2	2020-02-15 19:52:02
河南省_copy2	1212	390	13	2020-02-15 19:52:02
浙江省_copy2	1162	428	0	2020-02-15 19:52:02
湖南省_copy2	1001	417	2	2020-02-15 19:52:02

全国1	60000	5000	2000	2020-02-15
全国2	-	6000	-	2020-02-16

源码点击展开或收拢

function 表格页脚() { const dataSource = [ { prov: '湖北省', confirmed: 54406, cured: 4793, dead: 1457, t: '2020-02-15 19:52:02' }, { prov: '广东省', confirmed: 1294, cured: 409, dead: 2, t: '2020-02-15 19:52:02' }, { prov: '河南省', confirmed: 1212, cured: 390, dead: 13, t: '2020-02-15 19:52:02' }, { prov: '浙江省', confirmed: 1162, cured: 428, dead: 0, t: '2020-02-15 19:52:02' }, { prov: '湖南省', confirmed: 1001, cured: 417, dead: 2, t: '2020-02-15 19:52:02' }, ] const footerDataSource = [ { prov: '全国1', confirmed: 60000, cured: 5000, dead: 2000, t: '2020-02-15' }, { prov: '全国2', confirmed: '-', cured: 6000, dead: '-', t: '2020-02-16' }, ] const columns = [ { code: 'prov', name: '省份', width: 150 }, { code: 'confirmed', name: '确诊', width: 100, align: 'right' }, { code: 'cured', name: '治愈', width: 100, align: 'right' }, { code: 'dead', name: '死亡', width: 100, align: 'right' }, { code: 't', name: '最后更新时间', width: 180 }, ] return ( <BaseTable css={` height: 380px; overflow: auto; tfoot { --bgcolor: var(--hover-bgcolor); } `} dataSource={dataSource.concat( [1, 2].flatMap((copy) => dataSource.map((row) => ({ ...row, prov: `${row.prov}_copy${copy}` }))), )} columns={columns} footerDataSource={footerDataSource} /> ) }

function 表格页脚() {
  const dataSource = [
    { prov: '湖北省', confirmed: 54406, cured: 4793, dead: 1457, t: '2020-02-15 19:52:02' },
    { prov: '广东省', confirmed: 1294, cured: 409, dead: 2, t: '2020-02-15 19:52:02' },
    { prov: '河南省', confirmed: 1212, cured: 390, dead: 13, t: '2020-02-15 19:52:02' },
    { prov: '浙江省', confirmed: 1162, cured: 428, dead: 0, t: '2020-02-15 19:52:02' },
    { prov: '湖南省', confirmed: 1001, cured: 417, dead: 2, t: '2020-02-15 19:52:02' },
  ]
  const footerDataSource = [
    { prov: '全国1', confirmed: 60000, cured: 5000, dead: 2000, t: '2020-02-15' },
    { prov: '全国2', confirmed: '-', cured: 6000, dead: '-', t: '2020-02-16' },
  ]

  const columns = [
    { code: 'prov', name: '省份', width: 150 },
    { code: 'confirmed', name: '确诊', width: 100, align: 'right' },
    { code: 'cured', name: '治愈', width: 100, align: 'right' },
    { code: 'dead', name: '死亡', width: 100, align: 'right' },
    { code: 't', name: '最后更新时间', width: 180 },
  ]

  return (
    <BaseTable
      css={`
        height: 380px;
        overflow: auto;
        tfoot {
          --bgcolor: var(--hover-bgcolor);
        }
      `}
      dataSource={dataSource.concat(
        [1, 2].flatMap((copy) => dataSource.map((row) => ({ ...row, prov: `${row.prov}_copy${copy}` }))),
      )}
      columns={columns}
      footerDataSource={footerDataSource}
    />
  )
}