1.1.4 • Published 2 years ago

taro3-table-hackx v1.1.4

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

taro3-table

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

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

npm.io

注意

只能在基于 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是否开启多列排序booleanfalse
scroll表格是否可滚动,也可以指定滚动区域的宽、高{ x?: number | string | boolean, y?: number | string | boolean }

column

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

参数描述类型必传默认值
title标题string | JSX.Element
dataIndex列数据在数据项中对应的路径string
keyReact 需要的 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,默认 100number100
sort表头是否显示排序按钮boolean
sortOrder排序的受控属性SortOrder
sorter自定义排序函数,相当于 Array.sort 的 compareFunction,需要服务端排序可设为 trueCompareFn | boolean
sortLevel多列排序优先级number0
onSort点击排序按钮钩子,常用于服务端排序(sortOrder: SortOrder) => void
fixed固定列'left' | 'right'
expandable该列是否启用点击展开收起功能,默认 truebooleantrue

TODO

  • 支持虚拟列表