Table column headers mis-aligned: ugly and not equally spaced. Please help

Ask the community
,
1

The error I have is once my table loads data from code, the headers become misaligned:
Before the data is loaded into the table columns are lined up properly:

1036×167 2.71 KB

But once the table data is loaded from code the columns no longer are equally spaced. For example the “Type” column is way too close to the “Ticker” column

980×228 20.3 KB

Code to set table data:

async function setTable(tickerList,exp, moic) {

var myTableData = [{"Ticker":"","expiration":"","outMoney":"","volume":"","min cost":"", "moic":"","new_col":"","new_col2":""}]

$w("#table10").rows = myTableData
let formFactor = wixWindow.formFactor;
richTable(formFactor)

var oPrices = await getOptPrices(tickerList, selectedExpiration, selectedMOICNew);

oPrices.sort((a, b) => (a["MOIC"] < b["MOIC"]) ? 1 : -1)

var test1 = []

   if (formFactor == 'Desktop') {

       for (let i = 0; i < 50; i++) {

                test1.push({"Ticker":hiddenTicks[i], 
                "moic":"$" + numberWithCommas(oPrices[i]["minCost"].toFixed(0)),
                "expiration":opTypeDis,

                "outMoney":getDate(oPrices[i]["expirDate"]),

                "volume":oPrices[i]["strike"],
                "min_cost":((outMoney - 1.0)*100.0).toFixed(2) + "%",
                "new_col":(oPrices[i]["chanceProfit"]*100.0).toFixed(1) +"%",
                "new_col2":setGreenRed((globalData[i]["percentReturn"]*100.0)),

                });

            }

            }

            $w("#table10").rows = test1

            $w("#table10").refresh()

}

Code to set table columns: (I have tried manually setting the width to 100 for each but this did not fix the issue)


if (typeW == 'Desktop') {

    $w("#table10").columns = [
  {
    "id": "column_khr6ndb3",
    "dataPath": "Ticker",
    "label": "Ticker",
    "type": "richText",
  },
  {
    "id": "column_khr6nyv4",
    "dataPath": "expiration",
    "label": "Type",
    "type": "string",
  },
  {
    "id": "column_khr6ow7v",
    "dataPath": "outMoney",
    "label": "Expiration",
    "type": "string",
  },
  {
    "id": "column_khr5wyo7",
    "dataPath": "volume",
    "label": "Strike",
    "type": "string",
  },
  {
   "id": "column_khr5wtak",
    "dataPath": "min_cost",
    "label": "Break Even",
    "type": "string",
  },
  {
    "id": "column_khr6oa5k",
    "dataPath": "moic",
    "label": "Min Cost",
    "type": "richText",
  },
  {
 "id": "column_khr6oa5k",
  "dataPath": "new_col",
  "label": "Chance of Profit",
  "type": "richText"
}, 
{
 "id": "column_ko67juei",
  "dataPath": "new_col2",
  "label": "Projected Return",
  "type": "richText"
}

];
}
2

Yes. It’s a bug. It’s not a problem on your side.

3

Hi AiFund,
Can you please share the URL for your site and the page with the issue so we can investigate? Thanks.

4

@marlowe-shaeffer Absolutely, thank you: https://www.aioptionscreener . com
The issue occurs when using Chrome (not Safari) on the table located on the main page.

5

@aifundmetrics Thanks. I’m able to see the problem. I’ll send it over to our team to investigate and report back when I have an update.

6

We are still investigating your site, but one suggestion is to set Automatic Table Height (via Layout menu). This might solve your issue in the meantime. Let us know! Thanks.

1242×678 96.4 KB

7

We’re still seeing this issue, @marlowe-shaeffer . Is there a fix in development or a ticket we can upvote?

8

Hi @cheryl-medley ,
This bug isn’t fixed yet. I just sent a note to the developer and will let you know as soon as I have information. Thanks for your patience!

9

This bug has been fixed and should be deployed any day now. Keep an eye out for the alignment issue to be resolved! Thanks for your patience.

10

@marlowe-shaeffer Hooray! Thanks for getting this taken care of! Looking forward to it.