Create interactive tables with minimal effort

If you’re writing a web app, chances are you’ll have data in tables. And at some point you’ll probably want to show your users a table of data they can page through.

Doing that in Anvil just got even easier. By popular demand, and without further ado:

Introducing the DataGrid component

Data Grids are an easy way to show data that naturally fits into rows and columns. With built-in support for paging, they can handle large numbers of rows while remaining performant.

Data Grids can be populated from any source. It’s easy to link them up to your Data Tables:

self.repeating_panel_1.items = app_tables.employees.search()

or you could set up some tabulated data yourself:

    self.repeating_panel_1.items = [
      {'ingredient': 'Flour', 'weight': 225, 'cost': 150},
      {'ingredient': 'Milk', 'weight': 150, 'cost': 100},
      {'ingredient': 'Eggs', 'weight': 175, 'cost': 80},
      {'ingredient': 'Butter', 'weight': 175, 'cost': 250},
      {'ingredient': 'Maple Syrup', 'weight': 250, 'cost': 300},
    ]

All of this is covered in our first Data Grid tutorial: Getting Started with Data Grids.

You can also get more advanced. For example, you can nest components inside rows of a data grid to group related data together (as described in our tutorial, Paginated Grouping with Data Grids):

You can create custom widgets that control the behaviour of the Data Grid itself. You can read how to create a search box, an add button, or a page number selector:

Data Grids are only limited by your imagination. Anything you can put together out of Anvil components, you can add to a Data Grid row. And because this is Anvil, you can write Python code to assemble Data Grids and make them behave however you like.

In the example above, we’ve built a full CRUD app in a single component! We’ve got data from a Data Table, displayed in a Data Grid, with a search box, page size selector, and widgets to add, edit, and delete rows.

Click the link to open it in the Anvil editor and have a play:

Open source code

To find out more, take a look at our Data Grid tutorials:

Watch a tutorial