Hiding Column Headers

Apliqo UX
1

Hi all,

Wondering if anyone has found a way to hide the column headers in a view/grid? I have tried the following but haven’t found a solution so far:

  • Since we are able to hide the row headers using the “hiddenColumns” Adv Option by using column “0”, I was looking for something similar for rows but couldn’t find such a parameter.

  • As column headers automatically use the style stored in “ibcs-class”, I tried overwriting the default with the below. The “line-height” works to make the header taller but there seems to be some minimum height threshold so I can’t shrink it to zero.

image

Thanks in advance for any suggestions!

1 Like
2

this cannot be achieved using CSS and can only be done by creating a custom widget and developing this feature.

3

did you try the following in ibcs-class?
display:none !important;

4

@lwang, thanks for your advice! I just tried it and unfortunately, it does not compress the height of the header (as there appears to be some minimum height built into the UX headers).

image

5

true, but this is what I can archive so far.

6

I have some updates on this (thanks to @srichardson for pointing me in the right direction!) Through experimenting with CSS, I found a way to essentially hide the headers in a grid. Sharing the steps below:

  • ensure “ibcsHeaders” are OFF
  "table": {
    "ibcsHeaders": false

grid-table {
  div[id="a1.f3.v1-tableInstance"] {
    .handsontable {
        th.rowheader {
          border-bottom: 1px solid transparent;
          height: auto;
          font-size: 0px;
        }
        th.columnHeaderLevel0 {
          border-bottom: 1px solid transparent;
          height: 1px;
          font-size: 0px;
        }
        th.columnHeaderLevel1 {
          height: 1px;
          font-size: 0px;
        }
        th {
          line-height: 1px;
        }
      }
  }
}

  • In this example I have 2 stacked column dimension so “columnHeaderLevel1” and "“columnHeaderLevel0” are called out separately. Note also that you need to call out the “id” of the table object to make it specific to a particular table. You can find the id thru your browser inspector

    image
    image743×146 10.3 KB

  • Finally, this is what it looks like after:

    image
    image1773×636 120 KB

3 Likes
7

I’m struggling to understand the use case where you would want to display a grid without column headers!

Without the context of the headers how does the user know what the numbers mean?

8

@cw-ch-scott I agree that in most cases, it would be confusing but there are a few scenarios where it comes in handy:

  1. A widget grid with only one column (e.g., control cube) where the column “element” is self-explanatory or doesn’t matter to the end-user
  2. Vertically stacked grid widgets with the same column headers (e.g., date range) coming from different cubes where hiding the headers on the second widget makes the page look like one table.
  3. Multiple stacked column dimensions (e.g., Time, Version, and Measure), where the headers are getting too tall and differentiating the elements are self-explanatory (amount and comment for Measure)

For (3), it would be more useful to selectively compress one of the three stacked columns (e.g., hide the Measure dimension). I’m able to somewhat achieve this but the row headers get offset as a result. It would be a useful enhancement if there was a toggle on each column dimension to determine whether it should be visible.

3 Likes
9

The ability to toggle on/off column headers would come in handy for control cubes, where the columns don’t provide any additional information to the user (e.g. Control Variable & Variable). Understand this could get a bit trickier with stacked column dimensions.

image

10

I also have a requirement that is like a KPI table but vertically built.

I see there is a (new?) setting “hiddenRows” which I thought could work for this particular use case. I tried it but it doesn’t really work. Is this a placeholder?

11

We also get request sometimes to hide column headers or make our own column headers.

Example:

  1. The element name is too “technical”, Customer just want to see a more “Business-friendly” headers.
  2. We stacked a number of dimensions, UX also stacked them up, but it does not look nice and it is taking up a lot of space, so customer wants to create their own headers with just one line instead of stacked, but not possible or I am not sure how to do it on UX.
1 Like
12

+1 here!

I also have encountered cases where I needed to manipulate/hide the Column Headers.
I agree with the use cases stated above, and in many cases would be handy to have a way of doing it in UX as a feature, hiding the columns headers or even create your own with friendly/combined names, instead of stacked.

1 Like