Table 表格

展示行列数据。

规则

  • 当有大量的结构化数据需要展现时,eg:股票信息。

  • 中英文左对齐,数值以小数点对齐。

  • 一般不建议超过 4 列。

代码演示

纵向

简单表格,默认为纵向排列

  1. import { Table } from 'antd-mobile';
  2. const columns = [
  3. { title: '名字', dataIndex: 'name', key: 'name' },
  4. { title: '品种', dataIndex: 'type', key: 'type' },
  5. { title: '属性', dataIndex: 'class', key: 'class' },
  6. ];
  7. const data = [{
  8. name: '科多',
  9. type: '英短',
  10. class: '猫',
  11. key: '1',
  12. }, {
  13. name: '萨满',
  14. type: '英短',
  15. class: '猫',
  16. key: '2',
  17. }, {
  18. name: '开心',
  19. type: '约克夏',
  20. class: '犬',
  21. key: '3',
  22. }];
  23. ReactDOM.render(<div style={{ padding: 20 }}>
  24. <Table
  25. columns={columns}
  26. dataSource={data}
  27. />
  28. </div>, mountNode);

横向

简单的表格,无表头,用标题列替代表头,columns第一项为取竖向标题的索引,dataSource每项中需要指定标题的值。

  1. import { Table } from 'antd-mobile';
  2. const columns = [
  3. { title: '标题', dataIndex: 'title', key: 'title' },
  4. { title: '名字', dataIndex: 'name', key: 'name' },
  5. { title: '品种', dataIndex: 'type', key: 'type' },
  6. { title: '属性', dataIndex: 'class', key: 'class' },
  7. ];
  8. const data = [{
  9. title: '宠物一',
  10. name: '科多',
  11. type: '英短',
  12. class: '猫',
  13. key: '1',
  14. }, {
  15. title: '宠物二',
  16. name: '萨满',
  17. type: '英短',
  18. class: '猫',
  19. key: '2',
  20. }, {
  21. title: '宠物三',
  22. name: '开心',
  23. type: '约克夏',
  24. class: '犬',
  25. key: '3',
  26. }];
  27. ReactDOM.render(<div style={{ padding: 20 }}>
  28. <Table
  29. direction="horizon"
  30. columns={columns}
  31. dataSource={data}
  32. />
  33. </div>, mountNode);

混合

有表头和标题列混合使用

  1. import { Table } from 'antd-mobile';
  2. const columns = [
  3. { title: '', dataIndex: 'title', key: 'title' },
  4. { title: '名字', dataIndex: 'name', key: 'name' },
  5. { title: '品种', dataIndex: 'type', key: 'type' },
  6. { title: '属性', dataIndex: 'class', key: 'class' },
  7. ];
  8. const data = [{
  9. title: '宠物一',
  10. name: '科多',
  11. type: '英短',
  12. class: '猫',
  13. key: '1',
  14. }, {
  15. title: '宠物二',
  16. name: '萨满',
  17. type: '英短',
  18. class: '猫',
  19. key: '2',
  20. }, {
  21. title: '宠物三',
  22. name: '开心',
  23. type: '约克夏',
  24. class: '犬',
  25. key: '3',
  26. }];
  27. ReactDOM.render(<div style={{ padding: 20 }}>
  28. <Table
  29. direction="mix"
  30. columns={columns}
  31. dataSource={data}
  32. />
  33. </div>, mountNode);

横向滚动

横向滚动的表格,无锁定项

  1. import { Table } from 'antd-mobile';
  2. const columns = [
  3. { title: '姓名', dataIndex: 'a', key: 'a', width: 100 },
  4. { title: '年龄', dataIndex: 'b', key: 'b', width: 100 },
  5. { title: '身高', dataIndex: 'c', key: 'c', width: 100 },
  6. { title: '体重', dataIndex: 'b', key: 'd', width: 100 },
  7. { title: '爱好', dataIndex: 'b', key: 'e', width: 100 },
  8. { title: '生日', dataIndex: 'b', key: 'f', width: 100 },
  9. { title: '住址', dataIndex: 'b', key: 'g', width: 100 },
  10. { title: '电话', dataIndex: 'b', key: 'h', width: 100 },
  11. { title: '邮编', dataIndex: 'b', key: 'i', width: 100 },
  12. { title: '其他', dataIndex: 'b', key: 'j', width: 100 },
  13. ];
  14. const data = [
  15. { a: '二哈', b: '32', d: 3, key: '1' },
  16. { a: '小明', b: '98', d: 3, key: '2' },
  17. { a: '猪头', c: '16', d: 2, key: '3' },
  18. { a: '小二', c: '33', d: 2, key: '4' },
  19. ];
  20. ReactDOM.render(<div style={{ padding: 20 }}>
  21. <Table
  22. scrollX
  23. columns={columns}
  24. dataSource={data}
  25. />
  26. </div>, mountNode);

锁定标题列

标题列锁定,可横向滚动

  1. import { Table } from 'antd-mobile';
  2. const columns = [
  3. { title: '标题', dataIndex: 'title', key: 'title', width: 100, fixed: 'left' },
  4. { title: '姓名', dataIndex: 'a', key: 'a', width: 100 },
  5. { title: '年龄', dataIndex: 'b', key: 'b', width: 100 },
  6. { title: '身高', dataIndex: 'c', key: 'c', width: 100 },
  7. { title: '体重', dataIndex: 'b', key: 'd', width: 100 },
  8. { title: '爱好', dataIndex: 'b', key: 'e', width: 100 },
  9. { title: '生日', dataIndex: 'b', key: 'f', width: 100 },
  10. { title: '住址', dataIndex: 'b', key: 'g', width: 100 },
  11. { title: '电话', dataIndex: 'b', key: 'h', width: 100 },
  12. { title: '邮编', dataIndex: 'b', key: 'i', width: 100 },
  13. { title: '其他', dataIndex: 'b', key: 'j', width: 100 },
  14. ];
  15. const data = [
  16. { title: '人物1', a: '二哈', b: '32', d: 3, key: '1' },
  17. { title: '人物2', a: '小明', b: '98', d: 3, key: '2' },
  18. { title: '人物3', a: '猪头', c: '16', d: 2, key: '3' },
  19. { title: '人物4', a: '小二', c: '33', d: 2, key: '4' },
  20. ];
  21. ReactDOM.render(<div style={{ padding: 20 }}>
  22. <Table
  23. titleFixed
  24. columns={columns}
  25. dataSource={data}
  26. />
  27. </div>, mountNode);

Table表格 - 图1

API

参数说明类型默认值
columns表格列的配置描述,具体项见下表Array-
dataSource数据数组Array-
direction排列方式 horizon/vetical/mixStringhorizon
scrollX是否横向滚动Booleanfalse
titleFixed横向滚动时,标题列是否固定Booleanfalse

columns

参数说明类型默认值
title列头显示文字String or React.Element
keyReact 需要的 key,建议设置String
dataIndex列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法String
render生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引Function(text, record, index) {}