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 https://github.com/tannerlinsley/react-table/issues/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 https://github.com/tannerlinsley/react-table/issues/6#issuecomment-256967379, 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 https://github.com/tannerlinsley/react-table/issues/6#issuecomment-257232571, 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 https://github.com/tannerlinsley/react-table/issues/6#issuecomment-257237417, 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 :)