# Dynamically display data on table after selection of column range

**URL:** <https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [December 1, 2021, 10:45am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611 "2021-12-01T10:45:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ajaykumar\_Unhale](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@Ajaykumar\_Unhale](https://forum.inductiveautomation.com/u/Ajaykumar_Unhale)\
**Post date:** [December 1, 2021, 10:45am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/1 "2021-12-01T10:45:13Z")

</div>

Hello,  
Work I complete:  
Component I used in perspective screens are table, 2 dropdown and button  
I use Named query, and display that in table component used in perspective.  
I create 5 columns(P20,P21,P25,P27,P28), I attached Image of my screen

Need help here:

1. How can I access column name of table and display in drop down (from dropdown and to dropdown)?. Any way is work for me either from named query or from table.
2. Once we select column name in the drop down for example: dropdown from select P21 and dropdown to select P27, then how can we display data between selected column range(P21 to P27) after button press?  
Any way is work for me either from named query or from table.
3. In short want to display data on table depends or the range of column selected dynamically  
 ![1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/2/e21900da4b10d7e96eae8f4780b9256ec9b4e9df.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [December 1, 2021, 10:56am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/2 "2021-12-01T10:56:59Z")

</div>

You could use the props.column if the column names wont change  
to show less columns you can set the visibilty to false

If they can change based on the query you best just get the name from your table data property there to fill up the dropdown and filter out the columns

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 1, 2021, 11:34am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/3 "2021-12-01T11:34:27Z")

</div>

Make a new custom property on your table, let’s call it `data`. bind it to your query, and make it return a dataset.  
Now bind your dropdowns options property to this `custom.data`, and add a little transform script (might be doable with expressions, I leave that to you):

```python
return [
	{
		'value': idx,
		'label': col
	} for idx, col in enumerate(system.dataset.getColumnHeaders(value))
]

```

Now bind your table `props.data` to `custom.data`, `dropdown1.value` and `dropdown2.value` in an expression binding, add a script transform that returns a filtered version of the original dataset:

```python
start = int(value.start)
end = int(value.end) + 1
return system.dataset.filterColumns(value.data, range(start, end))

```

You’ll have to add some logic to prevent `start > end`, and some defaults in case no values are selected from the dropdowns, but that shouldn’t be too hard.

edit - actually, selecting the first column in the first dropdown and the last column in the second dropdown in the designer might be enough to handle the default case and show the full table.  
And selecting a `from` column higher than the `to` column only results in an empty table, which might be good enough in most cases.

---

<div class="post-metadata">

**Author:** ![Ajaykumar\_Unhale](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@Ajaykumar\_Unhale](https://forum.inductiveautomation.com/u/Ajaykumar_Unhale)\
**Post date:** [December 3, 2021, 6:06am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/4 "2021-12-03T06:06:04Z")

</div>

Thank you very much,  
this is perfectly work for me.  
but in the same case two more complexities are:

1. In the code if one of the column want to make fix and display with column range when selected, is it possible?. I mean to say, I have one column, name is Date\_time which show date and time, so when I select column range and get the values of selected column on table with this is it possible to Date\_time column of that values display in the table?
2. Can we bind different table dynamically for the same code? I mean to say,  
one drop down which show 5 table names(with different number of columns), so we select table name and we use button whenever button is press selected table shown as per code send from you.

Thank You

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 6, 2021, 9:28am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/5 "2021-12-06T09:28:43Z")

</div>

1. I’m not sure what you mean what you mean… Do you want the date column to always be displayed at all time, independently of the selected range ?
2. If I understand correctly, yes we can. Instead of binding the `custom.data` prop, you need to populate it when the button is clicked. The rest of the code should not have to change. An alternative solution would be to bind it to the dropdown that selects the table.

The first step is to bind the table dropdown to the tables you want to allow access to.  
Let’s start by manually adding options to the dropdown:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/baf64603826ab4735d0019b00b8ddff553bba7a5.png)  
If you need to dynamically populate those options, you’ll have to bind it to something and probably use a script transform to format it properly, but that’s another story.  
Here, the label is what will appear in the dropdown, and value is the table to query.

Then, you need to run the query on the table selected in the dropdown when the button is pressed:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/2658c4d7d9273b009fd547860e5fc65f0e90db39.png)  
alternatively, you could bind `custom.data` to the table dropdown and run the query from there:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e42f9fd9894ba6f54ce5cc88f750e5d0debfb561.png)

The code that handles the columns selection should still work, BUT be aware that switching from one table to another will keep the previously selected column range. Which is imo the better behavior.  
Just make sure to select the first and last columns for each table in the designer, to that the use those as the default.

edit:  
Note that you could also add finer filtering with a multiSelect dropdown:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/1/6192c2544d031e4da96216f70bda7e47453d394e.png)

---

<div class="post-metadata">

**Author:** ![Ajaykumar\_Unhale](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@Ajaykumar\_Unhale](https://forum.inductiveautomation.com/u/Ajaykumar_Unhale)\
**Post date:** [December 6, 2021, 4:41pm UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/6 "2021-12-06T16:41:00Z")

</div>

Thank you very much for replay

1. I’m not sure what you mean what you mean… Do you want the date column to always be displayed at all time, independently of the selected range ?  
For this I am sharing two images  
image 1 shows the complete data of all column in table  
 ![Table1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3bb763f549bd9ec4fd347c6d9b5371285050ff8c.png)

image2 2 shows the after selection of column range(here column range select from column B to column E). once button is pressed data display in the table including date column( I am looking for this)  
 ![Table2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/c/9c6e31c119d1e0f8f54b8e40a13a7de19473e7a8.png)

(all the data display on table is coming from named query)

Thank you

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [December 7, 2021, 8:38am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/7 "2021-12-07T08:38:29Z")

</div>

Well then all you have to do is make sure that the index of the column with the date is always included in the indices passed to the filter function.  
Since it appears to be the first:

```python
filtered = range(int(value.start), int(value.end) + 1)
if 0 not in filtered:
	filtered = [0] + filtered
return system.dataset.filterColumns(value.data, filtered)

```

Note that I used the `not in` syntax here because it can be used for any column. If you only want to apply this to the first one, you can use

```python
if filtered[0] != 0:
    filtered = [0] + filtered

```

---

<div class="post-metadata">

**Author:** ![Killmonger](https://avatars.discourse-cdn.com/v4/letter/k/3da27b/32.png) [@Killmonger](https://forum.inductiveautomation.com/u/Killmonger)\
**Post date:** [July 14, 2022, 7:11am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/8 "2022-07-14T07:11:52Z")

</div>

I have a similar question. Can I populate live and historical OPC tags in my table based on dropdown selection. For selecting the datetime option I’ll need another component. But can i populate my table based on the selection in dropdown. Note that my table will have fixed number of tags…and i just want to show values of these tags based on the selection of a value from drop-down.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [July 14, 2022, 8:07am UTC](https://forum.inductiveautomation.com/t/dynamically-display-data-on-table-after-selection-of-column-range/53611/9 "2022-07-14T08:07:29Z")

</div>

See if my answer to [Dynamically update table based on selection from drop-down in perspective](https://forum.inductiveautomation.com/t/dynamically-update-table-based-on-selection-from-drop-down-in-perspective/61890) helps.