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

stephane-klein commented 11 months ago

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 commented 11 months ago

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

stephane-klein commented 11 months ago

@bryanmylee

bryanmylee commented 11 months ago

Ahh thanks for the report! I appreciate the help!

stephane-klein commented 11 months ago

@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 commented 11 months ago

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 commented 11 months ago

@bryanmylee I think the bug is fixed with this patch https://github.com/stephane-klein/svelte-headless-table/commit/4c4c72abfeae674272de51b0b27bcab4078e54a1

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

stephane-klein commented 11 months ago

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

@bryanmylee cleaned commit : https://github.com/stephane-klein/svelte-headless-table/commit/0cea8b7b007f6b6e530bafe7fdb841ccf9393f55

bryanmylee / svelte-headless-table

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