taro-flex-table

TaroFlex Table

一个灵活的多端表格组件，基于Taro.js，支持微信、支付宝、百度、字节跳动、QQ、京东小程序以及H5环境。

特性

• 🌟 多端适配 - 同一套代码，多端运行
• 📊 功能丰富 - 支持固定表头、固定列、分页等功能
• 🚀 高性能 - 针对小程序和H5环境优化，流畅渲染
• 🎨 可定制化 - 丰富的样式自定义能力
• 💡 TypeScript - 完整的类型定义

安装

# 使用 npm
npm install taro-flex-table --save

# 使用 yarn
yarn add taro-flex-table

# 使用 pnpm
pnpm add taro-flex-table

基本用法

import React from 'react';
import { View } from '@tarojs/components';
import { Table, TableColumn } from 'taro-flex-table';

interface User {
  id: string;
  name: string;
  age: number;
}

const BasicTable: React.FC = () => {
  // 数据源
  const dataSource: User[] = [
    { id: '1', name: '张三', age: 28 },
    { id: '2', name: '李四', age: 32 },
    { id: '3', name: '王五', age: 24 }
  ];

  // 列定义
  const columns: TableColumn<User>[] = [
    {
      key: 'name',
      title: '姓名',
      dataIndex: 'name',
      width: 100
    },
    {
      key: 'age',
      title: '年龄',
      dataIndex: 'age',
      width: 80
    }
  ];

  return (
    <View>
      <Table<User>
        columns={columns}
        dataSource={dataSource}
        rowKey="id"
        // 启用自动多端适配，组件会根据当前运行平台选择最佳配置
        adapter={true}
      />
    </View>
  );
};

export default BasicTable;

多端支持情况

TaroFlex Table 组件已全面支持以下平台：

平台	支持情况	优化重点	特有功能
微信小程序	✅ 完全支持	滚动性能	增强滚动、手势操作
支付宝小程序	✅ 完全支持	渲染效率	手势导航
百度小程序	✅ 完全支持	基础功能	-
字节跳动小程序	✅ 完全支持	基础功能	-
QQ小程序	✅ 完全支持	基础功能	-
京东小程序	✅ 完全支持	基础功能	-
H5	✅ 完全支持	交互丰富度	键盘导航、快速跳转、富样式
鸿蒙应用	⚠️ 基础支持	基础渲染	-

自动多端适配

组件提供了自动多端适配能力，只需要设置 adapter 属性：

<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  // 启用自动多端适配
  adapter={true}
/>

启用后，组件会根据当前运行平台自动优化以下方面：

• 行高与字体大小：在小程序中使用更大的行高和字体，提升触控友好度
• 滚动性能：在微信小程序中自动启用增强滚动
• 分页配置：根据平台特性设置合适的每页条数
• 手势操作：根据平台支持情况启用不同的手势
• 样式渲染：自动应用平台特定样式类名

平台特定配置

如果需要更细粒度控制，可以手动设置平台特定配置：

// 微信小程序特有配置
<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  // 增强滚动（仅微信小程序生效）
  enhanced={true}
  // 显式设置行高
  rowHeight={88}
/>

// H5特有配置
<Table
  columns={columns}
  dataSource={dataSource}
  rowKey="id"
  // H5自定义样式
  className="desktop-table"
  pagination={{
    current: 1,
    pageSize: 20,
    total: 100,
    // 快速跳转（仅H5支持）
    showQuickJumper: true
  }}
/>

使用平台检测API

组件导出了一系列平台检测工具，方便在应用中进行条件渲染：

import React from 'react';
import { View } from '@tarojs/components';
import { Table, isWeapp, isH5, getPlatformType } from 'taro-flex-table';

const TablePage = () => {
  // 获取当前平台类型
  const platform = getPlatformType();
  
  return (
    <View>
      {isWeapp() && <View>当前在微信小程序中运行</View>}
      
      <Table
        // ...表格配置
        // 根据平台设置行高
        rowHeight={isH5() ? 48 : 88}
      />
      
      {/* 平台特定额外功能 */}
      {platform === 'h5' && <View>桌面端专属功能</View>}
    </View>
  );
};

API

Table 表格

属性	说明	类型	默认值	平台差异
columns	表格列定义	TableColumn<T>[]	-	-
dataSource	表格数据源	T[]	-	-
rowKey	行数据唯一标识字段名	string	-	-
bordered	是否显示边框	boolean	false	-
loading	表格加载状态	boolean	false	-
showHeader	是否显示表头	boolean	true	-
rowHeight	表格行高，单位px	number	-	小程序默认88px，H5默认48px
height	表格高度，设置后将启用固定表头，单位px	number	-	-
width	表格宽度，设置后将启用水平滚动，单位px	number	-	-
striped	是否使用斑马纹	boolean	false	-
pagination	分页配置	TablePaginationConfig	-	-
rowSelection	行选择配置	TableRowSelection<T>	-	小程序端选中效果略有差异
onRowClick	行点击事件回调函数	(record: T, index: number) => void	-	-
emptyText	空数据提示文案	string	'暂无数据'	-
rowClassName	自定义行类名函数	(record: T, index: number) => string	-	-
className	表格容器自定义类名	string	-	-
style	表格容器自定义样式	React.CSSProperties	-	H5支持更多样式属性
adapter	启用多端适配	boolean | TableAdapterOptions	true	-
enhanced	启用增强滚动	boolean	微信小程序默认true，其他平台false	仅微信小程序支持
enableLongPress	启用长按操作	boolean	微信小程序和H5默认true，其他平台false	仅微信小程序和H5支持

TableColumn 列定义

属性	说明	类型	默认值	平台差异
key	列唯一标识	string	-	-
title	列标题	string	-	-
dataIndex	数据字段名	string	-	-
width	列宽度，单位px	number	-	-
fixed	列固定方向	'left' | 'right'	-	小程序性能可能略低
align	对齐方式	'left' | 'center' | 'right'	'left'	-
render	自定义渲染函数	(value: any, record: T, index: number) => ReactNode	-	-
type	列类型，目前支持选择列	'selection'	-	-
hidden	是否隐藏列	boolean	false	-

TablePaginationConfig 分页配置

属性	说明	类型	默认值	平台差异
current	当前页码	number	1	-
pageSize	每页条数	number	10	根据平台自动调整：H5-20条，微信-15条，其他小程序-10条
total	总数据量	number	-	-
showQuickJumper	是否显示快速跳转	boolean	false	仅H5支持
showSizeChanger	是否显示页码选择器	boolean	false	-
pageSizeOptions	可选的每页条数选项	string[]	['10', '20', '50', '100']	-
onChange	页码或每页条数变化回调	(page: number, pageSize: number) => void	-	-

TableAdapterOptions 多端适配配置

属性	说明	类型	默认值
enhanced	是否启用增强滚动	boolean	根据平台决定
virtualScroll	是否启用虚拟滚动	boolean	根据平台决定
platformClassName	自定义平台特定类名	string	-

示例

查看示例代码获取更多使用示例。

贡献指南

欢迎提交问题和贡献代码，一起完善这个多端表格组件！

• Fork 仓库
• 创建特性分支 (git checkout -b feature/amazing-feature)
• 提交更改 (git commit -m 'Add some amazing feature')
• 推送到分支 (git push origin feature/amazing-feature)
• 创建 Pull Request

许可证

MIT