Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anshiii/react-native-tree-table
📣📣📣在 FlatList 基础上封装的表格组件，支持树形数据的渲染。
https://github.com/anshiii/react-native-tree-table
flatlist react-native table tree-structure
Last synced: about 1 month ago
JSON representation
📣📣📣在 FlatList 基础上封装的表格组件，支持树形数据的渲染。
- Host: GitHub
- URL: https://github.com/anshiii/react-native-tree-table
- Owner: Anshiii
- Created: 2018-05-07T06:40:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T00:31:27.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T20:52:15.282Z (about 2 months ago)
- Topics: flatlist, react-native, table, tree-structure
- Language: JavaScript
- Homepage:
- Size: 638 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-native-tree-table
在 FlatList 基础上封装的表格组件，支持树形数据的渲染。
## Install
```bash
npm install react-native-tree-table --save
```
## Usage
使用树形结构的数据
```jsx
import Table from 'react-native-tree-table ';
const data2 = [
{
name: 'Akira',
age: 13,
birth: '1995年4月29日',
position: '舞蹈',
group: 'SNH48 Team NII',
id: '1',
children: [
{
name: 'Akira2',
birth: '1996年5月11日',
age: 23,
position: '舞蹈',
group: 'SNH48 Team SII',
id: '90'
},
{
name: 'Akira3',
birth: '1996年5月11日',
age: 23,
position: '舞蹈',
group: 'SNH48 Team SII',
id: '51'
}
]
},
{
name: 'Tako',
birth: '1996年5月11日',
age: 23,
position: '舞蹈',
group: 'SNH48 Team SII',
id: '2'
},
{
name: 'Bee',
age: 33,
birth: '1992年4月11日',
position: 'Vocal',
group: 'SNH48 Team SII',
id: '3',
children: [
{
name: 'Bee2',
age: 1,
birth: '1995年8月27日',
position: '舞蹈,Rapper',
group: 'SNH48 Team SII',
id: '23'
}
]
},
{
name: 'Kiki',
age: 1,
birth: '1995年8月27日',
position: '舞蹈,Rapper',
group: 'SNH48 Team SII',
id: '4'
}
];
const columns2 = [
{
propName: 'name',
title: '名称',
style: { width: 120 }
},
{
propName: 'age',
title: '年龄',
style: { width: 70 }
},
{
propName: 'birth',
title: '出生地',
style: { width: 150 }
},
{
propName: 'position',
title: '队内担当'
},
{
propName: 'group',
title: '所属团体'
}
];
```
## option
| 参数名 | 说明 | 类型 |
| ---------- | --- | --- |
| dataSource | 渲染表格的数据 | Array |
| columns | 表格列的配置项(类似antd的columns) | Array|
#### column 的 配置 说明
| 配置名 | 说明 | 类型 |
| ---------- | --- | --- |
| propName | 属性的键 | String |
| title | 对应的键的表头描述 | String|
| style | 列的样式 | Style |
| valTransform | 对应的值的转换 | Funciton(item,index) |
## Todo
* [ ] 默认样式的调整
* [ ] 添加树形列表展开按钮的自定义