Horizontal scroll for Data Grid

[shaun]

Hi Anvillistas!

Just sharing a technique you might want to use if you have a lot of columns in a Data Grid.

You can assign a few custom CSS rules to the Data Grid to make it have a horizontal scrollbar.

In this example, we’ve created a Role called wide, so assigning that to the Data Grid gives it a CSS class named anvil-role-wide.

.anvil-role-wide .data-grid-child-panel {
  overflow-x: auto;
}

.anvil-role-wide .anvil-data-row-panel {
  flex-wrap: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
}

(A good place to put these rules is theme.css in the Assets.)

You also need to assign widths to each of your columns.

Here it is in action:

You might find it useful to assign the Role at runtime so that all columns of the Data Grid are displayed in the design view:

class Form1(Form1Template):

  def __init__(self, **properties):
    # ...
    self.data_grid_1.role = 'wide'

Here’s a clone link for an app that has this implemented:

https://anvil.works/ide#clone:KTBKQJMLCATI3PPH=UUYFIYM3ZZB25VM6NRKDAONG

Shaun

[stephen.le]

Hi Shaun,
I’m trying to use your horizontal scroll feature. How do you set Data Grid column widths from code? My Data Grid is created from code. The feature doesn’t seem to work If I don’t assign widths.

[shaun]

Data Grid columns are updated when the columns attribute itself is set. So you can tell Anvil to update the columns by doing:

    self.data_grid_1.columns = self.data_grid_1.columns

So this is one way to change a column’s width:

    self.data_grid_1.columns[0]['width'] = 500
    self.data_grid_1.columns = self.data_grid_1.columns

(Thinks: I should add this to the reference docs…)

[stephen.le]

Thanks, your fix worked perfectly!

[splinter]

Thank you! This is a huge help.

[ar1]

.anvil-role-wide .data-grid-child-panel { overflow-x: auto; } .anvil-role-wide .anvil-data-row-panel { flex-wrap: nowrap; min-width: -moz-min-content; min-width: min-content; }

Hi Shaun,
How can the scrolling be implemented for a DataRowPanel?
Thanks

[alcampopiano]

hello @ar1

What exactly have you tried?

If you add a data row panel to the data grid panel, the horizontal scrolling seems to work fine.

If you could share a simple example app that demonstrates your issue it will be easier to assist.

You can share a clone by clicking the icon in the IDE and following the instructions.

I have added an answer to your other post here.

[robgilmore127]

I’m having an issue with this. I have an app that uses a DataGrid component. I made a custom template for the nested RepeaterPanel. The template contains 2 DataRowPanels, with various components for each column. Unfortunately, while the horizontal scrolling works for other components (pinned header), the RepeaterPanel contents do not have horizontal scrolling. They instead are cut off.

How can I make the RepeaterPanel inherit the role from the DataGrid?

[robgilmore127]

I know my post/question wasn’t super detailed, but I solved my issue and created a #show-and-tell complete with a clone link to the working app.

[thai]

Hi Shaun,

Thanks for the instruction it works perfectly. Is there a way to pin the first column so that it is always visible on scroll?

[lsaenz9104]

Continuing on this thread. I have implemented the CSS code THANK YOU it worked perfectly.

Another issue I was trying to solve (in the same vein) was to prevent bleeding over the dashboard when the table is too long.

This occurs when I set the full_width_row in the container properties of my card:

This result in overflow of my background:

The grey area is the original background of my screen. The white area is my data table. It looks like my background width is set by the dimensions of the actual desktop screen, where the data table width is set by the dimensions of my browser (which scrolls a little past the width of the screen).