Column Filters not working with table composed of colspan cells containing HTML elements

[AustinFrederick]

Hello! I am trying to use this in my project. I have a somewhat complex HTML table that contains 25 columns. The first 13 columns contain strings. The last 12 columns contain HTML elements (divs) which represent the timing of various activities in a project.

The last 12 columns are composed of a 12 column colspan in each row, which house these divs (screenshot below for clarification). I am able to get the table filter to work on a basic grid, but when I apply it to this grid then the column filters dont work. All other features seem to work however.

My table is built dynamically on page load, including all html elements. After the table is built I use this code to initialize the filters.

const tf = new TableFilter('meqGantt', {
        base_path: 'static/tablefilter/',
        filters_col_index: 1,
        paging: true,
        state: { types: ['cookie'] },
        alternate_rows: true,
        rows_counter: true,
        btn_reset: {
            text: 'Clear'
        },
        status_bar: true,
        col_1: 'select',
        col_2: 'select',

        /* columns visibility and sort extension */
        extensions: [{
            name: 'sort'
        }]
    });
tf.init();

Note that that code isnt fully set up as I was just trying to get at least one or two columns filterable. I have tried many different variations of that chunk of code and nothing worked for me so far.

Here is the skeleton of my table before it gets loaded with data
`

                            <thead style="background: #f5f5f5;border-radius: 5px !important;border: 1px solid #cecece; ">
                            <tr style="font-weight: 600; text-align: center">
                                <th class="id">Project Number</th>
                                <th class="projectNumber">Project Number</th>
                                <th class="projectName">Project Name</th>
                                <th class="location">City-State-Country</th>
                                <th class="projectExecutive">Project Executive</th>
                                <th class="projectManager">Project Manager</th>
                                <th class="planner">Planner</th>
                                <th class="coordinator">Coordinator</th>
                                <th class="bim">BIM</th>
                                <th class="procurement">Procurement</th>
                                <th class="logistics">Logistics</th>
                                <th class="services">Services</th>
                                <th class="status">Status</th>
                                <th class="dateCellOne date" style="border-left: 1px solid black !important;" >Date 1</th>
                                <th class="dateCellTwo date" >Date 2</th>
                                <th class="dateCellThree date" >Date 3</th>
                                <th class="dateCellFour date" >Date 4</th>
                                <th class="dateCellFive date" >Date 5</th>
                                <th class="dateCellSix date" >Date 6</th>
                                <th class="dateCellSeven date" >Date 7</th>
                                <th class="dateCellEight date" >Date 8</th>
                                <th class="dateCellNine date" >Date 9</th>
                                <th class="dateCellTen date" >Date 10</th>
                                <th class="dateCellEleven date" >Date 11</th>
                                <th class="dateCellTwelve date" >Date 12</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>`

And here is a screenshot of what I am seeing so that you can understand how this table gets used. All data fed to the table is a String unless its under one of the date columns. You can see the area it creates in the header for the filters, but nothing shows up.

Is the TableFilter compatible with what I am trying to do or do I need to create me own filtering system?

Thanks!

For usage and support questions, please check out resources below, you might find an answer:

• https://www.tablefilter.com/
• https://www.tablefilter.com/docs/
• https://www.tablefilter.com/examples.html
• https://github.com/koalyptus/TableFilter/wiki/
• https://github.com/koalyptus/TableFilter/issues?q=is%3Aissue+is%3Aclosed
• https://codepen.io/koalyptus/pens/public/

[koalyptus]

Hi @AustinFrederick,

Do you have any javascript error appearing the browser's console inspector?

Probably unrelated, the filters_col_index option does not exist, there is a filters_row_index.
Also noticed the toolbar containing the rows counter, help & clear button is appearing underneath the table, not sure if there is a styling issue/interference, but that section at least gives an indication something is generated by the library...

[AustinFrederick]

I dont have any JS errors in the console. The only thing I got was a warning about the cookies, but taking this state: { types: ['cookie'] }, off got rid of that warning. I also changed filters_col_index back to filters_row_index . I am able to get this to fully work on a simple grid, right under the one I showed you, but when applying it to this specific grid it doesnt work and I have a feeling its due to the div elements in the colspan. I could be totally wrong though. Is there a way to specify which columns I want to include/exclude in the filter? Can I exclude the last 12 columns?

[koalyptus]

Hard to tell from the info provided above what could be the issue. Also not sure why the toolbar is appearing at the bottom of the table in the screenshot, the config is not instructing to render it at the bottom.

Would you be able to reproduce the issue and share it online on Codepen or equivalent?

[ramdeniakki]

<title>Column Filters Example</title> <style> /* Basic styling for the table */ table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } </style>

Sample Table with Column Filters

Project Number	Project Name	City-State-Country	Project Executive	Status
1	Project A	New York, USA	John Doe	Active
2	Project B	London, UK	Jane Smith	Inactive

<script> document.addEventListener('DOMContentLoaded', function(){ // Function to filter table data based on user input function filterColumn(index, value) { const table = document.getElementById('myTable'); const rows = table.getElementsByTagName('tr'); // Loop through each row in the table for (let i = 1; i < rows.length; i++) { const row = rows[i]; const cells = row.getElementsByTagName('td'); const cell = cells[index]; // Check if cell matches the filter value if (cell.innerHTML.toLowerCase().includes(value.toLowerCase())) { row.style.display = ''; } else { row.style.display = 'none'; } } } // Add event listeners to input fields for filtering const filters = document.querySelectorAll('input[type="text"]'); filters.forEach(function(input) { input.addEventListener('input', function() { const columnIndex = parseInt(this.dataset.columnIndex); const filterValue = this.value; filterColumn(columnIndex, filterValue); }); }); }); </script>

Project Number:

Project Name:

Location:

Project Executive:

Status: