React-Table mixed with React-components

Question

I'm new to react-table so I'm struggling to get an example running. The code is very simple. 1) App.js - link the URI to the new react sale report

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Navbar />
            <Switch>
              <Route exact path="/reportsales" render={() => <ReportSalesReactTable  /> } />
            </Switch>
            <Footer />
          </div>
        </Router>
      </div>
    );
  }
}

2) ReportSalesReactTable.js - Use react table to display some fix data (as test) import React from 'react' import ReactTable from 'react-table'

function ReportSalesReactTable() {
    let salesArray = [
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown Stock",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "bubbles",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown",
            units: "1",
            costPrice: "0.6",
            salePrice: "0.68",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        }
    ];

    const columns = [
        {
            Header: "V-Id",
            accessor: "vendorId"
        },
        {
            Header: "Name",
            accessor: "name"
        },
        {
            Header: "Surname",
            accessor: "surname"
        },
        {
            Header: "Kiosk Id",
            accessor: "kioskId"
        },
        {
            Header: "Description",
            accessor: "description"
        },
        {
            Header: "Quantity",
            accessor: "units"
        },
        {
            Header: "Cost Price",
            accessor: "costPrice"
        },
        {
            Header: "Retail Price",
            accessor: "salePrice"
        },
        {
            Header: "Discount",
            accessor: "discount"
        },
        {
            Header: "Date",
            accessor: "saleDateTime"
        }
    ]
    return (
        <div>
            <ReactTable columns={columns} data={salesArray} />
        </div>
    )
}

export default ReportSalesReactTable

3) The error I'm getting is: ** Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of ReportSalesReactTable. **

How I understand that react table doesn't want to be called from a React Component (App.js). However, the rest of the web-app now uses react components so I have no idea how to link this react table to the rest of the web-app via App.js->switch route statements.

Any ideas how to render a React-table if you are using react components?

Thanks for the help

Answer 1

Hi I could not try your example as it is lower version of ReactTable. but in my environment, I had the version

"react-table": "^7.1.0",

Can you please try to update react-table version to 7.1.0 and try the below example? it is working perfectly

import React from "react";
import {useTable} from "react-table";
import styled from 'styled-components'

function ReportSalesReactTable() {
    let salesArray = [
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown Stock",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "bubbles",
            units: "1",
            costPrice: "6",
            salePrice: "8",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        },
        {
            name: "James",
            surname: "van der Walt",
            vendorId: "0",
            kioskId: "0",
            description: "Unknown",
            units: "1",
            costPrice: "0.6",
            salePrice: "0.68",
            discount: "0",
            saleDateTime: "2019-10-28T11:53:00.000Z"
        }
    ];

    const columns = [
        {
            Header: "V-Id",
            accessor: "vendorId"
        },
        {
            Header: "Name",
            accessor: "name"
        },
        {
            Header: "Surname",
            accessor: "surname"
        },
        {
            Header: "Kiosk Id",
            accessor: "kioskId"
        },
        {
            Header: "Description",
            accessor: "description"
        },
        {
            Header: "Quantity",
            accessor: "units"
        },
        {
            Header: "Cost Price",
            accessor: "costPrice"
        },
        {
            Header: "Retail Price",
            accessor: "salePrice"
        },
        {
            Header: "Discount",
            accessor: "discount"
        },
        {
            Header: "Date",
            accessor: "saleDateTime"
        }
    ];


    const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`;

    function Table({columns, data}) {
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable({
            columns,
            data,
        });

        return (
            <table {...getTableProps()}>
                <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))}
                    </tr>
                ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row);
                    return (
                        <tr {...row.getRowProps(
                            {
                                style: {backgroundColor: row.values.tIncome > 50 ? 'skyblue' : 'lightgray'}
                            }
                        )}>
                            {row.cells.map(cell => {
                                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                            })}
                        </tr>
                    )
                })}
                </tbody>
            </table>
        )
    }

    return (
        <div>
            <Styles>
                <Table columns={columns} data={salesArray}/>
            </Styles>
        </div>
    )
}
export default ReportSalesReactTable