I am using a react table. I want to map through an api and if the data has changed in a cell I want to assign if a new color. I have never worked with react tables so I am not sure how to go about doing this. I want to target the individual cells .
It need to also in in a separate component and I need to just pass to the columns the component eg. Cell: ... Will the work??
Related
I am facing an issue in the agGridReact table where I need to use multiple expand buttons in one column with different data to render. Is there any way to use multiple expand calls and show different data in the next row.
I have a component that displays a table using AgGrid, and the data that is displayed comes from a Redux selector.
I want to render a cell in the table that has a button, which will then perform an action based on the row data.
The primary issue I have, is that when I pass a callback function to the button in the cell renderer, the row data is not populated when it gets called in the parent component. I believe that I need to pass the proper context to the cell renderer so that when it calls the function from the parent component, all of the data is present. However, please correct me if this is incorrect. However, I'm not sure how to properly pass the context given that all of this is happening from a functional component.
Example:
https://codesandbox.io/s/aggrid-redux-context-y49fd
Click on the "Set Row Data" button, which will make the button in the rows appear. Clicking the button will then print out the row data, which will be empty.
I need a way to be able to access the row data from the cell renderer.
Dirty solution
Try to bind this to onExecute when you are setting it to the cell render params:
cellRendererParams: { onExecute: onExecute.bind(this) }
Do you need to access data of all rows, or only single row that the current cell render is rendering? If you need data of the current row only, the AgGrid has already it in props, you can acces it in this.props.data in your cell renderer component.
Have used Expander in one column of React-table. On expanding a different row of table i want to display different subComponents. My subComponent has another react-table. So the issue is when two rows are expanded , the subComponent react table gets the data source acc to the 2nd row and thus it updates the same in the 1st row subComponent as well. I want to have different data sources according to the row.
Also tell how to give Column accessor value with the Expander button in the same cell.
I have given the data dynamically to the subComponent react table that is doin fine.
you have to use React.CreateElement and pass your SubComponent And Separete Store (if exists)
for more information about creating dynamic component see React Site
I would like to use one of the many table/data-grid components available to render a table. However, I am struggling to choose one as I have very specific requirements and I'm not sure if they are supported by them.
Ok so ideally I would like the table to initialise with only column headers (which are populated by data from a database). I would then like to be able to add a row (by clicking on a button), and be able to enter data into the cells and then save the data in that row to my database. The column headers are generated by form but there can feasibly be any number of them. Most of the examples for the various components seem to expect you to already know what your data is before you render the table. But this will not be the case for me.
I was considering Griddle but they don't have an editable cell option yet (it's only part of the roadmap) so unless I create my own custom function, I think that that is out for now.
I was just hoping for some guidance is choosing the best component for what I need!
Thanks for your time
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards