Column Filter Button Option next to search (Feature Request)

[shaunroselt]

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.

[johanneswilm]

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

[shaunroselt]

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 😁😂

[shaunroselt]

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.

[shaunroselt]

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.

[johanneswilm]

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.

[shaunroselt]

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

[shaunroselt]

@johanneswilm I am basically done with implementing this into the library.

I will quickly pull your latest code and then test my changes and make sure it's all working and then I'll open a Pull Request.

But you'll definitely want to just review my code before you merge it in and make sure it's all good 🙏🏻

I'll try and get the PR ready asap (within the next 2 hours).

[shaunroselt]

#329

😁

[johanneswilm]

This is now possible. See https://fiduswriter.github.io/simple-datatables/demos/23-column-filter-button/

[AndreaGelmini]

Hello everyone. I'm playing around with this feature.
However, I am not clear on how to change the button's icon. I am not quite sure about this part of the code.
https://github.com/fiduswriter/simple-datatables/blob/fd8986fbae0dd5b69a22df9dfab1e28779fc3e31/src/column_filter/column_filter.ts#L52C1-L61C14
From what I understand, it checks the wrapperDOM for a presence of an element with the class datatable-column-filter-button. If present, it uses this element, otherwise, it generates the button. I tried adding a simple button in the table tag, for example,

<table>
<button class="datatable-column-filter-button">icon</button>
...
</table>

but nothing. Therefore, at this point, the question is

Also, to add some style, I tried to add Tailwind CSS classes to the button, but I see this error in the console.

		window.columnFilter = addColumnFilter(Table, {
			classes: {
				button: "datatable-column-filter-button text-blue-700 border border-blue-700 hover:bg-blue-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center me-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:focus:ring-blue-800 dark:hover:bg-blue-500",
				menu: "datatable-column-filter-menu",
				container: "datatable-column-filter-container",
				wrapper: "datatable-column-filter-wrapper"
			},
			labels: {
				button: "Filter columns within the table" // The filter button title
			},
			hiddenColumns: [0]
		})
		

simple-datatables.index-cd1358d6e2ef8a56343f636724778b99.js:7 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '.datatable-column-filter-button.text-blue-700.border.border-blue-700.hover:bg-blue-700.hover:text-white.focus:ring-4.focus:outline-none.focus:ring-blue-300.font-medium.rounded-lg.text-sm.p-2.5.text-center.inline-flex.items-center.me-2.dark:border-blue-500.dark:text-blue-500.dark:hover:text-white.dark:focus:ring-blue-800.dark:hover:bg-blue-500' is not a valid selector.