Hi Matthew,

The cleanest way I’ve found to achieve adding these types of properties to a Data Grid or List View is to use design properties, creating your own design system properties that you can use for individual list views and then easily reuse across your apps.

https://docs.mendix.com/howto/front-end/create-a-company-design-system

https://docs.mendix.com/howto/front-end/extend-design-properties

Here’s a simple how to that creates a new design property called ‘Inside borders’ for Data Grid in your own custom design system.

In your app create a new module, right click the top level App folder, call it ‘DesignSystem’ or something similar.

Right click the new module and click ‘Mark as UI resources module’ (The module icon will turn green)

Open up File Explorer and navigate to the root folder of your app, under this navigate to

< App root folder > / themesource / designsystem / web  (Replace designsystem with the name of the new module)

You’ll see two file templates in this directory

design-properties.json

main.scss

Open design-properties.json and add in the following, you can use text/code editor, my preference is Visual Studio Code

{
    "DataGrid": [
        {
            "name": "Style",
            "type": "Dropdown",
            "options": [
                {
                    "name": "Inside borders",
                    "class": "grid-inside-borders"
                }
            ]
        }
    ]
}

This defines a new design property called ‘Inside borders’ that you’ll be able to select from the Appearance tab in any Data Grid, which is associated with a new class called ‘grid-inside-borders’ which we’ll now define in the other file ‘main.scss’

Open main.scss 

Under the import line at the top of the file add the following, you can customise the border styling to your requirements

.grid-inside-borders.mx-grid {
    table {
        border: unset;
        th {
            border: unset;
        }

        tbody tr {
            td {
                border: none;
                border-right: 1px solid black;
            }
            td:last-child {
                border: none;
            }
        }
    }
}

This effectively removes all borders apart from having a solid border between columns in your grid.

Back in Studio Pro select ‘App’ > ‘Synchronize App Directory’

Open your Data Grid properties and on the last tab ‘Appearance’ scroll down to the Style section, you’ll now have a new style property you can select 'Inside borders’

Here’s the running app with the Data Grid 

You can extend the design properties of any component in Mendix in the same way.