Table Formatting Issues

General Discussion
#1

Greetings ~~

Can someone out there offer suggestions for the following issues with the table component:

  1. How do I get the header to display two lines, one on top of the other?
    For example:
    Flow
    MGD
  2. How do I get the column width to remain the same (not auto change)?
  3. Can column headings be ‘hidden’ without hiding the contents of the column?
    (i.e. like ‘merge cells’ in a MS Word document’s table)

Thanks!
Dale

#2

Hi Dale,

[quote]1. How do I get the header to display two lines, one on top of the other?[/quote]You’ll have to do this using html codes in the column header:

  • Create a table and set up the correct number of columns either manually with the Dataset Viewer or automatically with a data binding (make sure your Designer’s communications are not disabled so that these changes are reflected in your table.)
  • Display the Table Customizer by selecting the table and typing U.
  • In the Header field for the appropriate column, enter<html><center>Flow<br>MGDIf you want to space things out a bit, just enter more breaks:<html><center><br>Flow<br>MGD<br><br>(Note that you have to enter 2 breaks to get a single blank line underneath the header.)

[quote]2. How do I get the column width to remain the same (not auto change)?[/quote]You can stop the user resizing the columns by disabling the table’s Resizing Allowed property. To see this property make sure the Property Editor’s filter is not set to ‘Basic’.

[quote]3. Can column headings be ‘hidden’ without hiding the contents of the column?
(i.e. like ‘merge cells’ in a MS Word document’s table)[/quote]If you want to hide all the headings, disable the table’s Header Visible property. To blank out the header for a single column, just enter a single space into the appropriate header field in the Table Customizer.

#3

  1. (header with two lines) - your proposed solution works like a champ. Thanks Al.

  2. Prevent column width changes: even with ‘Resizing Allowed’ disabled, the column widths seem to change in undesirable ways; was hoping there was a way set width to a fixed value… any ideas?

  3. Hiding selected column headings: was hoping there was a way to only ‘hide’ selected column
    headings, and get adjacent column heading to ‘span’ the difference. See images below…
    Any ideas?

Thanks again!
Dale



#4

If you want total control over the headings, I would hide them and draw my own! Of course, this depends on you being able to fix their width…

To set their width I would either:

a) Leave the headers on and ‘Resizing Allowed’ enabled. Put the Designer into run mode and move the columns to the widths you require. Stop run mode, right-click on the table and go into the Table Customizer and press OK - this locks the column widths. Set Header Visible to false and position your own headings over the now headless table.

b) Set the column widths in code in the window’s internalFrameActivated event:table = system.gui.getParentWindow(event).getComponentForPath('Root Container.Table') table.setColumnWidth(0,200) table.setColumnWidth(1,300) Then hide the built-in header and position your hand-drawn header as required.

#5

Hello,

I attempted to use the HTML to format my text for the header. The header does change to show the text in two separate rows, but the header row does not expand to accommodate the text. I’m sure I’m doing something very basic incorrectly.

#6

I’m not sure why but you have to do the formatting in the first column for it to spread tot he other columns. For it to work correct and have all the other columns text properly centred you can create a dummy column. Create a new column called Formatting and hide it, but put <html><br><br> as the header.

1 Like
#7

The behaviour of the basic table seems to have changed - accyroy is correct in saying that you have to style the first column’s header with html as well. However, if I put in a styling column and then hide it, the other columns revert back to the way they were.

You can style the heading of your first visible column, although it’s a bit hit or miss. The best I’ve managed is

<html><br>Date<br><br>

A better solution might be to use the power table - this works correctly with html only in the column heading with two rows.

Edit: accyroy’s method does work as long as there are no columns between the formatting column and the two-row header without any html styling. Also, if any of them have only a single row in the header it still doesn’t look very good.

1 Like
#8

Hello Accyroy and AIThePal,

Thank you for your responses. You have both really helped, it does not look perfect, but does the job for now.
What I will probably do, as suggested by AIThePal is draw my own headers once it comes to the final styling of the project, but for my demo purposes this works.

I already have a hidden column, so chose to format the first one, by putting a double break in it, I got all the columns to look good. Could we all suggest more refined controls of the header going forward?

Pasted image810×255 15.7 KB

1 Like