ray-rn-table

author

ilex.h

install

npm install --save ray-rn-table

Usage

Basic usage

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';
import Table from 'ray-rn-table';

const columns = [
  { key: 'name', title: 'Name', dataIndex: 'name', width: 105 },
  { key: 'age', title: 'Age', dataIndex: 'age' },
  { key: 'interest', title: 'Interest', dataIndex: 'interest' }
];

// You can use mockjs to generate data.
const datas = [
  { key: '1', name: 'ray1', age: 18, interest: 'writing, sports' },
  { key: '2', name: 'ray2', age: 19, interest: 'music' },
  { key: '3', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '4', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '5', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '6', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '7', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '8', name: 'ray3', age: 20, interest: 'drawing' }
];

class TableExample extends Component {
  render() {
    return (
      <View>
        <Text style={styles.h1}>ray-rn-table demo</Text>
        <Table height={500} columnWidth={50} columns={columns} dataSource={datas} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  h1: {
    fontSize: 20,
    padding: 10,
    textAlign: 'center'
  }
});

export default TableExample;

// or using mockjs to generate data
import Mock from 'mockjs';

export default function generateData() {
  return Mock.mock({
    'data|1-20': [{
      'key|1': '@id',
      'name|1': '@name', // or use @cname
      'age|18-30': 1,
      'interest|+1': [ 'writing', 'sports', 'music', 'drawing' ]
    }]
  });
}

custom render usage

add render method to columns item.

// steps: add `render` method to columns item

const columns = const columns = [
  { key: 'name', title: 'Name', dataIndex: 'name', width: 105 },
  { key: 'age', title: 'Age', dataIndex: 'age' },
  { key: 'interest', title: 'Interest', dataIndex: 'interest', render: (text, record, index) => <Text>{text}</Text> },
];

class TableExample extends Component {
  render() {
    return (
      <View>
        <Text style={styles.h1}>ray-rn-table demo</Text>
        <Table height={500} columnWidth={50} columns={columns} dataSource={datas} />
      </View>
    )
  }
}

export default TableExample;

hide header

showHeader is false

class TableExample extends Component {
  render() {
    return (
      <View>
        <Text style={styles.h1}>ray-rn-table demo</Text>
        <Table
          height={500}
          columnWidth={50}
          columns={columns}
          dataSource={datas}
          showHeader={false}
        />
      </View>
    )
  }
}
export default TableExample;

show border

bordered is true

class TableExample extends Component {
  render() {
    return (
      <View>
        <Text style={styles.h1}>ray-rn-table demo</Text>
        <Table
          height={500}
          columnWidth={50}
          columns={columns}
          dataSource={datas}
          bordered
        />
      </View>
    )
  }
}
export default TableExample;

custom rowKey default is key

uniqe key is id

const datas = [
  { id: '1', name: 'ray1', age: 18, interest:'writing, sports' },
  { id: '2', name: 'ray2', age: 19, interest:'music' },
  { id: '3', name: 'ray3', age: 20, interest:'drawing' }
];

class TableExample extends Component {
  render() {
    return (
      <View>
        <Text style={styles.h1}>ray-rn-table demo</Text>
        <Table
          height={500}
          columnWidth={50}
          columns={columns}
          dataSource={datas}
          rowKey='id'
        />
      </View>
    )
  }
}
export default TableExample;

complex demo

/* eslint no-magic-numbers: 0 */
import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';

// Internal modules
import { CheckBox, Button } from 'amos-rn-core-ui';

import Table from 'ray-rn-table';

const columns = [
  { key: 'name', title: 'Name', dataIndex: 'name', width: 105 },
  { key: 'age', title: 'Age', dataIndex: 'age' },
  { key: 'interest', title: 'Interest', dataIndex: 'interest' }
];

// You can use mockjs to generate data.
const _datas = [
  { key: '1', name: 'ray1', age: 18, interest: 'writing, sports' },
  { key: '2', name: 'ray2', age: 19, interest: 'music' },
  { key: '3', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '4', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '5', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '6', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '7', name: 'ray3', age: 20, interest: 'drawing' },
  { key: '8', name: 'ray3', age: 20, interest: 'drawing' }
];

let index = 8;

class TableExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      bordered: false,
      showHeader: true,
      datas: _datas,
      size: 'medium'
    };
  }

  onCheckChange = (type, checked) => {
    this.setState({
      [type]: checked
    });
  }

  addRecord = () => {
    const { datas } = this.state;
    index += 1;
    datas.push({
      key: index, name: `ray${index}`, age: 20, interest: 'drawing'
    });

    this.setState({
      datas
    });
  }

  changeSize = (size) => {
    this.setState({
      size
    });
  }


  render() {

    const { bordered, showHeader, size, datas } = this.state;

    return (
      <View style={{ padding: 10 }}>
        <Text style={styles.h1}>ray-rn-table demo</Text>
        <View style={styles.actions}>
          <Text>size</Text>
          <Button size="small" type="green" text="small" onPress={() => this.changeSize('small')} />
          <Button size="small" type="violet" text="medium" onPress={() => this.changeSize('medium')} />
          <Button size="small" text="large" onPress={() => this.changeSize('large')} />
        </View>
        <View style={[ styles.actions, { marginTop: 5 } ]}>
          <Button type="vitality" size="small" text="Add" onPress={this.addRecord} />
          <CheckBox
            style={{ flex: 1, padding: 10 }}
            onClick={(checked)=>this.onCheckChange('showHeader', checked)}
            isChecked={showHeader}
            rightText="showHeader"
            checkBoxColor="#23BB45"
          />
          <CheckBox
            style={{ flex: 1, padding: 10 }}
            onClick={(checked)=>this.onCheckChange('bordered', checked)}
            isChecked={bordered}
            rightText="bordered"
            checkBoxColor="#23BB45"
          />
        </View>
        <Table
          height={500}
          columnWidth={120}
          columns={columns}
          dataSource={datas}
          bordered={bordered}
          showHeader={showHeader}
          size={size}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  h1: {
    fontSize: 20,
    padding: 10,
    textAlign: 'center'
  },
  actions: {
    flexDirection: 'row'
  }
});

export default TableExample;

props

Table Props

Property	Type	Default	Description
dataSource	any[]	[]	table datas
columns	ColumnProps[]	[]	table colun config
columnWidth	number	60	column width, The width value in columns will not be overwritten
height	number	300	ScrollView content height
showHeader	boolean	true	show or hide table's header
bordered	boolean	false	show or hide column border and outer border
containerStyle	object	-	the wrapper ScrollView style
tableWrapperStyle	object	-	table content wrapper view styles
rowKey	`string	func: (record, index) => {}`	key
size	string	medium	the size of table, `small

ColumnProps

Property	Type	Default	Description
key	string	-	React needs the key, and if the only dataIndex has been set up, this prop can be ignored.
dataIndex	string	-	The key that the columns data corresponds to in the record (dataSource)
title	string	-	Text content displayed by the column head
width	number	-	column width, only change current column's width
render	function: (text, record, index) => {}	-	to generates complex data, and render custom row.

License

MIT