How to hide datatable columns based on screen size?

Dash Python
,
1

How can I hide DataTable columns based on screen size?

I’d like to have the full table display when users are on a lg screen, but only one or two columns when the screen is smaller (i.e. when users are on their phone or tablet).

I’d personally love a feature where we can specify the screen width at which a column appears when defining the list of columns.

2

hi Brad @raptorbrad
What you are trying to do is not possible. However, as a workaround, you could potentially create two datatables: one with all the columns inside a hidden div, and one with only two columns inside a different hidden div. Then, you could try to show the appropriate div, according to the screen size or device used.

1 Like
3

I actually found a way to handle this with clientside callbacks. The input of the clientside callback will be the href of the url, this assumes users will not resize the window on their own. The output is the hidden columns attribute of the Dash Datatable.

In the following example, if the window inner width is less than 750px, we add col1 and col2 to the hidden columns list. Otherwise, we don’t add any columns to the list.

clientside_callback(
    """
        function(href) {
            if (window.innerWidth < 750) {
                return ['col1', 'col2']
            }
            return []
        }
    """,
    Output('table', 'hidden_columns'),
    Input('_pages_plugin_location', 'href')  # dcc.Location component
)

I simply hide the toggle columns button, so users don’t muddy their own view.

This isn’t the ideal situation for handling this, but it is a workaround for hiding columns based on screen size.

3 Likes