taro-react-table

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

• 兼容 H5、微信小程序
• 自定义样式
• 自定义排序
• 固定表头
• 滚动上拉加载

安装

npm install taro-react-table

配置

• config/index.js 配置
• 让 taro 去通过 postcss 编译处理 taro-react-table模块, 需要对 taro-react-table 里的样式单位进行转换适配

// config/index.js
const config = {
  h5: {
    esnextModules: ['taro-react-table'],
  },
}

导入组件

import Table from 'taro-react-table'
import 'taro-react-table/dist/index.css'

参数说明

Table

| 参数 | 描述 | 类型 | 必传 | 默认值 | | ----------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------- | ---- | ---------- | | 本身参数 | 参考ScrollView | | | | | dataSource | 数据源 | object[] | 是 | [] | | columns | 表格列的配置描述，具体项见下表 | Columns[] | 是 | [] | | rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string | function(record): string | 是 | key | | wrapperClass | 外层容器的类名 | string | 否 | | | wrapperStyle | 外层容器的样式 | object | 否 | | | className | ScrollView 容器类名 | string | 否 | | | style | ScrollView 容器样式 | object | 否 | | | rowClassName | 行类名 | string | 否 | | | rowStyle | 行样式 | object | 否 | | | colClassName | 单元格类名 | string | 否 | | | colStyle | 单元格样式 | object | 否 | | | titleStyle | 标题样式 | object | 否 | | | titleClassName | 标题类名 | string | 否 | | | titleClassName | 标题类名 | string | 否 | | | loading | 是否显示加载 | boolean | 否 | | | loadingText | 加载文本 | string | 否 | '' | | loadStatus | 加载状态 | loading | noMore | null | 否 | null | | unsort | 设置是否取消排序 (一般需求不需要取消排序，设置 true 可开启取消排序) | boolean | 否 | false | | showHeader | 是否显示表头 | boolean | 否 | true | | noMoreText | loadStatus 为 noMore 状态显示文案 | string | 否 | 没有更多了 | | loadLoadingText | loadStatus 为 loading 状态显示文案 | string | 否 | 加载中... | | distance | 小于视窗距离多少开始触发 onLoad | number | 否 | 30 | | showLoad | 是否显示 load 加载状态，为 false 时不触发 onLoad 事件 | boolean | 否 | true | | fixedLoad | 是否固定加载更多，不随 X 轴滚动而滚动 | boolean | 否 | true | | emptyText | 空数据显示文本 | string | ReactNode | 否 | 暂无数据 | | cellEmptyText | 单元格空数据显示文本 | string | 否 | - | | renderEmpty | 自定义渲染空数据 | ReactNode | 否 | | | size | 间距大小 | 'small' | 'middle' | 'large' | number | 否 | middle | | colWidth | 默认列宽度 | number | 否 | 120 | | striped | 是否显示斑马纹 （为 true 时和 even 效果一样） | 'odd' | 'even' | boolean | 否 | false |

Events

| 事件名 | 描述 | 类型 | 必传 | 默认值 | | ---------- | -------------------------------------------------------------------- | --------------------------------------- | ---- | ------ | | onLoad | 滚动底部触发，用于上拉加载，（注意：需要设置 height 高度，才能触发） | Function | 否 | | | onSorter | 点击表头按钮触发排序 | ({ column, field, order }: SorterEvent) | 否 | | | onRow | 行点击事件 | function(record, index) | 否 | |

Column

| 参数 | 描述 | 类型 | 必传 | 默认值 | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- | ------ | | title | 标题 | string | JSX.Element | 是 | | dataIndex | 列数据在数据项中对应的路径 | string | 是 | [] | | key | 表格行 key 的取值，可以是字符串或一个函数 | string | function(record): string | 否 | key | | align | 设置该列文本对齐方式 | string | 否 | center | | style | 标题样式 | object | 否 | | | align | 外层容器的类名 | string | 否 | | | className | 标题类名 | string | 否 | | | render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 | function(text, record, index) {} | 否 | | | width | ScrollView 容器类名 | string | 否 | | | fixed | 固定列 | left | right | 否 | | | sorter | 排序函数，本地排序使用一个函数(参考 Array.sort 的 compareFunction)，需要服务端排序可设为 true | CompareFn | 否 | | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 ascend descend false | boolean | string | | | | onCell | 单元格点击事件 | function(record, index) | 否 | |

