taro3-table icon indicating copy to clipboard operation
taro3-table copied to clipboard

基于 Taro3 的微信小程序端多功能表格组件

taro3-table

stars forks version downloads

基于 Taro3、React 的微信小程序端多功能表格组件

  • 自定义样式
  • 单列多列排序
  • 自定义排序
  • 服务端排序
  • 固定表头、固定列

注意

只能在基于 Taro3.x 和 React 的微信小程序项目中使用。

安装

npm install taro3-table

使用

import React from 'react';
import Table from 'taro3-table';

export default () => {
  const dataSource = [
    {
      username: '小红',
      telephone: '123',
    },
    {
      username: '小明',
      telephone: '456',
    },
  ];

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
    },

    {
      title: '手机号',
      dataIndex: 'telephone',
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      // ...你的配置
    />
  );
};

示例

参数说明

参数 描述 类型 必传 默认值
columns 表格列的配置描述,详见下方 IColumns[] []
dataSource 数据源 any[] []
rowKey 表格行 key 的取值 string
className 最外层包裹节点 css 类名 string
style 最外层包裹节点内联样式 CSSProperties
colStyle 单元格统一样式 CSSProperties
colClassName 单元格统一类名 string
rowStyle 行统一样式 CSSProperties
rowClassName 行统一 css 类名 string
titleStyle 统一设置表头样式 CSSProperties
titleClassName 统一设置表头单元格 css 类名 string
loading 是否加载中 boolean
onChange 表格数据变化钩子 (dataSource: any[]) => void
multipleSort 是否开启多列排序 boolean false
scroll 表格是否可滚动,也可以指定滚动区域的宽、高 { x?: number | string | boolean, y?: number | string | boolean }

column

表格列的配置描述,是 columns 中的一项:

参数 描述 类型 必传 默认值
title 标题 string | JSX.Element
dataIndex 列数据在数据项中对应的路径 string
key React 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性 string
align 设置该列文本对齐方式 'left' | 'right' | 'center' 'center'
style 该列单元格内联样式 CSSProperties
titleStyle 该列表头内联样式 CSSProperties
className 该列单元格 css 类名 string
titleClassName 设置该列表头单元格 css 类名 string
render 渲染函数 (text?: any, record?: AnyOpt, index?: number) => JSX.Element | string
width 列宽,单位 px,默认 100 number 100
sort 表头是否显示排序按钮 boolean
sortOrder 排序的受控属性 SortOrder
sorter 自定义排序函数,相当于 Array.sort 的 compareFunction,需要服务端排序可设为 true CompareFn | boolean
sortLevel 多列排序优先级 number 0
onSort 点击排序按钮钩子,常用于服务端排序 (sortOrder: SortOrder) => void
fixed 固定列 'left' | 'right'
expandable 该列是否启用点击展开收起功能,默认 true boolean true

TODO

  • 支持虚拟列表