Multiple column show/hide functionality & column show/hide functionality by index

[EdwinVanRooij]

Is your feature request related to a problem? Please describe.
We have a performance issue with showing/hiding the visibility of many columns at once (over 80).

Describe the solution you'd like
A new method (in core.js): showColumns(array: fields)
It should accept an array of field names in order to show all of them at once.

A new method (in core.js): hideColumns(array: fields)
It should accept an array of field names in order to hide all of them at once.

A new method (in core.js): toggleColumns(array: fields)
It should accept an array of field names in order to toggle all of them at once.

Describe alternatives you've considered
Currently I'm doing this to show many columns at once:

columnIndexesToChange.forEach((index) => {
	invoiceTable.columnManager.getColumns()[index].show();
});

We have a button to toggle the visibility state of 80 columns (its UI changes based on a variable we keep track of ourselves), so we need to show and hide columns quite frequently. In column.js, I can see that quite some extra functions are called after one show/hide call. I imagine many of those (like saving the column configuration) could be performed only once, after setting the visibility state of many columns, in contrast to every time (so 80 times).

It would also be nice to be able to toggle column visibility state by index, rather than only by name. Maybe inside of the method, we could determine whether an index or name was provided by checking for type: number means an index was provided, string means a name was provided. Search for the name accordingly.

[olifolkerd]

Hey @EdwinVanRooij

The likely reason for the performance degradation is that the table is being redrawn after every column show/hide.

The good news is there is already a way to deal with this built into Tabulator, the Redraw Management System.

By using the blockRedraw function you can suspend table redraws, then make all the updates you want, then call the restoreRedraw function to redraw the table when you are all in.

table.blockRedraw();
//do many things
table.restoreRedraw();

Give that a go and let me know how you get on.

Cheers

Oli :)

[EdwinVanRooij]

Thanks for the quick response!

Unfortunately, I've noticed no significant performance improvement by using your suggestion.

I did a quick performance test using the blockRedraw/restoreRedraw:

	if (allColumnsAreShown) {
		// Show all columns.
		invoiceTable.blockRedraw();

		columnIndexesToChange.forEach((index) => {
			invoiceTable.columnManager.getColumns()[index].show();
		});

		invoiceTable.restoreRedraw();
	} else {
		// Hide all columns.
		invoiceTable.blockRedraw();

		columnIndexesToChange.forEach((index) => {
			invoiceTable.columnManager.getColumns()[index].hide();
		});

		invoiceTable.restoreRedraw();
	}

Expand from ~20 into ~100 columns (show 80 columns): 39 seconds
Collapse from ~100 into 20 columns (hide 80 columns): 39 seconds

---

And for the "old" code:

	if (allColumnsAreShown) {
		// Show all columns.
		columnIndexesToChange.forEach((index) => {
			invoiceTable.columnManager.getColumns()[index].show();
		});
	} else {
		// Hide all columns.
		columnIndexesToChange.forEach((index) => {
			invoiceTable.columnManager.getColumns()[index].hide();
		});
	}

Without block/restore redraw:
Expand 39 seconds
Collapse 40 seconds

---

This is my table configuration:

	invoiceTable = new Tabulator(invoicesTableId, {
		data: data,
		height: "585px", // Set the height of the table, if we don't, all rows will load at once.
		columns: invoiceColumnsDefinitionTabulator,
		virtualDomHoz: true, // Make the columns load on demand, as we scroll horizontally.
		selectable: true, //make rows selectable
		tableBuilding: initializingInvoicesTable,
		tableBuilt: initializedInvoicesTable,
		rowClick: (clickEventObject, clickedRow) => {
			onSelectedInvoiceRowsChanged();
		},
	});

Note the virtualDomHoz: true, maybe this has an impact here? I wouldn't know tbh haha.

Maybe I could write the suggested solution from my first post and submit a PR. Would you be interested in it if I did so?