Show and hide columns in a datagrid

Show and Tell
1

I wanted to share with you a small piece of code that allows displaying or hiding columns responsively. I’m new to Anvil, and I find so many resources here on this forum, it’s great!

My goal was to hide certain columns (containing rather long texts) in a datagrid in responsive mode when the screen width is too small. And to restore them if the screen becomes larger or if the user flips their smartphone horizontally. For that, I relied on the documentation: link to the documentation.

However, when re-displaying columns, the restored columns ended up on the right side of the table. So it was necessary to save their position in order to restore the column to its initial state.
This works for me. I hope I hadn’t reinvented the wheel and that it might help.

Example of code inside a form. Just need to pass the names of the columns:

# assuming that datagrid "self.candidates_grid" have several column with 'Description' and 'Notes'

self.candidates_grid_responsive = ColumnsToShowHide_in_datagrid(self.candidates_grid)

# if on mobile
self.candidates_grid_responsive.hide_columns('Description', 'Notes')

# il on larger screens
self.candidates_grid_responsive.show_columns('Description', 'Notes')

Here is the class:

class ColumnsToShowHide_in_datagrid:
    def __init__(self, datagrid):
        self.datagrid = datagrid
        self.hidden_columns = []
  
    def hide_columns(self, *column_names):
        columns_to_hide = []
        for column_name in column_names:
            column_to_hide = next((column for column in self.datagrid.columns if column['title'] == column_name), None)
            if column_to_hide:
                column_index = self.datagrid.columns.index(column_to_hide)
                columns_to_hide.append((column_to_hide, column_index))
            else:
                print(f"[ColumnsToShowHide_in_datagrid.hide] Column '{column_name}' not found.")
        
        for column, index in columns_to_hide:
            self.hidden_columns.append((column, index))
            self.datagrid.columns.remove(column)
        self.datagrid.columns = self.datagrid.columns
  
    def show_columns(self, *column_names):
        columns_to_show = []
        for column_name in column_names:
            for column, index in self.hidden_columns:
                if column['title'] == column_name:
                    columns_to_show.append((column, index))
                    break
            else:
                print(f"[ColumnsToShowHide_in_datagrid.show] Column '{column_name}' not found in hidden columns.")
        
        for column, index in columns_to_show:
            self.hidden_columns.remove((column, index))
            self.datagrid.columns.insert(index, column)
        self.datagrid.columns = self.datagrid.columns
2 Likes
2

I suspect this belongs in the “Show and Tell” forum category. In any case, thanks!

1 Like
3

Also if you are new, perhaps you have not yet discovered Tabulator for Anvil… i find it infinitely more powerful and simpler to implement than datagrids… check it out.

2 Likes
4

Oh thank you for the tip.
Do you mean the tabulator adapted to Anvil?

Looks great.
I might need it later for an advanced version of my app when I will have many data to handle.

Datagrids give the ability to create tremendous rows design with many components. Anvil is amazing for that.

5

Love the demo. Would you share the code behind ? Would be a great learning tool.
Thank you
Maik

6

This code above is ready to use.

For example, you have the above code on a client module named “responsive”, and call it in your form with
from ... import responsive
or wherever your form is (start typing from and the editor will propose the path)
and use it as described:

self.objects_grid_responsive = ColumnsToShowHide_in_datagrid(self.objects_grid)

with self.objects_grid being a datagrid in your form

To deal with mobile or PC, I use this nice code:

1 Like