React table 不显示数据
React table not displaying data
所以我正在使用 react-table 库来显示带有模拟数据的树状网格 table,但它并没有像它应该出现的那样显示 table 上有一个项目.
import React, { Component } from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css'
export default class TestTable extends Component {
state = {
data: [{
actionNo: "1",
action: "--",
productService: "Mobile Contract",
qty: 1,
startDate: Date.now(),
endDate: Date.now(),
account: 11111111,
mobileNo: 9111111,
amount: "--",
status: "Error"
}]
}
render() {
const { data } = this.state;
console.log(data);
const columns = [{
Header: 'Action No.',
accessor: 'actionNo'
}, {
Header: 'Action',
accessor: 'action',
}, {
acessor: 'productService',
Header: 'Product/Service',
}, {
acessor: 'qty',
Header: 'Qty.',
}, {
acessor: 'startDate',
Header: 'Start Date',
}, {
acessor: 'endDate',
Header: 'End Date',
}, {
acessor: 'account',
Header: 'Account',
}, {
acessor: 'mobileNo',
Header: 'Mobile No.',
}, {
acessor: 'amount',
Header: 'Amount.',
}, {
acessor: 'status',
Header: 'Status',
}]
return (
<ReactTable
data={data}
columns={columns}
pivotBy={["actionNo"]}
defaultPageSize={10}
showPagination={false}
resizable={false}
noDataText="No Data!"
className="-striped -highlight"
/>
);
}
}
这是上面代码片段的结果
:
很快我将使用数据库中的真实数据,但我需要先测试一下,然后再进行微服务集成。
打错了。请尝试使用 'accessor' 而不是 'acessor'。
所以我正在使用 react-table 库来显示带有模拟数据的树状网格 table,但它并没有像它应该出现的那样显示 table 上有一个项目.
import React, { Component } from 'react';
import ReactTable from "react-table";
import 'react-table/react-table.css'
export default class TestTable extends Component {
state = {
data: [{
actionNo: "1",
action: "--",
productService: "Mobile Contract",
qty: 1,
startDate: Date.now(),
endDate: Date.now(),
account: 11111111,
mobileNo: 9111111,
amount: "--",
status: "Error"
}]
}
render() {
const { data } = this.state;
console.log(data);
const columns = [{
Header: 'Action No.',
accessor: 'actionNo'
}, {
Header: 'Action',
accessor: 'action',
}, {
acessor: 'productService',
Header: 'Product/Service',
}, {
acessor: 'qty',
Header: 'Qty.',
}, {
acessor: 'startDate',
Header: 'Start Date',
}, {
acessor: 'endDate',
Header: 'End Date',
}, {
acessor: 'account',
Header: 'Account',
}, {
acessor: 'mobileNo',
Header: 'Mobile No.',
}, {
acessor: 'amount',
Header: 'Amount.',
}, {
acessor: 'status',
Header: 'Status',
}]
return (
<ReactTable
data={data}
columns={columns}
pivotBy={["actionNo"]}
defaultPageSize={10}
showPagination={false}
resizable={false}
noDataText="No Data!"
className="-striped -highlight"
/>
);
}
}
这是上面代码片段的结果
很快我将使用数据库中的真实数据,但我需要先测试一下,然后再进行微服务集成。
打错了。请尝试使用 'accessor' 而不是 'acessor'。