基本用法

<BaseTable /> 是 ali-react-table 中最主要的表格组件，其提供了基本的表格渲染能力。BaseTable 自带了一些非常实用的特性（表头吸顶、加载动画、锁列、单元格合并、页脚等），并自带虚拟滚动以支持大数据量的渲染。

BaseTable 只提供基本的表格渲染能力，不需要依赖特定组件库，故其打包体积很小，但这也意味着一些常见的表格功能（排序、过滤、行选择、树状模式等）需要在上层进行拓展.

基本用法#

基本的 Table 包含行和列，使用 columns 属性来定义列的信息，使用传入的 dataSource 属性数据来创建行，这两个属性也是表格组件必传的 props（其他所有 props 都是可选的）。

dataSource 提供表格数据，数组中的每一项对应表格的一行
columns 指定表格中包含哪些列，column.code 与 dataSource 中的数据字段对应

以下是 BaseTable 的基本用法示例：

组件引入： import { BaseTable } from 'ali-react-table'

预览点击展开或收拢

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

湖北省	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} />
}

基本用法#

更多用法#