reactjs react-table not rendering a table

Question

I'm attempting to use the react-table package from the https://react-table.js.org/#/story/readme inside of my Shopify App, however, I can't get the actual table to render. Only the text part of the table shows up? Anybody have any clue on what would be causing this? Could it be having issues since it is inside of an iFrame? See image below.

Problem found: Added <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css"> directly on my view page and it worked. the import css was not importing correctly.

import React from 'react'
import ReactDOM from 'react-dom'
import ReactTable from 'react-table'
import PropTypes from 'prop-types'
import { Page, Card, Select, Button, TextField, Stack, FormLayout,
Thumbnail, ResourceList, Pagination, Layout, Checkbox } from '@shopify/polaris';
import "react-table/react-table.css"

class PriceTestContainer extends React.Component {
  render() {
    const data = [{
      age: 26,
      visits: 100
    },{
      age: 44,
      visits: 200
    }]
    return (<ReactTable
              data={data}
              columns={[
              {
                Header: "Info",
                columns: [
                  {
                    Header: "Age",
                    accessor: "age"
                  }
                ]
              },
              {
                Header: 'Stats',
                columns: [
                  {
                    Header: "Visits",
                    accessor: "visits"
                  }
                ]
              }
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
            /> 
    );
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('zzz')
ReactDOM.render(<PriceTestContainer />, node)
})

check it out npmjs.com/package/eprofit

xargr
– xargr

2019-10-09 17:47:24 +00:00
Commented Oct 9, 2019 at 17:47 — xargr
– xargr, Commented Oct 9, 2019 at 17:47

Sagiv b.g · Accepted Answer · 2017-09-16 20:56:21Z

1

Looks like your code is working if you pull the render method outside the DOMContentLoaded listener:

class PriceTestContainer extends React.Component {
  render() {
    const data = [{
      age: 26,
      visits: 100
    },{
      age: 44,
      visits: 200
    }]
    return (<ReactTable
              data={data}
              columns={[
              {
                Header: "Info",
                columns: [
                  {
                    Header: "Age",
                    accessor: "age"
                  }
                ]
              },
              {
                Header: 'Stats',
                columns: [
                  {
                    Header: "Visits",
                    accessor: "visits"
                  }
                ]
              }
            ]}
            defaultPageSize={10}
            className="-striped -highlight"
            /> 
    );
  }
}

ReactDOM.render(<PriceTestContainer />, document.getElementById('zzz'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">

  <!-- JS -->
  <script src="https://unpkg.com/react-table@latest/react-table.js"></script>

  <script>
    var ReactTable = window.ReactTable.default
  </script>
  
  <div id="zzz"></div>

answered Sep 16, 2017 at 20:56

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ByteMe Over a year ago

When I change the last part to remove the event listener to ReactDOM.render(<PriceTestContainer />, document.getElementById('zzz')), nothing renders on the page for me inside my app

Sagiv b.g Over a year ago

well, as you see it is rendered here, so maybe you have some other code that prevent it from rendering or maybe you are not importing the css correctly? i see that you do import it but is it really included in the page?

ByteMe Over a year ago

I do think the CSS is imported correctly, but I can double check. Hmm yeah I'm not sure what else would stop it from working? Strange things happen inside a Shopify iFrame though

ByteMe Over a year ago

Looks like it was a .css issue after all, I added the stylesheet directly to my view and it worked as expected. Thanks! I'll accept your answer

Collectives™ on Stack Overflow

reactjs react-table not rendering a table

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related