Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (taro-flex-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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