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?
Related
I'm looking to implement "column selection" / "highlighting" with the MUI DataGrid. When you click on a column I want to highlight the whole column. Has anyone done this before?
I was able to come up with this: https://stackblitz.com/edit/react-wzrysy?file=demo.tsx
I'm using Material Table at the moment and am having difficulty customizing the position of the selection text (presented when one or more rows are selected via the checkbox).
Looking at the documents, I can see that the toolbar is overridable (https://material-table.com/#/docs/features/component-overriding), however the examples show simpler changes e.g. how to change the background color. I wonder if it's possible to separate the selection text from the toolbar and render it in a different location, like the below picture demonstrates.
Does anyone know if this is possible?
In the end, I turned off the row selection text in the toolbar by using showTextRowsSelected: false
I then made a custom footer using the row data presented by the onSelectionChange handler.
Here is the code sand box. I am trying to hide a certain column after the user clicks any cell in the data grid. Right now, I put columns of data into const [cols, setCols] = React.useState(columns); I just modify use the setCols to modify hide attribute in the cols data. I have been trying to find a proper way to achieve this, however, the paid version of material ui have this feature and during the search on google, It seems like this is the only way to achieve the goal. I just want to check if there is another another potential approach to achieve my goal. Thanks!
I have just started with angularjs. Just wanted to know that if it is possible to create a sub grid inside another ng-grid. There would be some links in a column of the grid and when I click a particular link a grid corresponding to that link should be formed inside the already existing grid.The original grid would be having say 5 columns while the new grid will have say 4 columns. So something on the lines of colspan or something similar is what I look for.
If you are open for writing Angular Directive then you can use any grid ,other than ng-grid which has subgrid feature.
I know like Kendo Grid has subgrid feature and jqgrid has subgrid feature. I wrote a Grid using Google Closure library , this also has subgrid feature.
If I understand your question, you need something like master/details inside grid, it not part of base functionality. nggrid has fixed row height, for virtual scrolling purpose. On our project we have created custom grid plugin base on nggrid
Solution that we used is:
write custom sort function, which populate duplicated rows always below main
when we click expand button we duplicate current row n-times depend on subgrid height
in main row we create css overlay container which hides duplicated rows
load overlay container content via ajax
When we click hide button, we hide overlay, and remove duplicated rows.
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.