Comments (17)
Fixed in 505db8d ([email protected])
from table.
Thanks for finding this bug!
from table.
Can you post your props and data?
from table.
here is the function that creates columns
function getColumns(route) {
const columns = [ 'date',
'total_plays',
'total_views',
'total_time',
'title',
'plays'];
var headers = columns.map(function(header) {
if (header === 'total_time') {
return {
header: titleCaps(header),
accessor: header,
render: props => (
<span>
{convertHours(parseInt(props.value))}
</span>
)
};
} else if (header === 'title') {
return {header: '#1 Title ', accessor: header}
} else if (header === 'plays') {
return {header: '#1 Plays ', accessor: header}
} else if (header === 'date') {
return {
header: titleCaps(header),
accessor: header,
render: props => (
<span>
<Link to={`${route.path}/${props.value}`}>{props.value}</Link>
</span>
)
};
} else if (header === 'title') {
return {
header: titleCaps(header),
accessor: header,
render: props => <span className='number'>{props.value.split(/\s+/).slice(0, 10).join(' ')}</span>,
sortable: false
}
} else {
return {header: titleCaps(header), accessor: header};
}
});
return headers;
console.log(headers);
}
from table.
Looks good to me. What about where you render your table? Maybe set a break point at the line and log some of the variables?
from table.
Here is the chart without the table but once I add table it does not work
from table.
var currentColumns = getColumns(route);
return (<ReactTable columns={currentColumns} manual data={this.state.results} pages={this.state.pageNumber} loading={this.state.loading} onChange={this.handlePage.bind(this)} minRows={0} pageSizeOptions={[
5,
10,
20,
25,
50,
100,
150,
200,
250,
500
]}/>);
from table.
In the default constructor
this.state ={
results: [],
pageNumber: 1,
page: 1,
count: 0,
next: null,
previous: null,
pageSize: 20,
loading: true,
ordering: '-date'};
from table.
Set a breakpoint at the error and copy the current internal state and props of the table. Post them here if you can?
from table.
Found the error. It is because of this import function. It is not transforming the code. What could be a reason for this
from table.
Well that's weird. Very standard import, no?
from table.
export default class SettingsOrgs extends React.Component {
drawTable() {
var columns = [
{
header: 'ID',
accessor: 'id'
},
{
header: 'Full Name',
accessor: 'fullname'
},
{
header: 'Inn',
accessor: 'inn'
},
];
return (
<div>
<ReactTable
data={this.state.items}
columns={columns}
/>
</div>
)
}
render() {
return (
<div className='row expanded'>
<div className="small-12">
{this.drawTable()}
</div>
</div>
)
}
}
Uncaught (in promise) TypeError: Cannot read property 'columns' of undefined
from table.
import React,{Component} from 'react'
import ReactTable from 'react-table'
from table.
I've just encountered same error, with webpack 1. So it's not only webpack 2 related
Passing columns
property to each column solving error, but it's not working like in docs then
from table.
How ? @vladra Please give an example?
from table.
The storybook is working fine with examples similar to yours. Does the Server-side demo work for you?
from table.
Wait. I think I see the problem. I'll have the fix out in 5 minutes.
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.