react table 初体验

本贴最后更新于 1949 天前,其中的信息可能已经时移俗易

背景

table 组件在 react 中的使用。

table 组件可以找到的不少。

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

初体验

安装

$ npm install --save rc-table

效果

npm install --save rc-table
+ rc-table@6.4.0
updated 1 package and audited 35722 packages in 11.499s
found 0 vulnerabilities

使用

官方示例

/* 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

参考

  • Web
    115 引用 • 430 回帖 • 8 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...