Comments (10)
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 [email protected]
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
.
from table.
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>
)
from table.
I'll look into this tomorrow. Very interesting
On Fri, Oct 28, 2016 at 10:34 AM Alex Simoes [email protected]
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
.
from table.
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.
from table.
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 [email protected]
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
.
from table.
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.
from table.
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.
from table.
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 [email protected]
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.pngIn 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
.
from table.
That seems to do it, thanks!
I'm having an issue where all the data is being rendered as  
but that's for me to figure out another day.
from table.
@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 :)
from table.
Related Issues (20)
- `getTopRows()` and `getBottomRows()` Not Referentially Stable Between Renders
- Calling `row.getParentRow()` with expanded, filtered row models and initial filtering value throws an error HOT 1
- Table sorting is not working when drag and drop of columns is used HOT 1
- Custom sortingFn not being run when row key is undefined
- [Angular] In the example, column sorting does not work. HOT 2
- Global filter only works with string and number types
- To use @Tanstack Table/vue-table, you must import the core package, but the documentation does not specify this HOT 2
- Sub components are overlapped with successive rows HOT 1
- Bug Report: cell.isGrouped Always Returns false Despite enableGrouping Being true (REACT) HOT 2
- The left position of pinned columns in the sticky table is calculated incorrectly HOT 2
- cell only displays one line HOT 1
- When using virtual rendering and column drag-and-drop sorting simultaneously, they don't work well together HOT 2
- onPaginationChange when set to undefined doesn't fallback to using default pagination HOT 1
- Failed to monitor data changes, resulting in page turning without re-rendering. HOT 2
- Table using insane amount of memory even with virtualisation when scrolling HOT 2
- Issue with getIsSomeRowsSelected when using grouping
- [vue table] support for reactivity in Vue-adapter in version 8.20 broke reactive for the old getter `get data()` style HOT 1
- Use of svelte/internal in Svelte 5 HOT 6
- Page sizes that are multiple of 50 don't render new data BUT pagination works
- when i useing thead Grouping. only set subHeader enableColumnFilter work, parent Column didn't work HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from table.