Hiding Specific Rows in Table Perspective

Ignition
,
1

[Perspective table in ignition 8.1]

Is there a way to hide rows in a table/change the row height to 0?

I am attempting to filter through multiple aspects in columns so I can combine filters and I am able to get an array of the indices of rows I want to hide.

My current method is to remove all these rows with the system.dataset.deleteRows, however, this means it is harder to move between two opposite aspects as I’ll have to reload the initial table.

I was wondering if there is some function that allows me to change the height of a specific row in a table. I have tried going into the table components and changing the height but I don’t think I am accessing it properly.

For example, the following line of code changes the height for every row. Is there a way to point towards a specific row number?

self.getSibling("TestTable").props.rows.height
2

I think you could do this by setting a CSS class on the row. For example, `display: none;".

Someone should be able to provide you with further detail.

Another option would be to bind the full dataset to a custom property of the table and bind the table data to that custom property via a property binding with a script transform that applies the filters.

2 Likes
3

I was testing to see if I could do this - just wondering if its possible to access the style for individual rows in a dataset table as well? I could only find data.style.visibility , which controls the visibility of the entire table at once. I attempted to enter the first value through data[0].style.visibility , however this wouldn’t return any value as a dataset doesn’t have internal styles.

I looked a little into CSS (bear with me, I don’t have much knowledge) and I am not sure if this yields the same results, or if CSS can be set on rows through a different method?

4

not in a dataset, but as an array you can do something like this:
instead of color you use display ofc

5

If you reorganise your data you can control the style of individual cells or complete rows.

Table row hiding

(1) has a single cell style applied. (2) is plain. (3) has display: none (so you can’t see Jakarta) and (4) has a style applied to the whole row.

This is done as shown below.

Table data 
[
  {
    "city": {
      "value": "Folsom",
      "style": {
        "backgroundColor": "#F7901D",
        "classes": "some-class"
      },
      "align": "center",
      "justify": "left"
    },
    "country": "United States",
    "population": 77271
  },
  {
    "city": "Helsinki",
    "country": "Finland",
    "population": 635591
  },
  {
    "style": {
      "display": "none"
    },
    "value": {
      "city": "Jakarta",
      "country": "Indonesia",
      "population": 10187595
    }
  },
  {
    "style": {
      "backgroundColor": "--neutral-40"
    },
    "value": {
      "city": "Madrid",
      "country": "Spain",
      "population": 3233527
    }
  }
]
'''

Note that for Helsinki the dictionary is a simple flat city, country & population. For anything you need to apply a style to you need to move the fields down into the value dictionary and create a style dictionary as well.

If you are in control of your data generation then the simplest procedure would be to create the same structure for all rows and modify the style to display: none as required. Delete that style to make the row visible again.

1 Like
6

Thanks for all your help, I tested this method and it is a viable solution. For my specific scenario however, I have changed my process to hide the specific rows for each iteration of “filtering” rather than roll forward/backward on what I have already filtered.

Cheers!