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.
Related
I want to build a simple app like in picture attached with react js, I just cannot find the right idea of:
How to "select" photos(or item) in an application and have the "cart"-like component appear at the bottom when at least one photo/item is selected(and close and deselect all already selected photo/items) and expand the cart-like component at the bottom when clicked to show what's been already selected.
What is the best approach to this?
P.S I'm new to react with a big idea in mind xD
app's view
This question definitely needs more information, but I will try to point you in the right direction. There are hundred of ways to create the UI/functionality you are describing but here is a very generic overview;
The "items" (Img1-6) looks like a grid of ShopItem components, possibly in a CSS Grid / flexbox. Each ShopItem would probably make use of an onClick method to "do something" when it is clicked - this may involve updating a state (using the useState react hook) somewhere which tells you if a ShopItem is checked or not. It could also potentially use a callback method to do something in the parent when the items are checked.
I imagine that each ShopItem may own its own "checked" state or may update a global state (Such as Zustand or Redux) or a Context (React) when it is toggled on and off. The checked state of a ShopItem would also inform the UI of the component.
The "cart-like" component could be looking at the global state/context/callback from the item component, and could change based on its value and how many checked items there are. (Eg/ checkedItems !== 0 ? show : don't show)
This is just one way in which this UI can be built, if you would like a more specific solution, please edit your question to include code snippets and what you've already tried.
I have a component with some tabs. Each tab selector loads its own datagrid. After a tab has been selected and its datagrid has been loaded, the datagrid should be essentially cached so that toggling away and back to the tab should simply write out the previous datagrid that was loaded/cached. The datagrid entity that gets loaded for each tab/entity essentially looks like this:
<MyDataGrid entity={entity} />
I've wrapped the datagrid component definition with the memo() function like this:
const MyDataGrid = memo((props: IncludeListProps): React.ReactElement => {
debugger;
});
However, the debugger breakpoint is getting hit within the component every time. What is the sequence of steps that you would use to go about troubleshooting something like this?
UPDATE
Providing some additional info based on comments below. A tab strip on top refreshes the display div underneath. So yes the props of MyDataGrid change (eg props.entity.id).
But what I need to do is figure out the best way to cache/memoize each MyDataGrid created per tab. I'm thinking maybe a div collection where each div will be reserved to hold MyDataGrid for a specific tab. Then divs will display inline/none based on the current tab selection. Does this seem like the most straightforward approach?
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,
I have two sibling component.
one component contains textbox,checkbox,dropdown controls in it.
another component contains Kendo Grid.
whenever user clicks on grid row i want to set focus on one of the element in above
component which include textbox.
Approach used:
1.I don't want to use ref as i have multiple controls in one component.
2.I have dynamically added autofocus attribute to input element.
Disclaimer: I am not sure if these solutions are best practices in React
There are 2 approaches for this, both using refs, but with smarter implementations:
Create a wrapper around the inputs and assign refs to it. Whenever you want to focus on an input, simply use wrapperRef.querySelector('[name=yourInput]). Working example: https://codesandbox.io/s/195kkrpvq
Create an object which stores the name of the fields as keys and their refs as values. Simply use this.yourRefsObject[yourInputName].focus() to focus on an input. Working example: https://codesandbox.io/s/61jl7q9v43
Again, I am not certain whether these implementations are best practices, but they should do the job for now
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.