Fetching server-side data shouldn't require a default

[alexandersimoes]

I'm trying to use the server-side data example which will work until I add a setTimeout and then I get a few console errors. Here's the sample code:

Works --

const data  = [{name:'test', id:1234}];
return (
  <div>
    <ReactTable
      pageSize={10}
      columns={columns}
      data={(params, callback) => {
        callback({ rows:data })
      }}
    />
  </div>
)

Doesn't work --

const data  = [{name:'test', id:1234}];
return (
  <div>
    <ReactTable
      pageSize={10}
      columns={columns}
      data={(params, callback) => {
        setTimeout(() => {
          callback({ rows:data })
        })
      }}
    />
  </div>
)

The second test will work if initialized with the callback like so:

const data  = [{name:'test', id:1234}];
return (
  <div>
    <ReactTable
      pageSize={10}
      columns={columns}
      data={(params, callback) => {
        columns={columns}
        setTimeout(() => {
          callback({ rows:data })
        })
      }}
    />
  </div>
)

[tannerlinsley]

I'm not sure I understand the columns={columns} jsx you have in the
callback?
On Thu, Oct 27, 2016 at 4:57 PM Alex Simoes notifications@github.com
wrote:

I'm trying to use the server-side data example which will work until I add
a setTimeout and then I get a few console errors. Here's the sample code:

Works --

const data = [{name:'test', id:1234}];return (

{ callback({ rows:data }) }} />

)

Doesn't work --

const data = [{name:'test', id:1234}];return (

{ setTimeout(() => { callback({ rows:data }) }) }} />

)

The second test will work if initialized with the callback like so:

const data = [{name:'test', id:1234}];return (

{ columns={columns} setTimeout(() => { callback({ rows:data }) }) }} />

)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#6, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AFUmCZXkljtUZiUcMIEKdF62S6JAL4K4ks5q4SxVgaJpZM4Ki6ap
.

[alexandersimoes]

Woops, sorry that was a copy/paste error, the last, working example should've been this:

const data  = [{name:'test', id:1234}];
return (
  <div>
    <ReactTable
      pageSize={10}
      columns={columns}
      data={(params, callback) => {
        callback({ rows:[] })
        setTimeout(() => {
          callback({ rows:data })
        })
      }}
    />
  </div>
)

[tannerlinsley]

I'll look into this tomorrow. Very interesting
On Fri, Oct 28, 2016 at 10:34 AM Alex Simoes notifications@github.com
wrote:

Woops, sorry that was a copy/paste error, the last, working example
should've been this:

const data = [{name:'test', id:1234}];return (

{
callback({ rows:[] })

setTimeout(() => {
callback({ rows:data })
})
}}
/>

)

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#6 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCdX3qElFwND8YDEwjdzJMa4LD6hDks5q4iQfgaJpZM4Ki6ap
.

[casperOne]

I can confirm, I'm running into the same issue as well.

Additionally, the page property seems to get all out of whack. Pages one and two pass me 1, while page three passes me 2.

[tannerlinsley]

Just released 3.0.0. Did you have a look at the new server side section?
On Mon, Oct 31, 2016 at 1:54 AM Nicholas Paldino notifications@github.com
wrote:

I can confirm, I'm running into the same issue as well.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#6 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCSaj8g8GXNj4qAZCI6P-QzXeoe9Nks5q5Z7CgaJpZM4Ki6ap
.

[tannerlinsley]

The way data is fetched in the latest version should fix this issue. You can now listen for table changes and handle the data updates yourself via component state or redux or any other dynamic react state.

[casperOne]

The way data is fetched in the latest version should fix this issue. You can now listen for table changes and handle the data updates yourself via component state or redux or any other dynamic react state.

Do you have an example of this?

When using a callback, I'm getting this.props.data.map is not a function:

In this case, this.props.data is the callback function.

Here's the code that I have for react-table:

<ReactTable
  data={ (params, callback) => {
      // If no URL, then just get out.
      if (!challongeUrl) return Promise.resolve({ rows: [] });

      return fetchUtilities.fetchApi({
        url: `/api/challonge/tournaments?url=${ encodeURIComponent(challongeUrl) }&page=${ params.page }`
      }).then(data => {
        return {
          pages: data.pages,
          rows: data.tournaments
        }
      })
    }
  }
  columns={[
    {
      accessor: 'name',
      name: 'Name'
    },
    {
      accessor: 'game',
      name: 'Game'
    },
    {
      accessor: 'type',
      name: 'Bracket Type'
    },
    {
      accessor: 'progress',
      name: '% Complete',
      render: ({ value, rowValues, row, index, viewIndex}) => <LinearProgress mode='determinate' value={ value }/>
    }
  ]}
/>

I've validated that my service is returning the data correctly.

[tannerlinsley]

Update to the latest version and follow these steps
https://github.com/tannerlinsley/react-table/#server-side-data
On Mon, Oct 31, 2016 at 2:25 AM Nicholas Paldino notifications@github.com
wrote:

The way data is fetched in the latest version should fix this issue. You
can now listen for table changes and handle the data updates yourself via
component state or redux or any other dynamic react state.

Do you have an example of this?

When using a callback, I'm getting this.props.data.map is not a function:

[image: image]
https://cloud.githubusercontent.com/assets/561862/19848138/cf43d398-9f21-11e6-9b4e-147545454371.png

In this case, this.props.data is the callback function.

Here's the code that I have for react-table:

<ReactTable
data={ (params, callback) => {
// If no URL, then just get out.
if (!challongeUrl) return Promise.resolve({ rows: [] });

  return fetchUtilities.fetchApi({
    url: `/api/challonge/tournaments?url=${ encodeURIComponent(challongeUrl) }&page=${ params.page }`
  }).then(data => {
    return {
      pages: data.pages,
      rows: data.tournaments
    }
  })
}

}
columns={[
{
accessor: 'name',
name: 'Name'
},
{
accessor: 'game',
name: 'Game'
},
{
accessor: 'type',
name: 'Bracket Type'
},
{
accessor: 'progress',
name: '% Complete',
render: ({ value, rowValues, row, index, viewIndex}) => <LinearProgress mode='determinate' value={ value }/>
}
]}
/>

I've validated that my service is returning the data correctly.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#6 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCcnbjaiI19Gjidr-jKyB6CYGYrLtks5q5aX4gaJpZM4Ki6ap
.

[casperOne]

That seems to do it, thanks!

I'm having an issue where all the data is being rendered as &nbsp but that's for me to figure out another day.

[tannerlinsley]

@casperOne If minRows is set to anything > 0, placeholder rows are inserted into the table that contain  . My guess is your data is empty or something similar. If you still have that problem, create a new issue and we'll handle it there :)