react table 初体验

  |   评论   |   浏览

背景

table 组件在 react 中的使用。

table 组件可以找到的不少。

由于前面使用了react-component下面的tabs感觉不错，所以这样就选用了react-component下面的table了。

初体验

安装

$ npm install --save rc-table
​

效果

npm install --save rc-table
+ rc-table@7.0.0-rc.8
added 6 packages from 1 contributor in 13.476s
​

使用

官方示例

/* eslint-disable no-console,func-names,react/no-multi-comp */
import React from 'react';
import ReactDOM from 'react-dom';
import Table from 'rc-table';
import 'rc-table/assets/index.css';

const columns = [
  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
  {
    title: 'Operations',
    dataIndex: '',
    key: 'd',
    render() {
      return <a href="#">Operations</a>;
    },
  },
];

const data = [
  { a: '123', key: '1' },
  { a: 'cdd', b: 'edd', key: '2' },
  { a: '1333', c: 'eee', d: 2, key: '3' },
];

ReactDOM.render(
  <div>
    <h2>simple table</h2>
    <Table columns={columns} data={data} />
  </div>,
  document.getElementById('__react-content'),
);
​

Component 封装

为了使用方便，我最后还是把它封装成一个 Component 了。示例如下：

import React, { Component } from 'react';
import Table from 'rc-table';
import 'rc-table/assets/index.css';

class TableComponent extends Component {
    
  constructor(props, ...args){
    super(props, ...args)

    const columns = [
  { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
  { id: '123', title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
  { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
  {
    title: 'Operations',
    dataIndex: '',
    key: 'd',
    render() {
      return <a href="#">Operations</a>;
    },
  },
];

const data = [
  { a: '123', key: '1' },
  { a: 'cdd', b: 'edd', key: '2' },
  { a: '1333', c: 'eee', d: 2, key: '3' },
];

    this.state = {
      columns: columns, 
      data: data,
    }

    render() {
      return (
        <div>
        <h2>Table</h2>
        <Table 
          columns={this.state.columns} 
          data={this.state.data} 
        />
      </div>);
    }
}

  export default TableComponent
​

参考