Column Filter Button Option next to search (Feature Request)

[Shaun Roselt]

I built my own little button next to the search box that I can use to hide/show different columns in the table and it's pretty useful:

So in the above image, all columns will be visible except the "OEM" column. There's also a "Reset Columns" option at the bottom which will make all of them visible again.

I think it would be cool if this functionality could be built into the library by default and you can simply enable it and then it's there.

This would be super useful to many people especially if you have a lot of columns and don't want all of them to always be visible and want the user to be able to configure and change it.

[Johannes Wilm]

@shaunroselt Sure, do you want to write a PR?

[Shaun Roselt]

Yes, but also no.

I think you should rather do it in the best possible way. You know what is best for your library :)

My code is barely holding itself together 😁😂

[Shaun Roselt]

This is how I am doing the hide/show of the columns:

for (let i in dataTable.columns.dt.data.headings) {
    const ColumnCheckbox = document.getElementById(`${TableParent.id}_${i}`);
    if (ColumnCheckbox !== null) {
        if (ColumnCheckbox.checked)
            dataTable.columns.show([i]);
        else
            dataTable.columns.hide([i]);
    }
}

I am basically looping through all of my checkboxes in that dropdown and then I look at their checked attribute and depending on that I use the columns.hide and columns.show methods.

[Shaun Roselt]

Oh and this is how I built the dropdown:

let ColumnsHTML = "";
for (let i in dataTable.columns.dt.data.headings)
    ColumnsHTML += `
        <li>
            <div class="dropdown-item" onclick="event.stopPropagation();this.querySelector('input').toggleAttribute('checked');">
                <input class="form-check-input" type="checkbox" value="" id="${TableParent.id}_${i}" checked onclick="">
                <label class="form-check-label" for="${TableParent.id}_${i}" onclick="event.stopPropagation();">
                    ${dataTable.columns.dt.data.headings[i].text}
                </label>
            </div>
        </li>
    `;
document.querySelector(`#tblVehicles .datatable-search`).insertAdjacentHTML("afterbegin",`
    <div class="btn-group">
        <button type="button" class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-funnel"></i>
        </button>
        <ul class="dropdown-menu">
            <li><h6 class="dropdown-header">Hide/Show Columns</h6></li>
            ${ColumnsHTML}
            <li><hr class="dropdown-divider"></li>
            <li><button role="button" class="dropdown-item" onclick="event.stopPropagation();ResetSearchFilters();">Reset Columns</button></li>
        </ul>
    </div>
`);

The CSS classes are Bootstrap classes.

[Johannes Wilm]

I think you should rather do it in the best possible way. You know what is best for your library :)

This library is really just minor side project of Fidus Writer - an open source text editor. I am somewhat overwhelmed by the amount of use it gets / number of bug reports. It's not the main project here though, so I would not be opposed at all to someone else making code contributions.

[Shaun Roselt]

I've never heard of Fidus Writer before actually. I will check it out.

This library is great though. I originally found a JQuery version which looks and works exactly like this one and then I ported it to vanilla JavaScript myself... and then shortly after that I discovered that someone else did exactly the same and so I started using this one instead of my own one.

I started using this with v3 or v4 for one of my projects long ago, but this past week I jumped to v7 and I am now using this library for all of my projects (around 10 different websites).

So yeah, I'm a big fan. Thanks for all the work on it.

I would love to contribute to it in the future, but I will need to familiarize myself with your codebase first and also learn TypeScript. Right now, I don't feel comfortable adding this feature to the library yet.

[UnicornXP]

+1