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 | The value of the record key, can be a string or a function | | size | string | medium | the size of table, small | medium | large |

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