DataGridJson: A Flexible DataGrid for Anvil

DataGridJson is a custom Anvil component that provides a flexible, quick-to-configure DataGrid for displaying tabular data in your Anvil apps. It is designed to make it easy to define columns, customize cell and header behavior, and handle large or dynamic datasets efficiently.

The component was first introduced in this forum post.

Features

• Quick setup: Define columns and settings in a single step.
• Customizable columns: Each column can have its own title, data key, width, icon, alignment, click handlers, tooltips, and more.
• Header actions: Columns can have clickable headers for sorting or custom actions.
• Row actions: Add buttons, links, or checkboxes to rows with custom handlers.
• Summary rows: Optionally keep the last row as a summary, unaffected by sorting.
• Paging: Built-in support for paging through large datasets.
• Dynamic loading: Use the included DynamicIterator to load data in chunks as needed.
• RichText and custom cell rendering: Display rich content or custom widgets in cells.

Usage

1. Define Columns

Each column is a dictionary with keys such as:

• title: Header text.
• data_key: Key for data binding.
• width: Column width.
• icon, icon_align: Optional icon and its alignment.
• text: Static text for the cell.
• richtext: If True, uses a RichText cell.
• align: 'left', 'center', or 'right'.
• tooltip: Tooltip for the header.
• checkbox: If True, shows a checkbox (only if the item's value is not None).
• on_click: Function called when a cell is clicked.
• on_change: Function called when a checkbox is toggled.
• header_on_click: Function called when the header is clicked.
• header_sort_on_click: If True, enables sorting by this column.

Example:

columns = [
    {'title': 'Name', 'data_key': 'name', 'width': 100, 'on_click': self.name_click},
    {'title': 'Description', 'data_key': 'description'},
    {'width': 100, 'on_click': self.row_edit, 'icon': 'fa:pencil', 'text': 'Edit'},
    {'width': 100, 'on_click': self.row_delete, 'icon': 'fa:times', 'text': 'Delete'},
]

2. Define Settings

Settings control the grid's behavior:

• rows_per_page: Number of rows per page (0 = show all).
• show_page_controls: Show/hide paging controls.
• on_click: Handler for row clicks (if not overridden by a column).
• last_row_has_summary: If True, the last row is styled as a summary and not sorted.
• row_template_on_show: Function called when a row template is shown.
• border: Custom border style.

Example:

settings = {
    'auto_header': True,
    'rows_per_page': 0,
    'show_page_controls': False,
    'on_click': self.row_click,
}

3. Provide Items

Items can be a list of dictionaries or a dynamic iterator (see below).

Example:

items = [
    {'name': 'Item 1', 'desc': 'First item'},
    {'name': 'Item 2', 'desc': 'Second item'},
]

4. Using DynamicIterator for Large/Dynamic Data

The DynamicIterator class allows you to efficiently load data in chunks, ideal for large datasets or when data is fetched from a server.

How it works:
You provide a function that loads a chunk of data given a start and end index. The iterator loads more data as needed when the user pages through the grid.

Example:

from DynamicIterator import DynamicIterator

def load_items(from_index, to_index):
    # Fetch items from a database or API
    return [{'name': f'Item {i}'} for i in range(from_index, to_index)]

items = DynamicIterator(load_items, length=1000, chunk_size=50)

See it in action:
In the included Test form, the second DataGridJson control demonstrates DynamicIterator in use. Click the paging buttons and look at the console printed output to see data loaded dynamically.

5. Creating and Using DataGridJson

You can create a DataGridJson from code:

from DataGridJson import DataGridJson

grid = DataGridJson(columns, settings, items)
self.add_component(grid)

Or configure one added in the Anvil IDE by setting its columns, settings, and items properties.

Example

See the Test form in this app for a comprehensive example, including:

• Two DataGridJsons (one created in code, one in the IDE)
• Dynamic paging with DynamicIterator
• Custom column and header actions
• Summary rows and detail/summary switching

License

This project is licensed under the MIT License. See LICENSE for details.