colsVisibility can break colspan of table

svenj69 commented 1 year ago

I am using the colsVisibility extension together with single_filter. The table also has rows with colspan across the entire table.

Observed behavior: The initial view of the table is correct. Also the colsVisibility extension is working. Now if I hide the first column then the single filter row and all the other rows with colspan are disappearing. The view is restored if I unhide the first column. If I hide any other column then the table view is not disturbed. The single filter is visible and also the rows with colspan.

Screenshots

Table with all columns visible, single filter active table_ok

Table with 1st column hidden table_broken

TableFilter version: 0.7.3 Browser and version: Edge 108.0.1462.46 (Official build) (64-bit), Firefox 102.5.0esr (64-bit) OS and version: Windows 11, Linux Red Hat 7.9 Device: PC

Additional information/context: Currently I have modified the code so that the colsVisibility extension excludes the first column simply by letting the column loop counters start from 1 instead of 0.

Problem can be reliably reproduced, doesn't happen randomly: Yes

koalyptus commented 1 year ago

@svenj69,

If I understand it correctly, you might want to place the "Summary" row in a tfoot section, as in this example: https://codepen.io/koalyptus/pen/dVadqY

Cheers

koalyptus commented 1 year ago

And also help the script to handle the filter row by explicitly define a filters_row_index, this example might help: http://www.tablefilter.com/grouped-headers.html

svenj69 commented 1 year ago

@koalyptus

thanks for taking care of this issue. The "Summary" row is already part of tfoot. Here is the HTML code:

...
</tr>
<tfoot>
<tr>
   <th colspan="15" rowspan="1">Summary: 4 of 4 = 100.0 % passed, Total runtime: 0h:14m</th>
</tr>
</tfoot>
</table>
...

I also experimented with filters_row_index and headers_row_index. Wenn I use

...
filters_row_index: 1,
headers_row_index: 0,
...

the appearance of the table changes: filters1_headers0

But unfortunately deselecting the 1st column still removes the Single Filter row: filters1_headers0_tc

Kind regards Sven

koalyptus commented 1 year ago

@svenj69, You are probably not too far off from make it work. Cant see from here, but make sure you have a thead & tbody defined too. Also make sure you instantiate TableFilter by providing the reference row, as an example:

svenj69 commented 1 year ago

@koalyptus The tbody elements were missing but adding them had no impact on the behavior. My main concern is that the entire row with the single filter disappears. If I use a row with ordinary column filters then of course the filter row does not disappear. I also played with the numbers for the reference and filter rows but could not get it to work.

I used the table setup from http://www.tablefilter.com/single-filter.html and added the colsVisibility extention: demo_table_single_filter

When deselecting the first column than the filter also disappears: demo_table_single_filter_fail

Here is the HTML source:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>http://www.tablefilter.com/single-filter.html</title>
<link rel="stylesheet" type="text/css" href="resource://content-accessible/viewsource.css">
</head>

<body>
<table id="demo">
    <thead>
        <tr>
           <th>From</th>
           <th>Destination</th>
           <th>Road Distance (km)</th<>
           <th>By Air (hrs)</th>
           <th>By Rail (hrs)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>Sydney</td>
           <td>Adelaide</td>
           <td>1412</td>
           <td>1.4</td>
           <td>25.3</td>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>Brisbane</td>
            <td>982</td>
            <td>1.5</td>
            <td>16</td>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>Canberra</td>
            <td>286</td>
            <td>.6</td>
            <td>4.3</td>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>Melbourne</td>
            <td>872</td>
            <td>1.1</td>
            <td>10.5</td>
        </tr>
        <tr>
            <td>Adelaide</td>
            <td>Perth</td>
            <td>2781</td>
            <td>3.1</td>
            <td>38</td>
        </tr>
        <tr>
            <td>Adelaide</td>
            <td>Alice Springs</td>
            <td>1533</td>
            <td>2</td>
            <td>20.25</td>
        </tr>
        <tr>
            <td>Adelaide</td>
            <td>Brisbane</td>
            <td>2045</td>
            <td>2.15</td>
            <td>40</td>
        </tr>
    </tbody>
</table>

<script src="http://www.tablefilter.com/tablefilter/tablefilter.js"></script>

<script data-config>
    var tf = new TableFilter('demo', {
        base_path: 'http://www.tablefilter.com/tablefilter/',
        status_bar: true,
        rows_counter: true,
        single_filter: true,
        extensions:[
           {
                name: 'colsVisibility'
           }
        ]
    });
    tf.init();
</script>

</body>
</html>

Maybe you get it to work.

koalyptus commented 1 year ago

@svenj69, based on above example, it looks like the ColsVisibility extension and the single filter feature don't get along very well... I suggest this workaround to ensure the column containing the single filter doesn't disappear as a result of toggling the first column:

var tf = new TableFilter('demo', {
    base_path: 'http://www.tablefilter.com/tablefilter/',
    status_bar: true,
    rows_counter: true,
    single_filter: true,
    extensions:[
       {
           name: 'colsVisibility',
           on_after_col_hidden: function(extensionInstance, _colIndex) {
               var tf = extensionInstance.tf;
               tf.getFilterElement(0).parentNode.style.display = '';
           }
       }
    ]
});

tf.init();

Let me know how it goes

svenj69 commented 1 year ago

@koalyptus I can confirm that the workaround is also resolving the issue for me. The single filter does not disappear if the first column is deselected.

Thank you very much for finding a solution.

koalyptus / TableFilter

colsVisibility can break colspan of table #839