[FEATURE] Table: Add fitler to the table by shahrokni · Pull Request #55 · perses/shared

shahrokni · 2026-02-04T10:56:34Z

Description 🖊️

This PR is moving the filtering section of the Table Panel (from plugin side) into the Table component (shared repo)

As previously discussed, the table and the filter should be logically integrated. Currently, they are treated as separate entities. An investigation of the Table plugin reveals that the filter section was added as a later addition on top of the existing Table component.

The PR

Moves the filter section into the Table component, ensuring they are fully integrated.
Replaces the JSX elements with the MUI

⚠️ To test this feature you need to flip filteringEnabled value

⚠️ This is not a breaking change, as there are no visual regressions. The component's props interface remains unchanged.

Subsequent Changes 🏃🏼

After the PR is merged, and the shared version is updated in the plugin

The filter section from the Plugin side could be removed
The optional filteringEnabled should be set to true

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.
E2E tests are stable and unlikely to be flaky.
See e2e docs for more details. Common issues include:
- Is the data inconsistent? You need to mock API requests.
- Does the time change? You need to use consistent time values or mock time utilities.
- Does it have loading states? You need to wait for loading to complete.

Gladorme · 2026-02-04T13:38:33Z

Nice to move to MUI components, it's better for the coherence.

But I think we should improve the current display too. Maybe not related to this PR, but currently the width is really small + misplaced (not located under the button).

jgbernalp · 2026-02-04T14:20:15Z

But I think we should improve the current display too. Maybe not related to this PR, but currently the width is really small + misplaced (not located under the button).

Agree, the filter somehow does not align with the column, so there is no context of what I'm filtering.

shahrokni · 2026-02-04T14:51:14Z

But I think we should improve the current display too. Maybe not related to this PR, but currently the width is really small + misplaced (not located under the button).

Agree, the filter somehow does not align with the column, so there is no context of what I'm filtering.

For the misalignment I found and opened a an issue yesterday. This is not coming from this change and has been there from the beginning.

Look at this

perses/perses#3835

