object-table Column Alignment

General Q&A
,
1

Going to try to explain this one without code samples as they’re a bit hefty.

  1. View exists with a few object-tables. Each table contains objects of the same model, but there are distinct categories for these items and it is useful for the customer to have clear separation between them
  2. One table has 2 extra fields shown as columns that are not relevant to the other categories
  3. Customer ask: align the columns across all tables

As far as I can tell column widths are calculated automatically based on cell content and window size. Is there a way to override this behavior and set % widths like you would with HTML/CSS to force alignment? Dumbed down example below with less columns than we actually have:

Category 1:
Col A 30% | Col B 30% | Col C 30% | Col D 10%

Category 2 (B and D do not apply):
Col A 60% | Col C 40%

Or maybe some other solution I’m missing?

2

@fthomas It is not currently possible to specify column widths in Object Tables, so please go and add the “column width %|fixed for object-tables” feature to our Public Roadmap

But, what you can do is manipulate the current behavior into doing basically what you need. To do this you need to combine not breaking column heading values with fixed widths and the fit="shrink" directive on the columns in question.

When you use fit="shrink" on a column, the column will shrink to the smallest width of the heading display value by wrapping both the heading display value and the content in the actual rows. So the trick is to give it a heading value that cannot be wrapped, and you can do that by replacing any spaces in the heading value (which would have been wrapping points) with non break space characters, and padding the end of the heading with any additional non break spaces that you need to get to the desired column width.

For example:

<object-table hide-if="$:sharedIsPhone()" label="Select one to view details" query="all_tickets" empty-message="No recent field tickets" limit="10">
        <column fit="shrink" heading="Date">{date}</column> <!-- will shrink to width of 'Date' -->
        <column fit="shrink" heading="Well Pad Name">{well_name}</column> <!-- will shrink to width of 'Well' | 'Pad' | 'Name' -->
        <column fit="shrink" heading="Date&#160;&#160;&#160;&#160;">{date}</column> <!-- will shrink to width of 'Date      ' -->
        <column fit="shrink" heading="Well&#160;Pad&#160;Name">{well_name}</column> <!-- will shrink to width of 'Well Pad Name' -->

Result:

Screen Shot 2022-08-01 at 3.35.28 PM
Screen Shot 2022-08-01 at 3.35.28 PM1545×1108 231 KB

In this way you can force a specific column width regardless of the actual content that is getting displayed in that column.

I am unsure if this is going to get you exactly what you need, but it should get you close. Also note that in my example the number of break spaces is hardcoded, you may want to consider calculating that dynamically based on the device you are on or something like that.

I hope this helps

1 Like
3

Hey Tielman,

You mentioned that this could be dynamically calculated? I tried creating a function here

image

But it outputs the actual string value instead of spaces
image

Am I missing something?

4

Hi @alex.dang

From JS you’ll have to use the JS representation of the character, \u00A0

1 Like