Anshiii/react-native-tree-table

📣📣📣在 FlatList 基础上封装的表格组件，支持树形数据的渲染。

react-native-tree-table

在 FlatList 基础上封装的表格组件，支持树形数据的渲染。

Install

npm install react-native-tree-table --save

Usage

使用树形结构的数据

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: '所属团体'
  }
];

<Table dataSource={data} columns={columns} />

option

参数名	说明	类型
dataSource	渲染表格的数据	Array
columns	表格列的配置项(类似antd的columns)	Array

column 的 配置 说明

配置名	说明	类型
propName	属性的键	String
title	对应的键的表头描述	String
style	列的样式	Style
valTransform	对应的值的转换	Funciton(item,index)

Todo

• 默认样式的调整
• 添加树形列表展开按钮的自定义