Hiding DataGrid footer

Hi,
Is there any way to hide/remove the footer/pagination section of the DataGrid component? Even if I choose not to show the pagination control, the bottom section doesn’t go away completely. The bottom blue section in the attached image shows static section.

Note: I’m trying to using this component to keep the thumbnail width to be fixed while resizing the browser window.

Thanks!

Hi @proshno,

You can hide the footer by adding a line to your app’s theme.css:

/* Hide DataGrid footer */
.data-grid-footer-panel {
  display: none !important;
}

That should do the trick!

2 Likes

The same form might have two data grids, one with footer and one without.

Will this hide all the footers of all the data grids, including the ones where the pagination control is visible?

I would guess that this would affect all datagrids, but maybe one could use a custom Anvil role to have more control.

Yes, @alcampopiano’s right, it would affect all DataGrids.

I would also use custom roles to toggle the footer on and off.

For example, you could create a role called no-footer, and amend the CSS like so:

/* Hide DataGrid footer */
.anvil-role-no-footer .data-grid-footer-panel {
  display: none !important;
}

Then, the css will only apply to those DataGrids that carry the no-footer role.

2 Likes

Can we convert this to a feature request and get the show_page_controls property to completely hide the footer?
Or are there reasons why one would want to hide the controls while keeping the footer?

1 Like

done