[Ultima] filterDisplay="row" does not work with ColumnGroup in a Datatable

[AnkitKapur11]

I had a discussion topic already running on primefaces forum but it has now been moved to read only, so pasting the link to the discussion.
https://forum.primefaces.org/viewtopic.php?f=72&t=81849&sid=d8dc2329cec6a8dcc2af5856c70e82ca

When we try to use a datatable with filterDisplay="row" and inside the headerColumnGroup we use ColumnGroup then none of the filters appear.
PrimeReact version 9.6.0 and Ultima version 9
Code block showing the same:
https://codesandbox.io/s/primereact-demo-forked-wxvc73?file=/src/App.js

[habubey]

Hi there! I think this is what you are looking for?
https://stackblitz.com/edit/react-szwyss-osqzwu?file=src%2FApp.js

[AnkitKapur11]

Hi,
Not this. My entire application uses filterDisplay="row" so I would like to stick with it. I had made some changes in the code you had earlier provided and shown that filterDisplay="row" and ColumnGroup don't work together. Please refer to the below URL:
https://stackblitz.com/edit/react-szwyss-plcq9v?file=src%2FApp.js
In this URL whenever I use columnGroup to split my columns I am unable to use the basic filter using filterDisplay="row".

[atakantepe]

Hi, I've checked your issue, and I will redirect your issue to our core team. I think adding the row filter causes an issue with the column group, as you said. I found a workaround. I hope it will solve your problem.

I am not in the PrimeReact core team nor a React guy 😁 but I tried my best. I will check with the core team when it is possible. You can check my solution here. You can adjust for your needs from here.
➡️ https://stackblitz.com/edit/react-szwyss-m1haza?file=src%2FApp.js

Let me know if it solves your problem.👍

[atakantepe]

Hi @AnkitKapur11, any updates on this issue you have? Has the solution worked? If it did, you can mark this discussion as answered. Thanks

[AnkitKapur11]

Hi,
This resolution would work but I want a solution from the core team wherein a can use the provided filter property rather than creating my own. If I have to create my own filter like this then there won't be any use of buying a theme.

[atakantepe]

To my knowledge, you can use filters with column groups, but filterDisplay="row" is causing the issue. I will talk about this with the team today, and maybe we can open a feature request.

[cagataycivici]

PrimeReact Core forum would be better place since it is not related to Ultima.

[AnkitKapur11]

Can you please direct this issue to the core team.

[mertsincan]

Hi @AnkitKapur11, could you please try it with the latest PrimeReact version? If the problem persits, could you please create a Github issue with a sample stackblitz link for us to replicate? Thanks a lot for your understanding! For now, closed.

[PRASHIL-PATEL]

Hello everybody @AnkitKapur11 @atakantepe @cagataycivici @mertsincan @habubey ,
I'm facing the same problem today, after research from everywhere i can't able to solve this issue but before half hour i am trying by my self i got an idea that i will share here with you all,

here is DataTable

<DataTable value={locksGridData} editMode="row" onRowEditComplete={onRowEditComplete} headerColumnGroup={headerGroup}> <Column field="name" header="Lock"></Column> <Column field="from" header="From"></Column> <Column field="to" header="To" editor={(options) => textEditor(options)}></Column> <Column field="status" header="Status" body={statusBodyTemplate}></Column> <Column header="Action" rowEditor={true}></Column> </DataTable>

and here is column group

const headerGroup = ( <ColumnGroup> <Row> <Column header="Lock" /> <Column header="Price" colSpan={2} /> <Column header="Status" rowSpan={2} /> <Column header="Action" rowSpan={2} /> </Row> <Row> <Column header={filterTemplateLockName} /> <Column header="From" /> <Column header="To" /> </Row> </ColumnGroup> );

const filterTemplateLockName = () => { return ( <InputText value={filterReq.searchText} placeholder='Search by lock name' onChange={(e) => setFilterReq(prev => ({ ...prev, searchText: e.target.value, pageNumber: 0 })) } /> ); };

also if you want filter button then right filter in tag like this

see the output here.

please response if your problem is solve after this suggestion