javascript - React table not displaying data - Stack Overflow

admin管理员组

文章数量:1394520

so im using react-table library to display a tree grid table with mocked data but it isn't appearing like it should and it shows that there's one item on the 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"
            />
        );
    }
}

This is the result of the snippet above :

Soon i'll be using real data from a database but i need to test this out before messing around with micro service integration.

so im using react-table library to display a tree grid table with mocked data but it isn't appearing like it should and it shows that there's one item on the 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"
            />
        );
    }
}

This is the result of the snippet above :

Soon i'll be using real data from a database but i need to test this out before messing around with micro service integration.

• javascript
• reactjs
• react-table

Share Improve this question Follow edited Oct 1, 2018 at 9:41 Raghav Garg 3,70722 gold badges2626 silver badges3333 bronze badges asked Oct 1, 2018 at 9:37 Tomas DuarteTomas Duarte 14122 silver badges1515 bronze badges 3

• have you tried the simplest config like: <ReactTable data={data} columns={columns} defaultPageSize={10} className="-striped -highlight"/>? – Raghav Garg Commented Oct 1, 2018 at 9:43
• Edited your code and added constructor method to initialize the state. – Chetan Singhal Commented Oct 1, 2018 at 9:46
• @ChetanSinghal your edit brings nothing. he already is instantiating his state correctly via the class properties transform. – Dimitar Christoff Commented Oct 1, 2018 at 9:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

It's a typo. Please try using 'accessor' instead of 'acessor'.

本文标签： javascriptReact table not displaying dataStack Overflow