react-table组件入门和在IE11上遇到的坑

原创 2017年10月20日 23:00:02

react-table是一个非常好的渲染数据表的一个react的前端控件,当时之所以选择这个库就是因为其每列的列宽可以自己拖拽变宽或者变窄,而且其可以非常容易的被定制。

这里写图片描述

我们可以看到起用户的给Star已经达到了2k,看来应该是一个不错的模块。
而且其提供了可以在线练习和修改代码的范例和平台,非常的方便初学者快速掌握。

这里写图片描述

左边修改代码,右边立马就能看到修改的结果。
下面就是一个简单的例子,

import React from "react";
import { render } from "react-dom";
import { makeData, Logo, Tips } from "./Utils";

// Import React Table
import ReactTable from "react-table";
import "react-table/react-table.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData()
    };
  }
  render() {
    const { data } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={[
            {
              Header: "Name",
              columns: [
                {
                  Header: "First Name",
                  accessor: "firstName"
                },
                {
                  Header: "Last Name",
                  id: "lastName",
                  accessor: d => d.lastName
                }
              ]
            },
            {
              Header: "Info",
              columns: [
                {
                  Header: "Age",
                  accessor: "age"
                },
                {
                  Header: "Status",
                  accessor: "status"
                }
              ]
            },
            {
              Header: 'Stats',
              columns: [
                {
                  Header: "Visits",
                  accessor: "visits"
                }
              ]
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

是不是感觉特别的棒。而且还支持表格归类,表格的嵌套,表格的定制,功能非常的强大。

因为笔者的项目要求其能同时支持IE11,Chrome和FireFox,当笔者使用React-table组件后,在Chrome和FireFox上面都没有问题,能显示正常,同样的代码在
IE11上就显示不出来,只能显示分页。
@在Chrome/FireFox显示正常
这里写图片描述
@在IE11上显示不出来
这里写图片描述

代码如下:

import React from 'react';
import ReactTable from "react-table";
import "react-table/react-table.css";
export default class Example extends React.Component {

  constructor(){
    super();
    let rows = [];
    for (let i = 1; i < 1000; i++) {
      rows.push({
        ID: i,
        Title: 'Title ' + i,
        Count: i * 1000
      });
    };
    this.state={
      columns:[
      { Header: 'id', accessor: 'ID',  id: "id" },
      { Header: 'title', accessor: 'Title',  id: "title"},
      { Header: 'count', accessor: 'Count', id: "count" } ],
      _rows:rows
    }
  }


  render() {

      return  (
        <div>
        <ReactTable
         columns={this.state.columns}
         data = {this.state._rows}
         className="-striped -highlight" />
        </div>
      );
    }

}

那么解决的办法是什么呢? 原来是因为IE11上的一个样式不兼容引起的。所以需要新建一个样式,比如在新建一个react-table-fix-ie.css文件,在里面写入下面的代码:

.ReactTable {
  display: block;
}

然后在上面的代码中引入这个样式文件,问题就解决了。

import React from 'react';
import ReactTable from "react-table";
import "react-table/react-table.css";
import '../../style/css/react-table-fix-ie.css';
export default class Example extends React.Component{
                     ....
}

好了,今天的分享就到此为止把。

版权声明:本文为博主原创文章,未经博主允许不得转载。

总结react中遇到的坑和一些小的知识点

总结react中遇到的坑和一些小的知识点 在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点...
  • u010977147
  • u010977147
  • 2016年12月06日 20:08
  • 2969

React Native从入门到放弃

React Native从入门到放弃最近工作清闲,自己做了个技术调研,选的就是React Native。下面总结下最近一段时间对React Native的研究。Web基础 了解html与dom、jav...
  • xia215266092
  • xia215266092
  • 2016年05月15日 14:31
  • 6068

React 事件踩坑(一)

问题描述今天想要用react实现一个对话框的功能,这个对话框有一个特点就是在点击这个对话框的时候直接就能够使它隐藏,并且在对话框之外的任何东西都是可以点击的,并且能够及时的响应。...
  • WANGLEI20116527
  • WANGLEI20116527
  • 2016年04月27日 23:47
  • 3926

从IE6到IE11上运行WebGL 3D遇到的各种坑

这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行在老的IE678910浏览器的问题,...
  • u013161495
  • u013161495
  • 2014年03月11日 00:11
  • 1597

关于IE11浏览器常遇到的一些问题:1.F12调试工具没法用 2.浏览器搜索一直刷新不出页面

IE浏览器F12调试工具没法用 如果电脑系统是:Win7 64位 需要安装如下插件:IE11-Windows6.1-KB3008923-x64.msu  下载地址:https://downloa...
  • masko123
  • masko123
  • 2016年11月29日 09:20
  • 836

IE11无法打开网页,一片空白,Internet选项灰色无法点击的问题

【2016年6月4日 星期六】 【问题解决】 参考百度知道: http://zhidao.baidu.com/question/2201573055406154108.html?from=co...
  • joefei2008
  • joefei2008
  • 2016年06月04日 20:20
  • 4035

js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)

这篇文章主要介绍了js实现ctrl+v粘贴上传图片,兼容chrome,firefox,ie11
  • qq_38334525
  • qq_38334525
  • 2017年07月29日 11:47
  • 342

探索IE11新开发者工具 – “网络”面板功能改进(下)

接着上篇文章,点击计时这列的某条记录之后就进入到了详细视图页面。 在这个详细视图页面中可以看到详细视图又由请求标头、请求正文、响应标头、响应正文、Cookie、发起程序、计时这几部分组成。现...
  • u011493253
  • u011493253
  • 2013年12月05日 18:45
  • 15625

如何解决win8.1中IE11浏览器网银无法输入密码?

windows xp将在今年4月8号退出windows系统的舞台,我想现在大家都装上win8系统了吧,话说最新的不一定就是最好的,也不一定是最实用的,这不,今天我就发现了一个问题,本来是想去网上淘点东...
  • MaxWoods
  • MaxWoods
  • 2014年10月08日 23:09
  • 1462

KindEditor4.1.10支持从剪切板中复制的图像直接上传(Chrome,IE11,opera)

本人扩展了KindEditor4.1.10,使得他能够在Chrome和IE11中直接粘贴复制的
  • herotangabc
  • herotangabc
  • 2014年08月20日 17:14
  • 2807
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react-table组件入门和在IE11上遇到的坑
举报原因:
原因补充:

(最多只允许输入30个字)