Automatic padding of columns in a datagrid

0
I need to make the padding of the columns of the datagrids in our app very small. The only solution I could find was adding a style to every column, because the other columns in the grid do not automatically scale with it. I also tried making a building block with all the desired styling in it, but the padding on the column does not work for added columns. Does anyone has a solution? 
asked
1 answers
5

In datagrid properties/configuration, you can set Row Size to ‘small’ which will result in smaller row size and less padding (7.5px) in all columns. It will be same for new rows also.

For further customization, you can add your own css for the datagrid and set required padding there.
- Add a custom.css file in css folder located inside theme folder of your project (theme/styles/web/css/)
- In settings.json add this file in cssFiles declaration along with main.css

"cssFiles": [
    "styles/web/css/main.css",
    "styles/web/css/custom.css"
]

- Now you can create your own css class in custom.css file e.g., ‘SmallPaddingGrid’ and select required html element (table column: td) to set its padding

.SmallPaddingGrid .mx-grid-content tr td {
    padding: 2px 2px 2px 2px !important
}

Now you can set “SmallPaddingGrid” class in properties of any datagrid to reduce its padding

answered