[question] Inserting an id to a column header filter about mui-x HOT 9 CLOSED

Here's an example where I reused the same source file and added an id same as colDef.field on the root div: https://codesandbox.io/s/loving-moon-t46z24

Hope it fulfills your need.

from mui-x.

Hey @Lioralon5,
Could you provide more details on how you are inserting the ID and what's its use?
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

from mui-x.

Hey @MBilalShafi

In this picture you can see the input fields I am talking about. They are activated with the "unstable_headerfilters" prop.

I am trying to insert an id to those elements:

I was not able to recreate the case in the code sandbox because I am using the pro plan comonent "DataGridPro"

from mui-x.

Thanks for the information.

You could use the DataGridPro in the codesandbox (only downside is, it will show watermark)
Could you try and update this codesandbox example (uses Pro) with a minimal reproduction of your problem?

Also, do you intend to use the injected id for some DOM manipulation or testing or some other purpose?

from mui-x.

@MBilalShafi Thank you for th quick replys.
The id is requested by our QA team that need it for automated testing with selenium.
Here is the sandbox: https://codesandbox.io/s/datagridpro-starter-forked-cll3hw
I just added two props, one to activate the filters and the other to insert the id. But with this way each input field has the same id, and I want them to be unique (and consistent)

from mui-x.

Just wondering if you could just use already available selectors to access the header filter cell, or is there a specific reason to use id? It may save you the hassle of going ahead and adding an id to each cell you need to test.

For example:
document.querySelector('[aria-rowindex="2"] [data-field="id"]') would give you a header filter cell for the column with field id.

Sidenote: aria-rowindex represents the indexes starting from the header row (1, 2, ...). If you are using column grouping, you might need to target a different row index.

from mui-x.

@MBilalShafi You are right we can do that, we can use XPATH as well instead of id, but I was wondering if it's possible to insert an id directly to those elements?

from mui-x.

I am not aware of another direct way to do it. You could pass your own header filter cell slot with the additional logic (reusing the original one with the custom changes could be a feasible idea)

from mui-x.

@MBilalShafi Yeah I thought about that, but how do I actually reuse the original one and just add an id prop to it?

from mui-x.