Add column filters on list form columns

[Tcharl]

Overview of the feature request

Could be nice to enhance the list form by adding column filters. The user could for example click on a column label which will transform in an input text, letting the user to filter rows. Could work for pagination when jpafilters are set, but also on frontend side for non-paginated options.

Motivation for or Use Case

I'm pretty convinced that UI improvement would boost jhipster adoption.

• [x] Checking this box is mandatory (this is just to show you read everything)

[Rapster]

The user could for example click on a column label which will transform in an input text, letting the user to filter rows.

Or maybe something as "simple" as Filter Row showcase of PrimeNG: https://www.primefaces.org/primeng/table/filter

[gmarziou]

I'm pretty convinced that UI improvement would boost jhipster adoption.

UI generated by JHipster is mostly no longer relevant due to lack of good tables.

PrimeNG or ag-grid are so much more powerful that I suspect that non trivial projects start by throwing away JHipster tables and replace them by PrimeNG or ag-grid. This should be a question for next survey.

The JHipster team's position so far has always been to avoid such 3rd party UI components and to prefer developing in-house components, this is a mistake in my opinion.

[paris0120]

How to install PrimeNG. I always get conflicts of dependencies.

[gmarziou]

@paris0120 you're off topic with this issue, if you have a question please use stackoverflow.

Anyway, I simply followed their docs. https://www.primefaces.org/primeng/setup

Although, it's a bit old you can have a look at my example: https://github.com/gmarziou/jhipster-ui-libs/commit/cbfbd1854f77b3389582e610c260e73c474b13bd

[Tcharl]

I'm pretty convinced that UI improvement would boost jhipster adoption.

UI generated by JHipster is mostly no longer relevant due to lack of good tables.

PrimeNG or ag-grid are so much more powerful that I suspect that non trivial projects start by throwing away JHipster tables and replace them by PrimeNG or ag-grid. This should be a question for next survey.

The JHipster team's position so far has always been to avoid such 3rd party UI components and to prefer developing in-house components, this is a mistake in my opinion.

We're using bootstrap, aren't we? :-p

[gmarziou]

We're using bootstrap, aren't we?

I can understand you want to avoid PrimeNG because it's too far away from Bootstrap but then is there anything preventing JHipster from using ag-grid with Bootstrap?

At work, we started a project with JHipster 2 years ago and replaced Bootstrap by PrimeNG from day 1 and never regretted it. It's not a big work when you don't rely on user management pages.

[Tcharl]

Not saying anything like this (my personal opinion would have been to mat-ui ;-)), Primeng looks good :-). I guess that the choice was made because of the need of identical UI for Angular, React and Vue. If prime does support it, and it looks it does, we can start integrating some useful components I guess

[gmarziou]

Do you mean Angular Material UI or MUI? Both seem to be specific to a framework.

Both Prime* and ag-grid claim to support all 3 frameworks, although I only tested Angular. Prime* would certainly be a bolder change, ag-grid is more a slight evolution and goes in the direction of picking up off-the-shelf web components (future approach?).

[github-actions[bot]]

This issue is stale because it has been open for too long without any activity. Due to the moving nature of jhipster generated application, bugs can become invalid. If this issue still applies please comment otherwise it will be closed in 7 days