I want to use React Data Grid with the react-infinite-scroll-component, is there any possibility to use it together.
The reason I want to use together to utilize the advantage of data grid features.
I tried to use "infinite scroll with scrollableTarget (a parent element which is scroll-able)" but ReactDataGrid will be as child not as parent. Any Solutions ?
If this is not possible then can I use same sort of featured data grid if available inside the infinite component.
Thanks,
Related
In my application there are four tabs. Each tab contains, different tables for different set of data. I have implemented a modal and search functionality on 1st tab. How to replicate it without much code repetition.
You have few options:
Create a component which will be the exact styles in all of the tables.
Create a component with className (or any other style) prop, which will look different inside each table.
Create customHook which will be used to search & filter, and use it's exported variables inside your component - here logic will be the same (and the same code), but styles and/or behavior will be different.
You have a variable that allows you which tab to render. Use this variable to figure out which table to search on. The modal instead you have to keep it off the tabs so that you can reuse it properly (global position respect tabs)
Add Switch statement if you want handle the situation (based on this variable).
For the future, post code. We can help you with more ease and less time
I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
i like to develop a simple tooltip component in react.js
the tooltip gets defined like so in e.g. App.jsx:
<TooltipLink>Hover over me
<Tooltip>I am the Tooltip content</Tooltip>
</TooltipLink>
My question is: What is the best way of TooltipLink and Tooltip to talk to each other?
They are nested but I cannot use props because they are not nested directly in the component itself. Also, I don't want to use the parent (e.g. App.jsx) to manage the communication between TooltipLink and Tooltip because I want them to be self-contained.
I thought about refs but when i define a ref inside the Tooltip component then TooltipLink does not know about it (I assume because refs only work when components are nested inside the components themselves).
I could of course use simple DOM-programming for TooltipLink and Tooltip to communicate (e.g. use e.target when the user hovers over TooltipLink and then find its first child) but I thought there must be a more react-y way...
You have 3 options:
cascading props in the whole hierarchy
using redux
using the context API
I prefer to use redux, because the context API is not officially supported (breaking changes may happen, like in react 16.3). Cascading props is not really beautiful but may be convenient for small apps. (<MyComponent {...props}>)
How can I implement row details and expanding/collapsing of custom details component using react-data-grid?
I have table of users and I want to be able to see user details after click/double click on the user row. Something like this: http://demos.telerik.com/kendo-ui/grid/detailtemplate . It is possible using this component?
There is an example for React similar to the jquery version of the Kendo grid. The idea is that you can now use React Components for the Details. For example you may place a another grid into the template Grid to get hierarchy.
class DetailComponent extends GridDetailRow {
render() {
return (
<Grid data={this.props.dataItem.details}>
</Grid>
);
}
}
// ...
// ...
<Grid
detail={DetailComponent}
expandField="expanded"
expandChange={this.expandChange}
>
this is one of the maintainers of react-data-grid.
We consider the Kendo example to represent 2 different features:-
the ability to nest data in an expandable tree view
the ability to render any component (e.g. a sub-grid) as that child view
At the moment, we only have support for the former (see http://adazzle.github.io/react-data-grid/examples.html#/tree-view)
Nested Grids is something that is requested often, but unfortunately for now we do not currently support it. However, this may change in future.
HTH
#jpdriver
There are many ways to do, but the simplest maybe you can set the state of the component with the key of the cell clicked, and creating the component in a function, pass the value if should be collapsed or not, and return the collapsed or not component of that cell and render it.
I'd like to be able to generate a component from within a template. The use case for it is that when I generate a row in a DataView I'd like to be able to incorporate buttons and/or other components (maybe even a nested grid) to the rendered items.
So far everywhere I look all I see is a template calling another template. Is there a way to do what I'd like (generate component instead of just plain html) from an XTemplate?
Since an XTemplate is just used for generating markup to be inserted into the DOM, it alone is not enough to create components -- Components do have an underlying DOM element (through component.el.dom), but also exist as JavaScript objects in browser memory with other methods and properties.
It is possible to accomplish what you are asking through several different ways... you can use the XTemplate to generate the markup, and use the Component.applyTo config option to create a Component object in memory that is linked to the DOM element from your template. Of course, you will have to wait until the template is applied and then create a component with applyTo set to the correct DOM element.
You could also extend the XTemplate class to do the same thing just mentioned, but wrapped up in the applyTemplate stuff. I am pretty sure that Ext does not have a built-in way for the templates to create components -- so far they just create HTML.