Formatting Table with many columns

asked on October 23, 2024 • Show version history

I am attempting to create several forms that will require tables such as this:

Given that users will need to add members, it seems to me that they will need to be the rows rather than the columns like the original, and the Types of Income will need to be the columns (plus an additional column for the name of each member).

How can I design my table in a way that will fit all ~15 columns and still have it be readable? Is there any options for pagination by columns rather than by row? Or to allow users to add columns rather than rows?

It also seems to me that if I did use the members as the columns, I would have no way to have one single line in each column for a name input, which is very unintuitive if that's the case.

1 0

replied on October 23, 2024 • Show version history

Since these are dollar amount fields, you should be able to cleanly fit 15 fields including the name field within 1900 pixels (which fits nicely at full screen on any monitor made in the last 10 years)

In the form settings set your max width to 1900

Add this to your CSS to reduce any space between the cells

.cf-xlarge {
  width: 105%;
}

It fits really well and supports very large numbers, with the first field being set to 10% and allow a name to be entered, the rest of the fields left at auto

Otherwise, if you feel you can't fit the data or you want to make it mobile friendly I would use a Collection which works just like a table but without any concerns for vertical space.

1 0

replied on October 25, 2024

Hi Chad, thanks for the response.

It's not the prettiest, but that got it readable and interactable, thanks!

I tried toying with the collections earlier as well, but I don't think it would have helped as my issue was with horizontal space rather than vertical.

0 0

Question

Question

Formatting Table with many columns

Replies

Sign in to reply to this post.