How to change the position of Column Selector in Data Grid 2?

0
I am using the Data Grid 2 widget to display some values. The column selector is a really helpful functionality that helps the user control what column to show and what column to hide. But because it is present at the very end of the grid, it can be easily overseen and defeats the purpose. Is there a way to show this column selector at the start of the data grid 2 widget? Or as the first column?
asked
2 answers
0

Hi Ridhwik,

 

This could be done with some JS but would be very complicated and I’m not too sure it would be worth your time.

 

To point you in the right direction,

  1. add a html snippet at the bottom of your page set to javascript with a querySelector for the eye icon and then move it to the position you want it in https://stackoverflow.com/questions/3357575/how-to-move-html-element
  2. I’m not too sure if the popup will move with the position with the eye so you might also need to add a mutation observer to your index.html file to listen for when the popup appears and then translate to the correct position for the eye.
answered
0

Hi Ridhwik,

 

you can try to add this class to your datagrid 2. 

 

.columnSelectorLeft .tr:first-of-type [aria-label="Column selector"] .column-selector-content {

    position: fixed;

    left: 258px;

    top: 82px;

}

 

 

answered