Is it able to use agSetColumnFilter in aggrid？

[tz301]

Question

I try to set agSetColumnFilter in ui.aggrid, but seems not working.

[falkoschindler]

Hi @tz301,

Unfortunately, I think agSetColumnFilter is an enterprise feature and therefore not natively supported by ui.aggrid.

[tz301]

Hi @falkoschindler,

Yeah, I have seen that it is an enterprise feature.

Is there any substitute of agSetColumnFilter, or any ideas to implement this kind of filter? Maybe it's ok to use it outside aggrid box, and connect it's change to update aggrid rows visibility.

I have list some core features of it:
(1) scroll area and list all values ordered
(2) multiple select
(3) select all choice
(4) search box
(5) expansion

[falkoschindler]

Sure, you can create a separate filter like this:

rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': 'Carol', 'age': 42},
    {'name': 'David', 'age': 12},
    {'name': 'Eve', 'age': 34},
    {'name': 'Frank', 'age': 67},
]

grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': rows,
})

filters = {
    'all': lambda _: True,
    'children': lambda row: row['age'] < 18,
    'adults': lambda row: row['age'] >= 18,
    'seniors': lambda row: row['age'] >= 65,
}

def handle_selection(e: events.ValueChangeEventArguments):
    grid.options['rowData'] = [row for row in rows if filters[e.value](row)]
    grid.update()

ui.select(list(filters), value='all', on_change=handle_selection)

[tz301]

Hi @falkoschindler,

As you suggested, I have impletemented one below. ui.select seems not elegant if I have many rows, so I use ui.dropdown_button with checkbox.

from collections import defaultdict

from nicegui import ui

rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': 'Carol', 'age': 42},
    {'name': 'David', 'age': 12},
    {'name': 'Eve', 'age': 34},
    {'name': 'Frank', 'age': 67},
    {'name': 'Abe', 'age': 18},
    {'name': 'Celia', 'age': 21},
    {'name': 'Edith', 'age': 42},
    {'name': 'Elva', 'age': 12},
    {'name': 'Alice', 'age': 34},
    {'name': 'Carol', 'age': 67},
    {'name': 'Jessica', 'age': 18},
    {'name': 'Laura', 'age': 21},
    {'name': 'Polly', 'age': 42},
    {'name': 'Rosalie', 'age': 12},
    {'name': 'Sheila', 'age': 34},
    {'name': 'Thea', 'age': 67},
]

grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': rows,
})


class CustomSetColumnFilter:

    def __init__(self, rows):
        names = sorted({r['name'] for r in rows})
        self._name_to_row = defaultdict(list)
        for row in rows:
            self._name_to_row[row['name']].append(row)

        with ui.dropdown_button('Name'):
            with ui.column().classes('gap-0'):
                self._all = ui.checkbox('(Select All)', value=True)
                self._choices = list()
                for name in names:
                    self._choices.append(ui.checkbox(name, value=True))

        self._connect()

    def _connect(self):
        self._all.on('click', self._on_click_all)
        for choice in self._choices:
            choice.on('click', self._on_click_choice)

    def _on_click_all(self):
        for choice in self._choices:
            choice.set_value(self._all.value)
        self._show_selected_names()

    def _on_click_choice(self):
        self._show_selected_names()

    def _show_selected_names(self):
        selected_rows = []
        for choice in self._choices:
            if choice.value:
                selected_rows.extend(self._name_to_row[choice.text])

        grid.run_grid_method('setRowData', selected_rows)


CustomSetColumnFilter(rows)
ui.run()

It works well.

Then I have two questions.
(1) How to add a search box in the button?
(2) How to control the max height of the dropdown scroll area, it seems too long.

[falkoschindler]

Here's a refactored version of your code, including a content class "h-64" for the dropdown button and an input element for toggling the visibility of individual checkboxes:

rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': 'Carol', 'age': 42},
    {'name': 'David', 'age': 12},
    {'name': 'Eve', 'age': 34},
    {'name': 'Frank', 'age': 67},
    {'name': 'Abe', 'age': 18},
    {'name': 'Celia', 'age': 21},
    {'name': 'Edith', 'age': 42},
    {'name': 'Elva', 'age': 12},
    {'name': 'Alice', 'age': 34},
    {'name': 'Carol', 'age': 67},
    {'name': 'Jessica', 'age': 18},
    {'name': 'Laura', 'age': 21},
    {'name': 'Polly', 'age': 42},
    {'name': 'Rosalie', 'age': 12},
    {'name': 'Sheila', 'age': 34},
    {'name': 'Thea', 'age': 67},
]

grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name'},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': rows,
})

def update_rows():
    rows_by_name = {row['name']: row for row in rows}
    grid.run_grid_method('setRowData', [rows_by_name[name] for name, checkbox in checkboxes.items() if checkbox.value])

def toggle_all():
    for checkbox in checkboxes.values():
        checkbox.value = all_checkbox.value
    update_rows()

with ui.dropdown_button('Name').props('content-class=h-64'):
    with ui.column().classes('gap-0'):
        search = ui.input('Search').classes('p-4')
        all_checkbox = ui.checkbox('(Select All)', value=True, on_change=toggle_all)
        checkboxes = {
            name: ui.checkbox(name, value=True).on('click', update_rows)
            .bind_visibility_from(search, 'value', lambda value, name=name: value.lower() in name.lower())
            for name in sorted({row['name'] for row in rows})
        }

[tz301]

Hi @falkoschindler,

That's great! I will mark that as right answer.

Some improvements below:

(1) Change the search box as below, so that when typing backspace to empty, all selections will back to visible.

.bind_visibility_from(search, 'value', lambda value, name=name: value.lower() in name.lower()) or not value

(2) Combined with #2843, in which aggrid's external filter will be used to set visibility, instead of reset the whole row data.