Comments (6)
ok - looks neat enough, semi relay-esque, and definitely better than passing the row data always
however, does couple the row field props to the editor prop names, so we may as a future enhancement want to allow for some mapping there up at the top of the grid. Although possibly its best just to ensure that if your underlying data has {name:{first:'John', last:'Doe'}}
then we map that to row data as {firstName:'John', lastName:'Doe'}
- probably using immutable lens/cursors (or getter and setters)?
from react-data-grid.
+1
This would be a great/necessary feature. I had to use the workaround mentioned in #42 which worked fine, but there should be some documentation on it somewhere.
from react-data-grid.
@DreadfulDeveloper is right, and if you want to use different props for different columns i found out that this works too:
this._columns = [
{
key: 'code',
name: 'Codice',
filterable: true,
sortable: true,
filterRenderer: MyFormatter, // <-- standard formatter
},
{
key: 'id',
name: 'id',
formatter: <MyFormatter customProp={'react-data-grid-rocks'} />, // <-- new formatter
},
];
from react-data-grid.
Just stumbled upon this as well.
from react-data-grid.
Is there an accepted solution for this now? I'm trying to get more than one item from my row data passed to my custom formatter class, and although I can get the value prop corresponding to this column, I can't seem to get hold of the row data (or even another named column)
So I have columns defined as
private columns: ReactDataGrid.Column[] = [
{ name: 'Start', key: 'start', formatter: FormattedDateTime },
{ name: 'End', key: 'end', formatter: FormattedDateTime },
{ name: 'Status', key: 'state', formatter: StatusClass }
];
and I have a row data which includes start,end,state, and xmlOutput and I have a class like this:
class StatusClass extends React.Component<{ value: any, xmlOutput : string }, {showXml : boolean}> {
stuff }
but my xmlOutput is never set. I thought at one point I managed to pass a property called rowData in, but I've been unable to reproduce it and think I might be going mad!
TIA.
from react-data-grid.
I've been able to accomplish this by setting the formatter/editor in a RowRenderer
var RowRenderer = React.createClass({
setScrollLeft: function(scrollBy) {
this.refs.row.setScrollLeft(scrollBy);
},
render: function ( ) {
var colorColIdx = 10;
var row = this.props.row;
var columns = this.props.columns;
var pgc = this.props.getProgramColors(row.style_code); //get list for this item
columns[colorColIdx].editor = <AutoCompleteEditor options={pgc} />
return (<ReactDataGrid.Row className={rowStyle} ref="row" {...this.props}/>)
}
});
And by passing a data accessor method as a prop to the RowRenderer
<ReactDataGrid
{...}
rowRenderer={<RowRenderer getProgramColors={this.getProgramColors}/>}
/>
Hope this helps!
from react-data-grid.
Related Issues (20)
- Crash on click on grouping row when `onFill` is set
- Sorting and filter is not working using react data grid HOT 1
- Cannot read properties of undefined (reading 'parent')
- `onCellKeyDown `does not trigger on header cells.
- react-data-grid css design break when production mode in next.js project. HOT 3
- React Data Grid Ul crashes after running npm run build and npm run start---next.js
- Is there a notes for an updates? HOT 3
- vertical scroll is not working as expected when first column is frozen
- Make Cell Absolute HOT 2
- How can we use the original editOnClick API or implement similar functionality with an existing version? HOT 1
- Columns are sorted when clicking header filters
- Error encountered when decreasing the number of columns using a filter
- Grouped column header does not freeze when scrolling horizontally
- Columns are sorted when space key is down during typing in filters HOT 2
- Rows not rendering in production HOT 1
- Can react-data-grid-addons be released for react 18 !! HOT 1
- Master Detail row height management with divs HOT 1
- @layer compatibility issues HOT 4
- An absolute element inside the grid header cannot extend outside the grid.
- Module parse failed: Unexpected token HOT 1
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 react-data-grid.