[Feature Request] Ability to hide rows

[573927]

It would be great to have a method to toggle visibility of rows. At the moment I use a button that toggles visibility via CSS and a class, but this method doesn't update the info "Showing x to y of z entries".

[johanneswilm]

Can you not filter for the rows you need?

[573927]

Filtering on the fly works great in general. However, my use case is to have a table that contains tasks. Some are completed, some not. It would be nice to be able to programmatically hide the completed rows on initial table display and have a button to toggle their visibility. I am guessing the logic used for the normal filtering could be used for this, but being a JS newbie, I didn't yet understand that well enough to add this functionality myself.

[arcangelochine]

I think you should filter by a flag that is set when you click your completion button.

[AndreaGelmini]

Hello, I think this is a very specific behavior, given the use case. I would see it as a good solution added by a potential plugin, similar to how the column filter and editor work.
So, off the cuff, it could be done in this way, perhaps.

const Table = new DataTable('#table', {
	paging: false,
	rowNavigation: false,
	tabIndex: 1,
	columns: [
		{select: 5, render: (data, cell, row) => {
			if (  data.flag === 'complete' ) {
				row.classList.add('hidden');
			}
			return data;
		}
		]
});

I have not tested it, but it should work. Assuming that in column 5, which would be column 6 visually, if the "flag" content is identical to "complete", then add the "hidden" class to the row.
I recommend doing a console.log of data, col, row.
Now, the issue is that every time someone clicks on the "completed" button, you need to activate an action that destroys the table, reloads updated data, and then regenerates the table.
You should use these actions.
https://fiduswriter.github.io/simple-datatables/documentation/Events#datatablerefresh
https://fiduswriter.github.io/simple-datatables/documentation/Events#datatableupdate

The technique I am using for my use case is as follows. However, I need to make the one-time row transparent.

    hideRow(e) {
        const tr = e.target.closest('tr');

        tr.classList.remove('opacity-100');
        tr.classList.add('opacity-0');

        let handleAnimationEnd = () => {
            tr.classList.add('hidden');
            tr.removeEventListener("transitionend", handleAnimationEnd);
        }

        tr.addEventListener("transitionend", handleAnimationEnd);

        return;
    }

[johanneswilm]

@AndreaGelmini Thanks for this example. I am sure that others will find it useful. One thing to keep in mind is that this likely won't work if you use pagination as the engine doesn't know which rows are shown and which ones are not. In those cases one would instead have to do as arcangelochine suggests.

[AndreaGelmini]

I apologize. I forgot to mention that in my use case, the button is inside a cell in every row. Therefore, const tr = e.target.closest('tr'); it accurately hides the row that I need.