Data Grid CRUD app with horizontal scroll

:nerd_face: Preface:

Hey guys! :wave:

I’m going to preface this post by saying that I’m not a front end developer. That’s one of the reasons I’m using anvil. It makes it easy to make complex websites. I really enjoy it! If there is anything that I can do differently, or if I’m re-inventing the wheel please let me know. (Clone Link)

:face_with_symbols_over_mouth::face_with_symbols_over_mouth::face_with_symbols_over_mouth: Problem:

I was having a lot of issues with the DataGrid CRUD tutorial. I know the basic tutorial works fine, but I had a table with many rows (>15) that I wanted to work with. So I added the “wide” asset as described here. And so the problems arise…

The basic CRUD tutorial + the horizontal scroll solution does not work properly because the DataPanelRows are nested within the DataGridPanel. When we set the “wide” role, I believe we are making the 2 added DataRowPanels (plus the default DataRowPanels) unable to stack vertically. Instead, they line up horizontally causing lots of strange issues.

:100::100::100: Solution:

  1. Create a Data Grid
  2. Under the Repeater Panel component create a custom template.
  3. With the custom template add 2 DataRowPanels for displaying data (visible) and editing data (hidden).
  4. Follow the guide for creating the CRUD (linked above).
  5. Create a role for horizontal scrolling called “wide-dg”. Under the Theme section make sure to add the CSS below to theme.css in Assets, and create a proper role in Role.
  6. You can then assign the ‘wide-dg’ role to your Data Grid, and everthing should work properly!
/**
From Original tutorial:
**/
.anvil-role-wide-dg .data-grid-child-panel {
  overflow-x: auto;
}

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

/**
Added setup:
**/
.anvil-role-wide-dg .anvil-panel-section-gutter {
  flex-wrap: wrap;
  min-width: -moz-min-content;
  min-width: min-content;
}
3 Likes

Thanks for sharing! Do you have a gif you could share and/or a clone link. Would be great to see this in action.

Hi @stucork!

I don’t have a GIF, but I do have a clone link. I stripped down one of my apps to the bare minimum and changed it slightly. The theme is pretty awful, but it does work :smiley:

Here’s the link: https://anvil.works/build#clone:TPTIUPOSZ2YQUUOM=GFP6XJBOZW2CQJU6CRLOWGIQ

Any feedback is welcome!

1 Like

I just fixed the background colors of the rows!