使用

import { useState } from 'react'
import 'taro-react-table/dist/index.css'
import Table,{ Columns, LoadStatus, SorterEvent } from 'taro-react-table'

export default function Demo() {
 const [loading, setLoading] = useState(false)
 const [dataSource, setDataSource] = useState([
    {
      name1: '无人之境1',
      name2: '打回原形1',
      name3: '防不胜防1',
      name4: '十面埋伏1',
      name5: 'k歌之王1',
      name6: '岁月如歌1',
    },
    {
      name1: '无人之境2',
      name2: '打回原形2',
      name3: '防不胜防2',
      name4: '十面埋伏2',
      name5: 'k歌之王2',
      name6: '岁月如歌2',
    },
    {
      name1: '无人之境3',
      name2: '打回原形3',
      name3: '防不胜防3',
      name4: '十面埋伏3',
      name5: 'k歌之王3',
      name6: '岁月如歌3',
    },
    {
      name1: '无人之境4',
      name2: '打回原形4',
      name3: '防不胜防4',
      name4: '十面埋伏4',
      name5: 'k歌之王4',
      name6: '岁月如歌4',
    },
    {
      name1: '无人之境5',
      name2: '打回原形5',
      name3: '防不胜防5',
      name4: '十面埋伏5',
      name5: 'k歌之王5',
      name6: '岁月如歌5',
    },
    {
      name1: '无人之境6',
      name2: '打回原形6',
      name3: '防不胜防6',
      name4: '十面埋伏6',
      name5: 'k歌之王6',
      name6: '岁月如歌6',
    },
  ])
  const [loadStatus, setLoadStatus] = useState<LoadStatus>(null)
  const [sortInfo, setSortInfo] = useState<Omit<SorterEvent, 'column'>>({
    field: 'name1',
    order: 'ascend',
  })

   const columns: Columns[] = [
    {
      title: 'Song1',
      dataIndex: 'name1',
      sorter: true,
      fixed: 'left',
      width: 100,
      sortOrder: sortInfo.field == 'name1' && sortInfo.order,
    },
    {
      title: 'Song2',
      width: 100,
      dataIndex: 'name2',
    },
    {
      title: 'Song3',
      dataIndex: 'name3',
    },
    {
      title: 'Song4',
      dataIndex: 'name4',
    },
    {
      title: 'Song5',
      dataIndex: 'name5',
    },
    {
      title: 'Song6',
      dataIndex: 'name6',
    },
  ]

  const getList = async (): Promise<any[]> => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const list = [...dataSource]
        for (let i = 1; i < 10; i++) {
          const size = list.length + 1
          list.push({
            name1: `无人之境${size}`,
            name2: `打回原形${size}`,
            name3: `防不胜防${size}`,
            name4: `十面埋伏${size}`,
            name5: `k歌之王${size}`,
            name6: `岁月如歌${size}`,
          })
        }
        resolve(list)
      }, 1000)
    })
  }

  const onLoad = async e => {
    setLoadStatus('loading')
    const list = await getList()
    setDataSource(list)
    setLoadStatus(list.length > 20 ? 'noMore' : null)
  }

  // 排序回调
  const onSorter = ({ column, field, order }: SorterEvent) => {
    console.log(column, field, order)
    // 模拟排序加载效果
    setLoading(state => !state)
    setSortInfo({ order, field })
    const tempList = [...dataSource]
    setTimeout(() => {
      setLoading(false)
      tempList.reverse()
      setDataSource(tempList)
    }, 1000)
  }

  return (
    <Table
      loading={loading}
      dataSource={dataSource}
      columns={columns}
      style={{ height: '250px' }}
      onLoad={onLoad}
      loadStatus={loadStatus}
      onSorter={onSorter}
    ></Table>
  )
}

友情推荐

| 项目 | 描述 | | ------------------------------------------------------------------------- | ------------------------------------------------ | | taro-react-echarts | 基于 Taro3、React 的 H5 和微信小程序多端图表组件 |