How To Adjust Width Of Columns. | OutSystems

Nuno Reis wrote:

I've implemented it before. The logic is a bit tricky.

In both you need to do a match between human-readable column name and internal name.

Option 1: have an output structure of type text, text, text... to save all the returned values. Your select will be a configurable inline parameter. The table on page will hide columns that are not set.

Option 2: Add a JS plugin to reorder them ( think I used this one in a traditional project). Set the starting string to be what the user wanted. Here you only need to give a unique name to each column.

I may do a video on that, but not for at least a week.

Thank you Nuno for helping me with this. I have found solution in one of your older post. I created one boolean variable for each column and controlled the visibility from checkbox.

Daryna Kravets wrote:

Hi Nannu,

You can adjust width (using columns, pixels or percentages) in the styles tab:

Hi Daryna,

I tried adjusting width in px from default value of Header Cell and Header row for Id Column but it didn't work.

Nuno Reis wrote:

Hello Nannu.

OutSystems and Bootstrap are based in a grid system. It works on a 12 column system so you can split the screen in equal part of 1/2, 1/3, 1/4, 1/6, 1/12, or a mix like 1/3+2/3.

It makes web development very easy, responsive and is easy to read compared with loads of specific CSS.

The disadvantage is that you can't have more than 12 columns by default.

Solution 1:

Do you need more than 12 columns? It seems a waste of space. Filter out some information, leaving only what is relevant. The rest can go on details screen or be exported as excel.

Solution 2: Place the table inside a container and add the css "overflow-x:auto" to make it scrollable.

Solution 3: do your own html/css like in the old days.

Hi Nuno,

I just realized that it's not even showing 12 columns in the table.

I can go with solution 2 but it's making actual content of the table scrollable as well (eg. Big form name).

Thanks.

Nuno Reis wrote:

Because some columns are wide (a lot of content) they take more than the bare minimum.

You can always shrink the content (as in, more line breaks). I mentioned the possibility here but never heard back if it works.

Again, 12 columns is ugly. "less is more" "simple is beautiful" and all those made sentences.

Got it,thank you Nuno. To solve this problem is there any way to give controls to the users so that they can select

columns whichever they wanna see?

Nuno Reis wrote:

I've implemented it before. The logic is a bit tricky.

In both you need to do a match between human-readable column name and internal name.

Option 1: have an output structure of type text, text, text... to save all the returned values. Your select will be a configurable inline parameter. The table on page will hide columns that are not set.

Option 2: Add a JS plugin to reorder them ( think I used this one in a traditional project). Set the starting string to be what the user wanted. Here you only need to give a unique name to each column.

I may do a video on that, but not for at least a week.

Thank you Nuno for helping me with this. I have found solution in one of your older post. I created one boolean variable for each column and controlled the visibility from checkbox.