Add margin/padding to table coloumns/rows

Hello there,

I want to add some space to the left of both the rows and the first coloumn. I see that I can make a styre for rows, and add padding to the left, which works. But for the colomn the style did not affect it.

Any ideas? :slight_smile:

Have you specified the columns.x.field properties for each column?

Many of the columns properties won't work if the Table component doesn't know exactly which column you are configuring. The field name should be the SQL or dataset column name exactly as shown in data.0, etc.

1 Like

Specify the column like Transistor said if you want the padding to only apply to the first column. However, you can also apply the style to every cell without specifying the columns:

But create a style class and apply that in preference to hard-coding in the column. :innocent:

Creating the class means you don't have to remember what value you used in another table instance and you can modify them all just by editing the style definition. You'll end up with much more consistent look and feel to the application.

2 Likes

For this, I would do this in the theme. It should be included part of IA's theme tbh, as who wants text to ever be butt up right against the border? I see this so often on other projects though, people who don't know how to use three of the most important css props:

  • gap
  • margin, and
  • padding

I see components in flex containers all butt up against each other and it just looks cramped and amateurish