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
Related
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 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 highlight ui-grid row on selection/click, which has six pinned columns?
I am using UI-grid to render my data. Now I have done some functionality on click of grid row, but for it I want to show highlighted row in pinned column, so How can I fulfill my this requirement here?
Finally I found simple solution. that is just do following code.
row.setSelected(true);
Nothing else to do.
I want to use ui-grid with treeView, but in example:
http://ui-grid.info/docs/#/tutorial/215_treeView
it working wrong.
if i click on "+" icon and then click "-" icon - last row going out from grid.
How repear this, or replace to other grid with tree (hierarhical grid with several column and row selections)? Thanks!
I think this may be the alignment issue that was fixed this morning, which occurs when you have filters. The treeView appears to be working correctly today.
If you have an issue that is different than that, could you provide a bit more detail - your description is somewhat unclear on exactly what it is that is wrong.
I need to hide the entire column of the check box (Ext.selection.CheckboxModel). I found out to get the columns of the grid to hide, but the columns does not give the checkbox column.
grid.headerCt.items.getAt(0).hide()
This worked for me in 4.2.2. I used a combination of the other answer by Saki and a little traversing through the DOM because the "getAt0).hide()" solution did not work for me either:
grid.headerCt.items.items[0].hidden = true;