addGridLayout isn't compatible with addHiddenColumns : hidden columns are not taken into account when calculating the number of columns

[stephane-klein]

Hi,

I just discovered that the addGridLayout isn't compatible with addHiddenColumns.

You can see the problem by trying to hide columns in this example: https://svelte.dev/repl/3c2e3375c82748c0941699e4f427c0a7?version=3.48.0

I think hidden columns are not taken into account when calculating the number of columns here.

I'll try to create a pull request to correct this issue 🤞.

Best regards,
Stéphane

[stephane-klein]

I'm working in this branch https://github.com/stephane-klein/svelte-headless-table/tree/issue-179

[stephane-klein]

@bryanmylee

[bryanmylee]

Ahh thanks for the report! I appreciate the help!

[stephane-klein]

@bryanmylee more information in this screencast: https://youtu.be/HQ_AFzAjWFc

This screencast shows a svelte-headless-table configured to use the addGridLayout and addHiddenColumns plugins together.

Here is the source code example page used in this screencast: https://github.com/stephane-klein/svelte-headless-table/blob/issue-179/src/routes/grid-layout-with-hidden/%2Bpage.svelte

First experience:

• If I hide the last column progress, everything works fine 🙂
• If I then hide the last visible column status, everything works fine 🙂

A bug occurs if I hide a column that is not the last visible column, example, I execute :

• I reset the page, then all columns are visible
• I hide age column, then the bug is visible : the table cells are not correctly displayed 🙁

Why? In html source code rendered, I see:

<tr ...>
    <th style="grid-column: 1 / span 1;" ...>First Name</th>
    <th style="grid-column: 3 / span 1;" ...>Age</th>
    <th style="grid-column: 4 / span 1;" ...>Status</th>
    <th style="grid-column: 5 / span 1;" ...>Visits</th>
    <th style="grid-column: 6 / span 1;" ...>Profile Progress</th>
</tr>

I notice that the grid-column value of Age is 3 when it shoud be 2.

Another observation:

• I reset the page, then all columns are visible
• I hide in order: progress, visits, status
• I show visits column, result : everything works fine 🙂

<tr ...>
  <th style="grid-column: 1 / span 1;" ...>First Name</th>
  <th style="grid-column: 2 / span 1;" ...>Last Name</th>
  <th style="grid-column: 3 / span 1;" ...>Age</th>
  <th style="grid-column: 4 / span 1;" ...>Visits</th>
</tr>

The grid-column values are all correctly calculated.

For the moment, here's what I've deduced from these observations: the grid-column values of columns positioned after the hidden column DOM node are not updated.
Updating grid-column values works correctly if a column DOM node is inserted, whatever its position.

Why does this happen? For the moment, I don't know 🤷🏻‍♂️.

[stephane-klein]

Why does this happen? For the moment, I don't know 🤷🏻‍♂️.

@bryanmylee When a column is hidden, this line is not executed for columns placed after the hidden column.

[stephane-klein]

@bryanmylee I think the bug is fixed with this patch stephane-klein@4c4c72a

I will clean my commit and submit a merge request 🙂.

[stephane-klein]

I will clean my commit and submit a merge request 🙂.

@bryanmylee cleaned commit : stephane-klein@0cea8b7