koalyptus / TableFilter

A Javascript library making HTML tables filterable and a bit more :)
https://www.tablefilter.com
MIT License
324 stars 95 forks source link

TableFilter library not working if there's toggle row with colspan #836

Open jsmithangular opened 1 year ago

jsmithangular commented 1 year ago

Describe the bug I have a table with toggle row in which the toggle row has colspan on it. I noticed that if there's a colspan on the first and second row, the filter doesn't work.

Reproduction steps: Steps to reproduce the behavior: Here's the sample fiddle in which the issue occurs. I used jquery and bootstrap 4 for toggle rows. Click the filters and it doesn't work. https://jsfiddle.net/f9uzxsqj/

Expected behavior When we click the filter, it should work as it is. Even though there's colspan on the first or second row.

Observed behavior: If there's colspan on the first or second row, the filter won't work.

Screenshots image

TableFilter version: 0.7.3 Browser and version: Any version OS and version: Any version Device: Any version

koalyptus commented 1 year ago

Hi @jsmithangular,

To help a little bit the library out:

  1. Add thead & tbody tags as per prerequisites
  2. Instruct which row should be used to infer the number of cells, internally called reference row:
    var tf = new TableFilter('myTable', filtersConfig, 0);
  3. Use the exclude_rows configuration option exclude_rows: [1] to make sure the headers are excluded from filtering, as we are telling the script the "reference row" is 0

image

cheers

koalyptus commented 1 year ago

@jsmithangular, Once instantiation fixed, you might want to use one of the many hooks to handle the expandable rows with merged cells. When they are visible as a result of toggling, the filtering process "ignores" those rows as it knows they don't have the expected number of cells. By design it doesn't want to know what to do with those type of unexpected rows. In short, you probably want to use the 'row-processed' event to decide what to do with the previously expanded rows. This event is mentioned in the Wiki section here: https://github.com/koalyptus/TableFilter/wiki/1.02-Main-features#events I couldn't find a demo using specifically the row-processed event, however this example showcases how to use similar events: http://www.tablefilter.com/conditional-cell-formatting.html

Cheers