Table - show and hide columns by dropdown or select

[miqsoft]

Question

Hey,

I'm trying to create a table, where a user can choose which columns of the table should be shown by clicking on elements of a dropdown. In Quasar this is done using a v-model. I tried to do it but failed - If any of you have an idea how it can be done I would be very grateful!

Thanks in advance for all that have a look into it :)

[falkoschindler]

Hi @miqsoft, can you please share what you already tried? This might help to understand the problem more quickly.

[miqsoft]

Hey @falkoschindler,

today I got some code working, which enables a user to hide specific columns by switches.

I still want to change it in a way, such that the columns can be selected by a dropdown including checkboxes instead of the switches at the bottom.

Here a picture that shows better what I want to achieve than my explanation:

The code I have so far is the following:

from nicegui import ui

class CustomTable:
    ui_self = None
    switch_button_all = None
    switch_button_columns = []

    # contains information about the actual shown columns of the table
    columns_shown = {
        'name': True,
        'age': False,
    }
        
    columns = [
        {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True},
        {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
    ]
    rows = [
        {'id': 0, 'name': 'Alice', 'age': 18},
        {'id': 1, 'name': 'Bob', 'age': 21},
        {'id': 2, 'name': 'Lionel', 'age': 19},
        {'id': 3, 'name': 'Michael', 'age': 32},
        {'id': 4, 'name': 'Julie', 'age': 12},
        {'id': 5, 'name': 'Livia', 'age': 25},
        {'id': 6, 'name': 'Carol'},
    ]

    def __get_shown_columns(self):
        """
            get a list of the field names of actual shown columns
        """
        shown_columns = []
        for c in self.columns:
            if c['field'] not in self.columns_shown.keys():
                shown_columns.append(c)
            elif self.columns_shown[c['field']]:
                shown_columns.append(c)
        return shown_columns

    def __show_hide_column(self, value, column_name):
        """
            show/hide a specific column
        """
        self.columns_shown[column_name] = value['args']
        self.ui_self._props['columns'] = self.__get_shown_columns()
        switch_values = [self.columns_shown[c] for c in self.columns_shown.keys()]
        if all(switch_values):
            self.switch_button_all.set_value(True)
        if False in switch_values:
            self.switch_button_all.set_value(False)
        self.ui_self.update()

    def __show_hide_all(self, value):
        """
            show/hide all columns
        """
        self.columns_shown = {c: value for c in self.columns_shown.keys()}
        if value['args']:
            self.ui_self._props['columns'] = self.columns
            for s in self.switch_button_columns:
                self.columns_shown = {c: True for c in self.columns_shown.keys()}
                s.set_value(True)
        else:
            for s in self.switch_button_columns:
                self.columns_shown = {c: False for c in self.columns_shown.keys()}
                s.set_value(False)
            self.ui_self._props['columns'] = []
        self.ui_self.update()


    def create(self):
        """
            creates the table
        """
        with ui.table(title='experiments', columns=self.__get_shown_columns(), rows=self.rows,
                      pagination=10).classes(
                'w-100') as table:
            self.ui_self = table
            with table.add_slot('top-right'):
                with ui.input(placeholder='Search').props('type=search').bind_value(table, 'filter').add_slot('append'):
                    ui.icon('search')

            with table.add_slot('bottom-row'):
                self.switch_button_all = ui.switch('show all')
                self.switch_button_all.set_value(False)
                for c in self.columns:
                    field = c['field']
                    if field in self.columns_shown.keys():
                        switch = ui.switch(field)
                        switch.set_value(self.columns_shown[field])
                        switch.on('update:model-value', lambda e, c_name=field: self.__show_hide_column(e, c_name))
                        self.switch_button_columns.append(switch)
                if all([v for v in self.columns_shown.values()]):
                    self.switch_button_all.set_value(True)
                self.switch_button_all.on('update:model-value', lambda e: self.__show_hide_all(e))


table = CustomTable()
table.create()

ui.run(port=1234)

[falkoschindler]

@miqsoft Now I finally found the time try it myself. Here is a minimum example I came up with:

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
]
rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': 'Carol'},
]
visible_columns = {column['name'] for column in columns}
table = ui.table(columns=columns, rows=rows, row_key='name')

def toggle(column: dict, visible: bool) -> None:
    if visible:
        visible_columns.add(column['name'])
    else:
        visible_columns.remove(column['name'])
    table._props['columns'] = [column for column in columns if column['name'] in visible_columns]
    table.update()

with ui.button(on_click=lambda: menu.open()).props('icon=menu'):
    with ui.menu() as menu, ui.column().classes('gap-0 p-2'):
        for column in columns:
            ui.switch(column['label'], value=True, on_change=lambda e, column=column: toggle(column, e.value))

Messing with table._props['columns'] is a bit hacky, but I didn't want to introduce another list of columns outside.

[miqsoft]

Oh wow. Thanks a lot. That was much simpler than I thought! 👍
I did not thought about the menu element. I just thought about how it can be done using the QBtnDropdown and QList elements of Quasar.