netbox
netbox copied to clipboard
netbox-community
Closes: #9583 - Add column specific search field to tables
Closes: #9583 - Add column specific search field to tables
The plan is to use the existing filterset to generate form fields on the table column headers to allow for inline-filtering using HTMX requests
Progress
- Fields are generated for
- HTMX requests are sent and account for both
- Integrate with "quick search"
- Works with custom fields
- Allow dropdown to float outside of the parent div
Todo
- ~~Add input fields for "name"~~ Not needed - Quick search is suitable for this
- ~~Fix filter float (Move before field name perhaps)~~ Done
- ~~Add show/hide filter (Optional)~~ Outside of scope
Another concern: There's no way to quickly discern when a column filter has been applied.
Another concern: There's no way to quickly discern when a column filter has been applied.
May be able to do a swap on the icon and change it out to indicate it is filtered.
Another concern: There's no way to quickly discern when a column filter has been applied.
May be able to do a swap on the icon and change it out to indicate it is filtered.
It does have the filtering chits if you refresh the page, it just doesn't show them when you select the filters - it should be changed to show the filtering chits when you select the filters.
There is a minor UI issue:
- Click one of the filters so it drops-down.
- Click on another of the filters so it drops-down.
Both filters get un-selected (not dropped down). It opens up the drop-down for the second filter, then closes the drop-down for the first filter, then closes the drop-down fro the second filter.
Also: Suggestion (not sure if this is just the way the components work) when you drop-down a filter it shows the small selection box which you then have to click to see the list. IMHO it would be nicer if when you first drop-down the filter it would show the list as well.
Another minor UI issue - if you select multiple items it will get clipped in the window - the multi-select on edit pages (like tags) handles this by going to multi-line which should work here as well.
Suggestion - could we make the funnel icon smaller (use a smaller font-size for it) I think it would be just as visible and would reduce the header height to what it was before.
It does have the filtering chits if you refresh the page, it just doesn't show them when you select the filters - it should be changed to show the filtering chits when you select the filters.
This is outside of the htmx container, so it doesn't get refreshed, I am not sure if there is an easy way to do this. Perhaps extracting the filtering chits in the same request, but any suggestions are appreciated.
There is a minor UI issue:
- Click one of the filters so it drops-down.
- Click on another of the filters so it drops-down.
Both filters get un-selected (not dropped down). It opens up the drop-down for the second filter, then closes the drop-down for the first filter, then closes the drop-down fro the second filter.
This is just the way the dropdown works. When the dropdown closes, it reloads the htmx container, which includes all of these fields.
Also: Suggestion (not sure if this is just the way the components work) when you drop-down a filter it shows the small selection box which you then have to click to see the list. IMHO it would be nicer if when you first drop-down the filter it would show the list as well.
I have fixed this. Removing btn did the trick
Another minor UI issue - if you select multiple items it will get clipped in the window - the multi-select on edit pages (like tags) handles this by going to multi-line which should work here as well.
Should be fixed via a max-width CSS attribute on the dropdown menu.
Suggestion - could we make the funnel icon smaller (use a smaller font-size for it) I think it would be just as visible and would reduce the header height to what it was before.
Done
Another concern: There's no way to quickly discern when a column filter has been applied.
Should pop the badges now
Still some weirdness - If I select a filter then I do a page refresh I get doubling up of the chits (see below) I tried it on feature branch and this doesn't happen.
If I select a filter (works correctly) then click on another filter again (as I want to change what it is filtering on) I get a blank drop-down so I can't actually select anything else. Sort of weird, possibly a timing thing as if I click around to other filters after a couple seconds they start rendering correctly
If you do select a filter (I did site -> Butler Communication) then click the checkbox next to Name (for select all in list) it doesn't select anything in the list. I also tried on feature and it works correctly.
If I select a filter (works correctly) then click on another filter again (as I want to change what it is filtering on) I get a blank drop-down so I can't actually select anything else. Sort of weird, possibly a timing thing as if I click around to other filters after a couple seconds they start rendering correctly
I think this is simply a timing thing as the HTMX re-renders the whole table, including headers.
Not sure if there is a way around this, an "easy" way would be to return the whole table but only swap the tbody on operations surrounding the column filters/search. I think the only way to handle this would be to break up the HTMX request into multiple more components with some OOB swaps, however that doesn't seem to work as intended.
If you do select a filter (I did site -> Butler Communication) then click the checkbox next to Name (for select all in list) it doesn't select anything in the list. I also tried on feature and it works correctly.
I can't recreate this. I am able to select the full list as intended. We might need some additional testing on this one.
Still some weirdness - If I select a filter then I do a page refresh I get doubling up of the chits (see below) I tried it on feature branch and this doesn't happen.
This one should be fixed. See comments for other two. Open to suggestions on those.
This is looking really good Dan, I just see one minor issue - if you select a filter, then click the select all (next to name) it will show the "Select all xx devices matching query" the count is all the items in the table, not the filtered count. If you go through the filters tab and do the filter that way, then click the select all it will not show the "Select all xx..." message.
This is looking really good Dan, I just see one minor issue - if you select a filter, then click the select all (next to name) it will show the "Select all xx devices matching query" the count is all the items in the table, not the filtered count. If you go through the filters tab and do the filter that way, then click the select all it will not show the "Select all xx..." message.
Just checked, this bug is present in both feature and develop (it is a long standing bug I believe, just maybe no issue for it).
I think it would be pretty easy to fix but we should track it as a separate bug IMO.
@DanSheps I'm not seeing the behavior with the select-all on feature (see screenshot), I'm only seeing it on your branch. I just go to filter tab, select a filter and then do the select-all button. If I do select-all after doing the filtering by the drop-downs, that is where I see it. What are the steps you are using when seeing it on feature?
Do a quick search, not a filter. The quick search does an HTMX request on the table only.
The issue is the edit div doesn't get updated because it is outside the scope of the htmx request.
We need to do an OOB swap for that as well.
This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.
This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.
This PR has been automatically marked as stale because it has not had recent activity. It will be closed automatically if no further action is taken.