Material-table: Nothing renders

[thebetterjort]

import React from "react"
import { graphql } from 'gatsby'
import MaterialTable from 'material-table'
export default ({data}) => (
<div>
    <h1>Check Logs</h1>

     <MaterialTable
          columns={[
            { title: 'id', field: 'id'},
            { title: 'Amount', field: 'Amount'},
            { title: 'Cashier', field: 'Cashier'},
            { title: 'Check_No', field: 'Check_No'},
            { title: 'Date', field: 'Date'},
            { title: 'Note', field: 'Note'},
            { title: 'Receipt_No', field: 'Receipt_No'},
            { title: 'RecievedBy', field: 'RecievedBy'},
            { title: 'Remitter', field: 'Remitter'},
            { title: 'Type', field: 'Type'},
          ]}
          data={
            data.checklogs.checklogs.map((check, i) => {
            let tabledata = [{id: check.id,
            Amount: check.Amount,
            Cashier: check.Cashier,
            Check_No: check.Check_No,
            Date: check.Date,
            Note: check.Note,
            Receipt_No: check.Receipt_No,
            RecievedBy: check.RecievedBy,
            Remitter: check.Remitter,
            Type : check.Type,
            }]
            console.log(tabledata)
            return tabledata

    })
  } 

          title="Check Logs"
        />
    </div>

)
export const query = graphql`
  query {
    checklogs {
        checklogs {
            id
            Amount
            Cashier
            Check_No
            Date
            Note
            Receipt_No
            RecievedBy
            Remitter
            Type
            id
          }
    }
  }
`

Errors:

Warning: Failed prop type: Invalid propdatasupplied toMaterialTable. in MaterialTable (created by WithStyles(MaterialTable)) in WithStyles(MaterialTable) (at pages/index.js:8) in div (at pages/index.js:5) in _default (created by HotExported_default) in AppContainer (created by HotExported_default) in HotExported_default (created by PageRenderer) in PageRenderer (created by JSONStore) in JSONStore (created by EnsureResources) in ScrollContext (created by EnsureResources) in RouteUpdates (created by EnsureResources) in EnsureResources (created by RouteHandler) in RouteHandler (created by Root) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by LocationProvider) in LocationProvider (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by Root) in Root in _default index.js:2177 Warning: Failed prop type: Invalid propdataof typearraysupplied toMTableBodyRow, expectedobject. in MTableBodyRow (created by MTableBody) in MTableBody (created by Droppable) in table (created by Table) in Table (created by WithStyles(Table)) in WithStyles(Table) (created by Droppable) in div (created by Droppable) in div (created by Droppable) in DroppableDimensionPublisher (created by Droppable) in Droppable (created by Connect(Droppable)) in Connect(Droppable) (created by MaterialTable) in div (created by ScrollBar) in ScrollBar (created by MaterialTable) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by MaterialTable) in DragDropContext (created by MaterialTable) in MaterialTable (created by WithStyles(MaterialTable)) in WithStyles(MaterialTable) (at pages/index.js:8) in div (at pages/index.js:5) in _default (created by HotExported_default) in AppContainer (created by HotExported_default) in HotExported_default (created by PageRenderer) in PageRenderer (created by JSONStore) in JSONStore (created by EnsureResources) in ScrollContext (created by EnsureResources) in RouteUpdates (created by EnsureResources) in EnsureResources (created by RouteHandler) in RouteHandler (created by Root) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by LocationProvider) in LocationProvider (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by Root) in Root in _default index.js:2177 Warning: Failed prop type: Invalid proprowDataof typearraysupplied toMTableCell, expectedobject. in MTableCell (created by MTableBodyRow) in MTableBodyRow (created by MTableBody) in tbody (created by TableBody) in TableBody (created by WithStyles(TableBody)) in WithStyles(TableBody) (created by MTableBody) in MTableBody (created by Droppable) in table (created by Table) in Table (created by WithStyles(Table)) in WithStyles(Table) (created by Droppable) in div (created by Droppable) in div (created by Droppable) in DroppableDimensionPublisher (created by Droppable) in Droppable (created by Connect(Droppable)) in Connect(Droppable) (created by MaterialTable) in div (created by ScrollBar) in ScrollBar (created by MaterialTable) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by MaterialTable) in DragDropContext (created by MaterialTable) in MaterialTable (created by WithStyles(MaterialTable)) in WithStyles(MaterialTable) (at pages/index.js:8) in div (at pages/index.js:5) in _default (created by HotExported_default) in AppContainer (created by HotExported_default) in HotExported_default (created by PageRenderer) in PageRenderer (created by JSONStore) in JSONStore (created by EnsureResources) in ScrollContext (created by EnsureResources) in RouteUpdates (created by EnsureResources) in EnsureResources (created by RouteHandler) in RouteHandler (created by Root) in div (created by FocusHandlerImpl) in FocusHandlerImpl (created by Context.Consumer) in FocusHandler (created by RouterImpl) in RouterImpl (created by LocationProvider) in LocationProvider (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by Root) in Root

[wandrzejczak]

hej,

you are returning array list with map(), you should return {} object.

so you create list of object list [[{....}]] instead of [{}]

could you replace:

let tabledata = [{id: check.id,
Amount: check.Amount,
Cashier: check.Cashier,
Check_No: check.Check_No,
Date: check.Date,
Note: check.Note,
Receipt_No: check.Receipt_No,
RecievedBy: check.RecievedBy,
Remitter: check.Remitter,
Type : check.Type,
}]

with

let tabledata = {id: check.id,
Amount: check.Amount,
Cashier: check.Cashier,
Check_No: check.Check_No,
Date: check.Date,
Note: check.Note,
Receipt_No: check.Receipt_No,
RecievedBy: check.RecievedBy,
Remitter: check.Remitter,
Type : check.Type,
}

please let me know if this will help :)

Wojtek.

[thebetterjort]

How did I miss this? Thanks!