{"id":22859437,"url":"https://github.com/qiuweikangdev/taro-react-table","last_synced_at":"2025-04-09T23:14:21.162Z","repository":{"id":38032328,"uuid":"480423403","full_name":"qiuweikangdev/taro-react-table","owner":"qiuweikangdev","description":"🎉 基于Taro3、React的H5和微信小程序多端表格组件","archived":false,"fork":false,"pushed_at":"2024-02-05T14:46:17.000Z","size":4852,"stargazers_count":164,"open_issues_count":3,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T23:14:13.138Z","etag":null,"topics":["reactjs","table","taro","turborepo"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qiuweikangdev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-11T14:46:28.000Z","updated_at":"2024-12-30T07:37:45.000Z","dependencies_parsed_at":"2024-10-29T01:15:53.740Z","dependency_job_id":null,"html_url":"https://github.com/qiuweikangdev/taro-react-table","commit_stats":{"total_commits":141,"total_committers":4,"mean_commits":35.25,"dds":"0.021276595744680882","last_synced_commit":"deaa62059e544e3d7cb1d1e17904cf054e743f65"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiuweikangdev%2Ftaro-react-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiuweikangdev","download_url":"https://codeload.github.com/qiuweikangdev/taro-react-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125589,"owners_count":21051770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactjs","table","taro","turborepo"],"created_at":"2024-12-13T09:06:59.536Z","updated_at":"2025-04-09T23:14:21.142Z","avatar_url":"https://github.com/qiuweikangdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# taro-react-table\n\n基于 Taro3、React 的 H5 和微信小程序多端表格组件\n\n- 兼容 H5、微信小程序\n- 自定义样式\n- 自定义排序\n- 固定表头\n- 滚动上拉加载\n\n![](https://raw.githubusercontent.com/qiuweikangdev/taro-react-table/master/images/demo.gif)\n\n# 安装\n\n```bash\nnpm install taro-react-table\n```\n\n# 配置\n\n- config/index.js 配置\n- 让 taro 去通过 postcss 编译处理 `taro-react-table`模块, 需要对 `taro-react-table` 里的样式单位进行转换适配\n\n```js\n// config/index.js\nconst config = {\n h5: {\n esnextModules: ['taro-react-table'],\n },\n}\n```\n\n# 导入组件\n\n```js\nimport Table from 'taro-react-table'\nimport 'taro-react-table/dist/index.css'\n```\n\n# 参数说明\n\n## Table\n\n| 参数 | 描述 | 类型 | 必传 | 默认值 |\n| ----------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------- | ---- | ---------- |\n| 本身参数 | 参考[ScrollView](https://taro-docs.jd.com/taro/docs/components/viewContainer/scroll-view) | | | |\n| `dataSource` | 数据源 | object[] | 是 | `[]` |\n| `columns` | 表格列的配置描述，具体项见下表 | Columns[] | 是 | `[]` |\n| `rowKey` | 表格行 key 的取值，可以是字符串或一个函数 | string \\| function(record): string | 是 | `key` |\n| `wrapperClass` | 外层容器的类名 | string | 否 | |\n| `wrapperStyle` | 外层容器的样式 | object | 否 | |\n| `className` | ScrollView 容器类名 | string | 否 | |\n| `style` | ScrollView 容器样式 | object | 否 | |\n| `rowClassName` | 行类名 | string | 否 | |\n| `rowStyle` | 行样式 | object | 否 | |\n| `colClassName` | 单元格类名 | string | 否 | |\n| `colStyle` | 单元格样式 | object | 否 | |\n| `titleStyle` | 标题样式 | object | 否 | |\n| `titleClassName` | 标题类名 | string | 否 | |\n| `titleClassName` | 标题类名 | string | 否 | |\n| `loading` | 是否显示加载 | boolean | 否 | |\n| `loadingText` | 加载文本 | string | 否 | '' |\n| `loadStatus` | 加载状态 | loading \\| noMore \\| null | 否 | null |\n| `unsort` | 设置是否取消排序 (一般需求不需要取消排序，设置 true 可开启取消排序) | boolean | 否 | false |\n| `showHeader` | 是否显示表头 | boolean | 否 | true |\n| `noMoreText` | loadStatus 为 noMore 状态显示文案 | string | 否 | 没有更多了 |\n| `loadLoadingText` | loadStatus 为 loading 状态显示文案 | string | 否 | 加载中... |\n| `distance` | 小于视窗距离多少开始触发 onLoad | number | 否 | 30 |\n| `showLoad` | 是否显示 load 加载状态，为 false 时不触发 onLoad 事件 | boolean | 否 | true |\n| `fixedLoad` | 是否固定加载更多，不随 X 轴滚动而滚动 | boolean | 否 | true |\n| `emptyText` | 空数据显示文本 | string \\| ReactNode | 否 | 暂无数据 |\n| `cellEmptyText` | 单元格空数据显示文本 | string | 否 | - |\n| `renderEmpty` | 自定义渲染空数据 | ReactNode | 否 | |\n| `size` | 间距大小 | 'small' \\| 'middle' \\| 'large' \\| number | 否 | middle |\n| `colWidth` | 默认列宽度 | number | 否 | 120 |\n| `striped` | 是否显示斑马纹 （为 true 时和 even 效果一样） | 'odd' \\| 'even' \\| boolean | 否 | false |\n\n## Events\n\n| 事件名 | 描述 | 类型 | 必传 | 默认值 |\n| ---------- | -------------------------------------------------------------------- | --------------------------------------- | ---- | ------ |\n| `onLoad` | 滚动底部触发，用于上拉加载，（注意：需要设置 height 高度，才能触发） | Function | 否 | |\n| `onSorter` | 点击表头按钮触发排序 | ({ column, field, order }: SorterEvent) | 否 | |\n| `onRow` | 行点击事件 | function(record, index) | 否 | |\n\n## Column\n\n| 参数 | 描述 | 类型 | 必传 | 默认值 |\n| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- | ------ |\n| `title` | 标题 | string | JSX.Element | 是 |\n| `dataIndex` | 列数据在数据项中对应的路径 | string | 是 | `[]` |\n| `key` | 表格行 key 的取值，可以是字符串或一个函数 | string \\| function(record): string | 否 | `key` |\n| `align` | 设置该列文本对齐方式 | string | 否 | center |\n| `style` | 标题样式 | object | 否 | |\n| `align` | 外层容器的类名 | string | 否 | |\n| `className` | 标题类名 | string | 否 | |\n| `render` | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 | function(text, record, index) {} | 否 | |\n| `width` | ScrollView 容器类名 | string | 否 | |\n| `fixed` | 固定列 | left \\| right | 否 | |\n| `sorter` | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | CompareFn | 否 | |\n| `sortOrder` | 排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` false | boolean \\| string | | |\n| `onCell` | 单元格点击事件 | function(record, index) | 否 | |\n\n# 使用\n\n```jsx\nimport { useState } from 'react'\nimport 'taro-react-table/dist/index.css'\nimport Table,{ Columns, LoadStatus, SorterEvent } from 'taro-react-table'\n\nexport default function Demo() {\n const [loading, setLoading] = useState(false)\n const [dataSource, setDataSource] = useState([\n {\n name1: '无人之境1',\n name2: '打回原形1',\n name3: '防不胜防1',\n name4: '十面埋伏1',\n name5: 'k歌之王1',\n name6: '岁月如歌1',\n },\n {\n name1: '无人之境2',\n name2: '打回原形2',\n name3: '防不胜防2',\n name4: '十面埋伏2',\n name5: 'k歌之王2',\n name6: '岁月如歌2',\n },\n {\n name1: '无人之境3',\n name2: '打回原形3',\n name3: '防不胜防3',\n name4: '十面埋伏3',\n name5: 'k歌之王3',\n name6: '岁月如歌3',\n },\n {\n name1: '无人之境4',\n name2: '打回原形4',\n name3: '防不胜防4',\n name4: '十面埋伏4',\n name5: 'k歌之王4',\n name6: '岁月如歌4',\n },\n {\n name1: '无人之境5',\n name2: '打回原形5',\n name3: '防不胜防5',\n name4: '十面埋伏5',\n name5: 'k歌之王5',\n name6: '岁月如歌5',\n },\n {\n name1: '无人之境6',\n name2: '打回原形6',\n name3: '防不胜防6',\n name4: '十面埋伏6',\n name5: 'k歌之王6',\n name6: '岁月如歌6',\n },\n ])\n const [loadStatus, setLoadStatus] = useState\u003cLoadStatus\u003e(null)\n const [sortInfo, setSortInfo] = useState\u003cOmit\u003cSorterEvent, 'column'\u003e\u003e({\n field: 'name1',\n order: 'ascend',\n })\n\n const columns: Columns[] = [\n {\n title: 'Song1',\n dataIndex: 'name1',\n sorter: true,\n fixed: 'left',\n width: 100,\n sortOrder: sortInfo.field == 'name1' \u0026\u0026 sortInfo.order,\n },\n {\n title: 'Song2',\n width: 100,\n dataIndex: 'name2',\n },\n {\n title: 'Song3',\n dataIndex: 'name3',\n },\n {\n title: 'Song4',\n dataIndex: 'name4',\n },\n {\n title: 'Song5',\n dataIndex: 'name5',\n },\n {\n title: 'Song6',\n dataIndex: 'name6',\n },\n ]\n\n const getList = async (): Promise\u003cany[]\u003e =\u003e {\n return new Promise((resolve, reject) =\u003e {\n setTimeout(() =\u003e {\n const list = [...dataSource]\n for (let i = 1; i \u003c 10; i++) {\n const size = list.length + 1\n list.push({\n name1: `无人之境${size}`,\n name2: `打回原形${size}`,\n name3: `防不胜防${size}`,\n name4: `十面埋伏${size}`,\n name5: `k歌之王${size}`,\n name6: `岁月如歌${size}`,\n })\n }\n resolve(list)\n }, 1000)\n })\n }\n\n const onLoad = async e =\u003e {\n setLoadStatus('loading')\n const list = await getList()\n setDataSource(list)\n setLoadStatus(list.length \u003e 20 ? 'noMore' : null)\n }\n\n // 排序回调\n const onSorter = ({ column, field, order }: SorterEvent) =\u003e {\n console.log(column, field, order)\n // 模拟排序加载效果\n setLoading(state =\u003e !state)\n setSortInfo({ order, field })\n const tempList = [...dataSource]\n setTimeout(() =\u003e {\n setLoading(false)\n tempList.reverse()\n setDataSource(tempList)\n }, 1000)\n }\n\n return (\n \u003cTable\n loading={loading}\n dataSource={dataSource}\n columns={columns}\n style={{ height: '250px' }}\n onLoad={onLoad}\n loadStatus={loadStatus}\n onSorter={onSorter}\n \u003e\u003c/Table\u003e\n )\n}\n\n```\n\n# 友情推荐\n\n| 项目 | 描述 |\n| ------------------------------------------------------------------------- | ------------------------------------------------ |\n| [taro-react-echarts](https://github.com/qiuweikangdev/taro-react-echarts) | 基于 Taro3、React 的 H5 和微信小程序多端图表组件 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuweikangdev%2Ftaro-react-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiuweikangdev%2Ftaro-react-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiuweikangdev%2Ftaro-react-table/lists"}