React material ui DataGrid component. i don't want columns, just want to pass row's and render and show rows only. how can it be done?
hide true is not helping because it is not even rendering grid
please provide some alternative
If I understand correctly, you would like to show a DataGrid's rows but leave off the headers of the columns. It doesn't seem that MaterialUI provides an option for that directly, but you can achieve something like it by using the headerHeight prop (docs) and setting it to 0.
<DataGrid
rows={rows}
columns={columns}
headerHeight={0}
/>
You still do need to specify what the columns are (with the columns prop), so that MaterialUI knows how to render your rows given the raw data. If you don't need columns at all and really just want a list, you could try using the List component instead.
Related
Is it possible to achieve this, creating data grid with MUI v5 and rendering some kind of select or drop-down or input field, with which the name of the column will be changed dynamically, I've tried a lot of variants but in the end something gets buggy or the component breaks completely.
I have a grid with the multiColumnSort property to be able to order the data depending on the columns which were clicked. The problem is that I can only have 3 columns selected. In the ExtJS docs is a hint which indicates to use the 'Ext.util.Collection' to adjust the multiSortLimit property. However, I do not know how to use the 'Ext.util.Collection' for the grid.
The Link to the docs: https://docs.sencha.com/extjs/6.5.3/classic/Ext.util.Collection.html#cfg-multiSortLimit
You need to reference to Ext.util.Collection in Store.
You can do it by : store.getData() and next use setMultiSortLimit on it to change multiSortLimit.
store.getData().setMultiSortLimit(5);
I have been struggling trying to achieve something like this using UI grid but have failed miserably.
I tried using UI Grid expandable row option as well as UI grid tree option.
http://ui-grid.info/docs/#!/tutorial/216_expandable_grid
https://github.com/angular-ui/ui-grid/issues/2104
Tree view in UI Grid has something similar but expanding row has same now of columns as the header.
http://ui-grid.info/docs/#!/tutorial/215_treeView
Can someone guide me to achieve something like this.
and when I click on a particular row I get something like this
Basically the top header and expanded field corresponding to header.
If someone has some other table option where I can achieve something like this?
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 have an array of objects that I want to show in ng-grid. Each row has a boolean property isVisible. In the ng-grid I want to show only the rows where isVisible is true. The other rows should be completely hidden.
I have tried using a rowTemplate and databinding a ng-show to isVisible. That hides the content of the row, but leaves the actual row in place, showing an empty row.
I have tried using filterOptions, but can't figure out the correct syntax to do such a filtering. I couldn't find any good documentation on how to set it.
I have even tried modifying the gridTemplate in the ng-grid source, by trying to add a filter on ng-repeat=\"row in renderedRows\", but I haven't gotten that to work either.
I guess I could modify the array itself, by temporarily removing rows, but I would prefer not to do it that way, since I have to be able to show the rows again (It is actually an expander that I'm doing, that should hide/show sub-rows)
Try also conditionally setting the height of the row in the template to '0' based on isVisible or use a CSS class with ng-class. Play with the CSS of it until you get the desired effect and then you can use that in your template.
This sounds like the type of thing that would benefit from using height and CSS animations actually so it opens and closes with an animated style. If you have a jsFiddle sample I'd be happy to try and help.
Edit: After looking at how the grid actually lays out it's rows (absolutely positioned) you only really have two options I can think of:
1) Filter the data you are binding to the grid through a function like dataVisible() but keep the full data list internally in the controller so you can show/hide easily
2) Submit a patch to the ng-grid project (or fork it) with the filtering capability you are looking for. Out of the box it doesn't appear to support this scenario.