Custom column type select with dynamic options

[dmiric]

Hi,

I'm trying to implement column type like this

const opts = ['a','b']
lineitems.customColumnTypes = [];
lineitems.customColumnTypes.push({
  name: "Roba",
    select: {
       options: opts,
       canAddMoreOptions: false
       },
  iconSettings: { reusableIconName: "select"}
  })

That works if I call it directly, but when I want to get some data via api and then try to do the same thing in a separate method it doesn't.

How could I make options dynamic in selects. For the reference here is code I'm trying to implement in google scripts

<script>
  const lineitems = document.getElementById("lineitems");
  lineitems.data = [
     ["Roba", "Cijena", "Popust", "Količina", "Ukupno"],
     ["","","","",""],
  ];
    
    // this line only fetches the data from google sheet and passes it to onGetProductsSuccess
    google.script.run.withSuccessHandler(onGetProductsSuccess).withUserObject(lineitems).aGetProducts();

    function onGetProductsSuccess(products, lineitems) {
      const opts = ["a","b"]
      //console.log(lineitems)
      lineitems.customColumnTypes = [];
      lineitems.customColumnTypes.push({
        name: "Roba",
        select: {
          options: opts,
          canAddMoreOptions: false
           },
        iconSettings: { reusableIconName: "select"}
        })
        
      products.forEach(function(product) { 
        lineitems.customColumnTypes[0].select.options.push(product[1])
      });
      
     // console.log(lineitems)
    }
</script>

Yet that doesn't work.

[OvidijusParsiunas]

Hi @dmiric.

Active Table does not allow new properties to be set/changed after the table has rendered - this has been done to minimize the amount of times the component needs to re-render and for ease of maintenance purposes. Therefore, when you set the
customColumnTypes property later, it does not take effect.

The best way to solve this issue is to render Active Table only when the data required has been downloaded. Assuming that you are using vanilla js, this can be achieved by using a container element:

<div id="container-element"></div>

And then adding it in your javascript as:

const activeTable = document.createElement('active-table');
document.getElementById('container-element').appendChild(activeTable);

Let me know if this helps you. Thanks!

[dmiric]

Umm ok I'll try that. Still it would be good to be able to refresh items in select. That must be a very common use case.

Thank you tho.

[OvidijusParsiunas]

When initially designing the component I did not anticipate that its configuration (a part from data) may need to be changed dynamically, hence I optimised it to be rendered once.
I think you are right that sometimes the configuration may need to be changed during a session. Active Table is updated continuously, hence I will explore this option in the future. Thankyou for your feedback!!

[OvidijusParsiunas]

I will close this issue, if you need any further assistance in this matter you can comment below and for everything else feel free to create a new issue. Thanks!