{"id":21421378,"url":"https://github.com/anshiii/react-native-tree-table","last_synced_at":"2025-07-14T07:32:42.388Z","repository":{"id":57341004,"uuid":"132418085","full_name":"Anshiii/react-native-tree-table","owner":"Anshiii","description":"📣📣📣在 FlatList 基础上封装的表格组件，支持树形数据的渲染。","archived":false,"fork":false,"pushed_at":"2023-02-28T00:31:27.000Z","size":653,"stargazers_count":7,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T12:58:39.940Z","etag":null,"topics":["flatlist","react-native","table","tree-structure"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Anshiii.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-05-07T06:40:48.000Z","updated_at":"2024-10-19T18:25:52.000Z","dependencies_parsed_at":"2024-11-22T22:02:31.733Z","dependency_job_id":null,"html_url":"https://github.com/Anshiii/react-native-tree-table","commit_stats":{"total_commits":9,"total_committers":2,"mean_commits":4.5,"dds":"0.11111111111111116","last_synced_commit":"59f3b1c74a844083f7830288e8c52b8dac1e56de"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Anshiii/react-native-tree-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshiii%2Freact-native-tree-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshiii%2Freact-native-tree-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshiii%2Freact-native-tree-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshiii%2Freact-native-tree-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Anshiii","download_url":"https://codeload.github.com/Anshiii/react-native-tree-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Anshiii%2Freact-native-tree-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265255275,"owners_count":23735223,"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":["flatlist","react-native","table","tree-structure"],"created_at":"2024-11-22T20:33:47.118Z","updated_at":"2025-07-14T07:32:42.017Z","avatar_url":"https://github.com/Anshiii.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-tree-table\n\n在 FlatList 基础上封装的表格组件，支持树形数据的渲染。\n\n## Install\n\n```bash\nnpm install react-native-tree-table --save\n```\n\n\n## Usage\n\n使用树形结构的数据\n\n```jsx\nimport Table from 'react-native-tree-table ';\nconst data2 = [\n  {\n    name: 'Akira',\n    age: 13,\n    birth: '1995年4月29日',\n    position: '舞蹈',\n    group: 'SNH48 Team NII',\n    id: '1',\n    children: [\n      {\n        name: 'Akira2',\n        birth: '1996年5月11日',\n        age: 23,\n        position: '舞蹈',\n        group: 'SNH48 Team SII',\n        id: '90'\n      },\n      {\n        name: 'Akira3',\n        birth: '1996年5月11日',\n        age: 23,\n        position: '舞蹈',\n        group: 'SNH48 Team SII',\n        id: '51'\n      }\n    ]\n  },\n  {\n    name: 'Tako',\n    birth: '1996年5月11日',\n    age: 23,\n    position: '舞蹈',\n    group: 'SNH48 Team SII',\n    id: '2'\n  },\n  {\n    name: 'Bee',\n    age: 33,\n    birth: '1992年4月11日',\n    position: 'Vocal',\n    group: 'SNH48 Team SII',\n    id: '3',\n    children: [\n      {\n        name: 'Bee2',\n        age: 1,\n        birth: '1995年8月27日',\n        position: '舞蹈,Rapper',\n        group: 'SNH48 Team SII',\n        id: '23'\n      }\n    ]\n  },\n  {\n    name: 'Kiki',\n    age: 1,\n    birth: '1995年8月27日',\n    position: '舞蹈,Rapper',\n    group: 'SNH48 Team SII',\n    id: '4'\n  }\n];\n\nconst columns2 = [\n  {\n    propName: 'name',\n    title: '名称',\n    style: { width: 120 }\n  },\n  {\n    propName: 'age',\n    title: '年龄',\n    style: { width: 70 }\n  },\n  {\n    propName: 'birth',\n    title: '出生地',\n    style: { width: 150 }\n  },\n  {\n    propName: 'position',\n    title: '队内担当'\n  },\n  {\n    propName: 'group',\n    title: '所属团体'\n  }\n];\n\n\u003cTable dataSource={data} columns={columns} /\u003e\n```\n\n![表格截图.gif](https://upload-images.jianshu.io/upload_images/3748553-4c23efdfd039efd2.gif?imageMogr2/auto-orient/strip)\n\n\n## option\n|    参数名    | 说明 | 类型 |\n| ---------- | --- | --- |\n| dataSource |  渲染表格的数据 | Array |\n| columns       |  表格列的配置项(类似antd的columns) | Array|\n\n\n#### column 的 配置 说明\n\n|    配置名    | 说明 | 类型 |\n| ---------- | --- | --- |\n| propName |  属性的键 | String |\n| title    |  对应的键的表头描述 | String|\n| style    |  列的样式 | Style |\n| valTransform    |  对应的值的转换 | Funciton(item,index) |\n\n## Todo\n* [ ] 默认样式的调整\n* [ ] 添加树形列表展开按钮的自定义\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshiii%2Freact-native-tree-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanshiii%2Freact-native-tree-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshiii%2Freact-native-tree-table/lists"}