react-table组件入门和在IE11上遇到的坑
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上面都没有问题,能显示正常,同样的代码在 代码如下: 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{
....
}
好了,今天的分享就到此为止把。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |