Data Grid Two Level of Headers

Anvil Q&A
1

What I’m trying to do:
I have a datagrid with a repeating panel in it that is being populated with data from a datatable. I am trying to add an additional header to the table that spans specific columns. I dont know how to achieve this. Below see my thought process but it doesnt seem to make any change to the header. I removed autoheader from the data grid so I thought this should work.

Do I need the keys? I tried this as well and still didnt work.

Code Sample:

def data_grid_1_show(self, **event_args):
    """This method is called when the data grid is shown on the screen"""
    # Define the column headers
    first_level_headers = [
        'Personal Info',
        'Gantry',
        'Control Console',
        'Other',
        '',
        ''
    ]

    second_level_headers = [
        {'text': 'Date', 'key': 'date'}, {'text': 'CT Unit', 'key': 'ct_unit'}, {'text': 'CT in use', 'key': 'ct_in_use'},
        {'text': 'Table Height Indicator', 'key': 'table_height'}, {'text': 'Table Position Indicator', 'key': 'table_position'},
        {'text': 'Angulation Indicator', 'key': 'angulation'}, {'text': 'Laser Localization Light', 'key': 'laser_light'},
        {'text': 'High Voltage Cables', 'key': 'high_voltage'}, {'text': 'Table Motion', 'key': 'table_motion'},
        {'text': 'X-Ray "On" Indicator', 'key': 'xray_indicator'}, {'text': 'Emergency Stop', 'key': 'emergency_stop'},
        {'text': 'Exposure Switch', 'key': 'exposure_switch'}, {'text': 'Display Window Level', 'key': 'window_level'},
        {'text': 'Panel Switch/Lights', 'key': 'panel_switch'}, {'text': 'X-Ray "ON" Indicator', 'key': 'xray_on'},
        {'text': 'Warning Labels', 'key': 'warning_labels'}, {'text': 'Intercom Systems', 'key': 'intercom_systems'},
        {'text': 'Lead Aprons', 'key': 'lead_aprons'}, {'text': 'Power Injector', 'key': 'power_injector'},
        {'text': 'Postings', 'key': 'postings'}, 'Technologist', 'Description'
    ]

    # Set the column labels
    self.data_grid_1.column_labels = [first_level_headers, second_level_headers]

    # Bind the data table to the DataGrid component
    self.data_grid_1.items = app_tables.ctqcmechanicalchecklist
2

You probably want to try disabling the Auto headers and adding in a data row panel component as the header on the Design view. Then you can create your two levels inside that.

Since both levels will have the same columns you might need to use multiple labels for the top row and just colour them the same with no spacing so that you can segregate them. Or maybe use a border to designate the end of each top level?

3

And pin the panel so that it doesn’t scroll. See Controlling pagination.

1 Like
4

I pretty much tried that. So when you add the row panel above the data grid you get areas for each column name. The header that would go above that needs to span over columns 8-10. Kinda like a merge cells in excel. Is that possible? Would I need to use spacers?

5

I think you’d probably have to insert a full-width flow-panel, and manually size the Labels that you put into it.

A flow-panel has its own internal padding, but that can be reduced or minimized.