react-native-beautiful-table

1.0.3 • Public • Published

React Native Beautiful Component

介绍

这是一个 api 类似 antd-table 的 react-native 组件库,用配置化的方式使用非常方便

功能

  • 配置化的表格,提供一定的基础样式
  • 支持内容全部自定义
  • 支持列冻结
  • 支持点击展开子内容
  • 支持支持列横向竖向滚动(包括列冻结时的滚动一致性)
  • 样式调整

它借用了 react-native-table-component 组件的能力,并进行了深度优化和改进 如果您对项目感兴趣,请通过电子邮件联系ichenzhangdong@foxmail.com.



为react-native设计的表格组件.

Switch to English document

安装

npm install react-native-beautiful-component

USE:

import BeautifulTable from 'react-native-beautiful-component';

版本日志

  • [v1.0.0]
    • 组件初始化;



Examples

例一 一般使用

import React from 'react';
import { View } from 'react-native';
import BeautifulTable from 'react-native-beautiful-component';

const demoPage = () => {

  const columns = [
    {
      title: '序号',
      dataKey: 'id',
      width: 50,
    },
    {
      title: '品牌',
      dataKey: 'brand',
      flex: 1
    },
    {
      title: '手机名',
      dataKey: 'name',
      flex: 1
    },
    {
      title: '模型',
      dataKey: 'model',
      align: 'right',
      flex: 1
    }
  ]

  const data = [
    {
      brand: '小米',
      name: '小米11',
      id: '1',
      model: '128+8'
    },
    { brand: '小米', name: '小米12', id: '2', model: '256+8' },
    { brand: 'redMi', name: 'redMi 10', id: '3', model: '256+12' },
    { brand: 'redMi', name: 'redMi 超级超级豪华至尊尊享王者版', id: '4', model: '256+12' }
  ]

  return (
    <View flex={1}>
     <BeautifulTable containerStyle={{paddingHorizontal: 20}} columns={columns} data={data} />
  </View>
  )
}

例二 自定义内容 左侧列冻结

import React from 'react';
import { View, Text } from 'react-native';
import BeautifulTable from 'react-native-beautiful-component';

const demoPage = () => {

  const columns = [
    {
      title: '序号',
      dataKey: 'id',
      width: 200,
      fixed: 'left'
    },
    {
      title: <Text>品牌</Text>,
      dataKey: 'brand',
      width: 200,
    },
    {
      title: '手机名',
      dataKey: 'name',
      width: 200,
    },
    {
      title: '模型',
      dataKey: 'model',
      align: 'right',
      width: 200,
    }
  ]

  const data = [
    {
      brand: '小米',
      name: <Text style={{ fontWeight: 'bold' }}>小米11</Text>,
      id: '1',
      model: '128+8',
    },
    { brand: '小米', name: '小米12', id: '2', model: '256+8' },
    { brand: 'redMi', name: 'redMi 10', id: '3', model: '256+12' },
    { brand: 'redMi', name: 'redMi 超级超级豪华至尊尊享王者版', id: '4', model: '256+12' }
  ]

  return (
    <View flex={1}>
     <BeautifulTable columns={columns} data={data} />
  </View>
  )
}

例三 点击子列表展开

import React from 'react';
import { View, Text } from 'react-native';
import BeautifulTable from 'react-native-beautiful-component';

const demoPage = () => {

  const columns = [
    {
      title: '序号',
      dataKey: 'id',
      width: 200,
      fixed: 'left',
      render (key, item) {
        return <Text>自定义序号 {key}</Text>
      }
    },
    {
      title: <Text>品牌</Text>,
      dataKey: 'brand',
      width: 200,
    },
    {
      title: '手机名',
      dataKey: 'name',
      width: 200,
    },
    {
      title: '模型',
      dataKey: 'model',
      align: 'right',
      width: 200,
    }
  ]

  const data = [
    {
      brand: '小米',
      name: <Text style={{ fontWeight: 'bold' }}>小米11</Text>,
      id: '1',
      model: '128+8',
    },
    { brand: '小米', name: '小米12', id: '2', model: '256+8' },
    { brand: 'redMi', name: 'redMi 10', id: '3', model: '256+12' },
    { brand: 'redMi', name: 'redMi 超级超级豪华至尊尊享王者版', id: '4', model: '256+12' }
  ]

  return (
    <View flex={1}>
      <BeautifulTable
        columns={columns}
        data={data}
        isExpandShow
        contentCellStyle={{ justifyContent: 'flex-start' }}
        filterSetRowStyle={(item, index) => {
          // 控制某几项的样式
          return index === 1 && { backgroundColor: 'pink' }
        }}
        onContentRowPress={(item, index) => {
          alert('我点击了行')
        }}
        // 点击 table 后,展开子项
        expandedRender={(item, index) => {
          return (
            <BeautifulTable
              hideHeader
              columns={columns}
              data={data}
              containerStyle={{ backgroundColor: 'pink' }}
            />
          )
        }}
      />
  </View>
  )
}



组件属性

属性 类型 描述 默认值
columns ColumnItem 组件数据 []
data object 数据内容 []
fieldKey string 数据唯一标识 id
isExpandShow boolean 是否默认展开拓展项 false
defaultExpandIndex boolean 默认展示的展开项索引

其他信息参考 libs/index.d.ts api 描述文件,里面有详细的介绍

ColumnItem 属性

属性 类型 描述 默认值
dataKey string 键值名称
title string JSX.Element 标题内容
flex number 布局宽度占比 1
width number 宽度具体值
align 'left' | 'center' | 'right' 文字对齐方式 'left'
fixed 'left' | 'right' 列冻结
render (text: string, row: ITableDataItem, index: number) => JSX.Element



注意事项

  • Col和Cols里的单元格无法做到每行自适应高度
  • 请在textStyle属性里设置margin值来调整内边距,不要用padding值

License

MIT

Package Sidebar

Install

npm i react-native-beautiful-table

Weekly Downloads

188

Version

1.0.3

License

MIT

Unpacked Size

39.2 kB

Total Files

22

Last publish

Collaborators

  • chenzhangdong