I am not really sure, what would be the best way to keep them aligned in case the table scrolls.
The filter section has no clue about the scrolled table. :(

I don't want to spend too much time over UI improvements in this task. So, could we think about the misalignment issue later?

jgbernalp · 2026-02-04T15:14:06Z

Yes it was suggested already by @Gladorme. We agree there is an issue, but we know is not part of these changes, it existed before.

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com> Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

shahrokni · 2026-02-05T10:03:34Z

Yes it was suggested already by @Gladorme. We agree there is an issue, but we know is not part of these changes, it existed before.

I improved the size, so it fits the filter header. It has been demonstrated in the screenshots attached to description. There is still an old issue with the hidden dropdown when it gets lengthy. This should be addressed with a separate PR.

It would be great if you could review now.

jgbernalp · 2026-02-05T16:31:37Z

components/src/Table/ColumnFilterDropDown.tsx

+  const values = [...new Set(allValues)].filter((v) => v !== null).sort();
+
+  if (!values.length) {
+    return (


We should render this dropdown inside a Portal, this will avoid the clipping. The table plugin uses it's own implementation which also has this issue. But fixing it here will make it consistent for both logs and table plugins.

jgbernalp · 2026-02-05T16:37:41Z

components/src/Table/ColumnFilterDropDown.tsx

+            position: 'absolute',
+            top: '100%',
+            left: 0,
+            zIndex: 9999,


Suggested change

zIndex: 9999,

zIndex: 1000,

This will make it above other elements but below the sticky header, when using the Portal

const [filterAnchorEl, setFilterAnchorEl] = useState<{ [key: string]: HTMLElement | undefined }>({});

I was checking your comment when I realized there is no usage of this sate in the code. This is coming from the original code. Even in the original code this line has no usage! Am I mistaken, is there any usage that I am missing?! filterAnchorEl is never used for any kind of calculations. I think, the dropdown used to be a popover. Later changed, and this line became obsolete. I am not sure though.

Update

OK, a bit of this a bit of that! I guess the original idea was to use an anchor and MUI popover.
Looks nice!

⚠️ IMPORTANRT: Popover is a kind of modal. It covers the entire page, so elements beneath the Popover could not be reached as long as the Popover is not closed.

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

Gladorme · 2026-02-06T16:38:48Z

There is an issue when there is a lot of columns, you can scroll content (horizontal scroll). But you can't scroll filtering. And like it's not linked, it will hard to tell which button is sorting what :/

I guess it will not be easy 😅 I like how MUI is doing it the filtering (display icon if filtering enabled next to header + setup taking all place necessary), but I don't know if we can/want do the same here

Example, I have more than 10 columns and you can only see ~6 filters

jgbernalp · 2026-02-06T17:06:59Z

Yes this just uncovered a big issue with our current table, we probably should migrate and use a DataGrid instead which already has all these features.

shahrokni force-pushed the feat/add_filter_to_table_component branch 3 times, most recently from e30243a to 6052c97 Compare February 4, 2026 13:07

shahrokni requested review from andreasgerstmayr and jgbernalp February 4, 2026 13:10

shahrokni marked this pull request as ready for review February 4, 2026 13:10

shahrokni requested a review from a team as a code owner February 4, 2026 13:10

shahrokni force-pushed the feat/add_filter_to_table_component branch 2 times, most recently from 561a827 to 3c55b41 Compare February 4, 2026 17:36

shahrokni force-pushed the feat/add_filter_to_table_component branch from 3c55b41 to 9aed6a8 Compare February 5, 2026 09:24

jgbernalp reviewed Feb 5, 2026

View reviewed changes

[BUGFIX] Table: Use popover for the table filter dropdown

c32a6b7

Signed-off-by: Mahmoud Shahrokni <seyedmahmoud.shahrokni@amadeus.com>

shahrokni requested a review from jgbernalp February 6, 2026 12:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] Table: Add fitler to the table#55

[FEATURE] Table: Add fitler to the table#55
shahrokni wants to merge 2 commits intomainfrom
feat/add_filter_to_table_component

shahrokni commented Feb 4, 2026 •

edited

Loading

Uh oh!

Gladorme commented Feb 4, 2026 •

edited

Loading

Uh oh!

jgbernalp commented Feb 4, 2026 •

edited

Loading

Uh oh!

shahrokni commented Feb 4, 2026 •

edited

Loading

Uh oh!

jgbernalp commented Feb 4, 2026

Uh oh!

shahrokni commented Feb 5, 2026 •

edited

Loading

Uh oh!

jgbernalp Feb 5, 2026

Uh oh!

jgbernalp Feb 5, 2026 •

edited

Loading

Uh oh!

shahrokni Feb 6, 2026 •

edited

Loading

Uh oh!

Gladorme commented Feb 6, 2026 •

edited

Loading

Uh oh!

jgbernalp commented Feb 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

shahrokni commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 🖊️

The PR

Subsequent Changes 🏃🏼

Checklist

UI Changes

Uh oh!

Gladorme commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jgbernalp commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shahrokni commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jgbernalp commented Feb 4, 2026

Uh oh!

shahrokni commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jgbernalp Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

jgbernalp Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shahrokni Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Update

Uh oh!

Gladorme commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jgbernalp commented Feb 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

shahrokni commented Feb 4, 2026 •

edited

Loading

Gladorme commented Feb 4, 2026 •

edited

Loading

jgbernalp commented Feb 4, 2026 •

edited

Loading

shahrokni commented Feb 4, 2026 •

edited

Loading

shahrokni commented Feb 5, 2026 •

edited

Loading

jgbernalp Feb 5, 2026 •

edited

Loading

shahrokni Feb 6, 2026 •

edited

Loading

Gladorme commented Feb 6, 2026 •

edited

Loading