Formatting table columns

Ask the community
,
1

I’ve created a table connected to a collection which is working properly. However, it doesn’t look very pleasing. All the columns are left justtified. The 8 center columns are boolean and should be centered. The right 2 columns are numeric and should be right justified.

1015×616 111 KB

I’ve tried building the table with javascript $w.Table…

However, there doesn’t seem to a Column property for justification. Is there a way to accomplish this that I’m missing?

Here are the values returned by the .columns method for the last column.
{“id”:“columnId_282fde12-5279-453d-b593-b6797ea4954b”,“dataPath”:“year”,“label”:“Movie Year”,“width”:45,“visible”:true,“type”:“number”}

Are there other properties that are not listed in the API doc? (such as: “justify”:“right”)

2

Hi,
You can change the content alignment as demonstrated below:

1038×1314 83.5 KB

Note that you can also change the columns width, the row height and so on.

Good luck,
Tal.

3

If I wanted the text in one row to be red rather than black how would I achieve this?

4

Hi Mark,
You can create a table using regular HTML and add it using the HTML component. This way, you’ll be able to design it however you want using the tag.

Tal.

5

Hey Mark,

I think it’s technically possible to do what you want, but might not be the best idea in your situation. The only way I can think of to change the color of the text in one row is if all your columns are set with the rich text type. Then you can use code to change the styling of just one row. To do so you’d probably also have to set the data in the table with code as well instead of just connecting it to a dataset.

6

Is there a method to have different content alignment per column? For example, Column 1 be right aligned, Column 2 centered, Column 3 Right Aligned, etc.

7

@charlesneff You can do this by creating multiple tables. ie. one table for column 1, one table for column 2 etc. you can make it look like a single table by placing it nearby