All Collections
Building πŸ‘·β€β™‚οΈ
How to increase the width of fields in a Datagrid
How to increase the width of fields in a Datagrid

DataGrids can be tricky, let's explore how to change the sizing of components nested inside a data grid

Updated over a week ago

Data grids are great when you need a repeating table with a dynamic number of rows. Team Forms will automatically change the width of the columns to best fit the content, however, sometimes it can be useful to have more control.

Option 1 - Style Attributes

This can be achieved by adding custom CSS to any Team Forms component. This allows you to control every aspect of that component's look and feel from simple changes like changing the font colour to changing the width. CSS can be a very complex topic which we won't cover here, however, we will look at the simple example of changing the width of a component.

  1. Navigate to the Layout tab of your component settings

  2. Add a style attribute and for the value add the CSS below

min-width: 100px; 

Option 2 - Insert HTML in label

For some component like the drop-down menu the style tab will not work. In these situations you can insert HTML into the label property to force the width of the column to increase. In the example below we increase the width the following html.

<div style="min-width:200">Column heading</div>

Did this answer your question?