Need for production grade DataTable Column Toggle functionality

[turboteddy]

This started as a request in the forum (see post), where I was asked to create an issue...

Recap

We're using primevue datatable to display large amounts of data, and offer the user to toggle columns as described in documentation. We have noted that it requires a considerable amount of time to toggle columns (sometimes up to 5 seconds). When we took a closer look at the code, we noticed that this is a very expensive / inefficient way of doing it:

    // ....
    methods: {
        onToggle(value) {
            this.selectedColumns = this.columns.filter(col => value.includes(col));
        }
    }

We assume it would be far more efficient to simply toggle a CSS class that conditionally hides a whole column (dispay:none). The easiest way would be to add style to the table column element (col), see example. But of some reason, you don't seem to employ col elements for the datatable (why not?). Given the lack of column elements, it would still be much better to use CSS - as for example this post describes. Is this something you plan to fix?

I'm submitting a ...

[x] bug report (can partially be considered a bug, as this feature currently does not work properly with big datasets)
[x] feature request  (can partially be considered a feature request, as the current feature isn't good enough)

CodeSandbox Case (Bug Reports) Sorry, we don't have the possibility to share our code, and not the time to create demo code to demonstrate the issue. But the issue is quite intuitive - by looking at the code above, it's clear that the current way to toggle columns is a poor implementation / guide to go by.

Current behavior It takes many seconds to toggle visibility of columns with large datasets (currently about 5 seconds with the data we have in production).

Expected behavior Toggling of visibility columns should be a snappy functionality (instant response), and should not require much JS to implement. Would have expected this to be implemented with vanilla CSS (e.g. a hidden class with display: none), or using v-show (on column element). Perhaps optionally v-if (depends on expected user behavior - how often columns are toggled back and forth).

Minimal reproduction of the problem with instructions

1. Use the current toggle columns documentation as basis.
2. Populate the datatable with large dataset (for us, it's about 300 rows and 4 columns), with some columns for which's cells use slots for contents.
3. Toggle some columns and wait... and wait some more :)

What is the motivation / use case for changing the behavior? The current way of toggling primevue datatable column isn't production grade quality, and cannot be used on large datasets. It's bad UX, and we therefore have to remove column toggling until a better implementation is available. We considered making a custom tweak using CSS classes - but that would have taken too much time, and probably not be future proof. We therefore advise the primevue datatable to use column elements and CSS for toggling them.

Environment:

• Vue version: 3.0 - 3.2 (we recently upgraded - same)

• PrimeVue version: 3.6.2 - 3.9.1

• Browser: : all

[turboteddy]

@tugcekucukoglu Any progress on this? Not sure why this has been labelled as "discussion", as it's clearly a major shortcoming of the datatable. We can't use the Column Toggle functionality as it is now - it's very inefficient and users have started complaining of bad performance.

[turboteddy]

Hello?! This was labelled "discussion" by @tugcekucukoglu months ago. When does the discussion start? Please let me know ASAP if you need any more input on this. Otherwise, please fix this. The bug report contains all the details required to address this. Progress on this issue would be highly appreciated. Tnx.

[turboteddy]

Hello, hello, is there anybody following this up?! @tugcekucukoglu , you encouraged me to write this bug report (see post in forum) - and it is a bug when functionality doesn't work properly.

When you ask people to invest time and effort to write such reports (thereby contributing to your community), one should expect that such reports will be properly followed up - within reasonable time. You're a commercial open core product, and I actually represent a customer that is paying big $$$ for your Prime-stuff. So at the very least, one should expect you to invest some time to kick off what you have labelled a "discussion" about this bug.

[turboteddy]

@cagataycivici and @tugcekucukoglu - is this on your radar?

[rreynier]

General performance of this table library is pretty bad all around once you starting getting 1000+ records. But if you look at a big competitor like ag-grid, they can handle 10k+ records with absolutely not issue. Frustrating to see this type of feature request get ignored.

[mertsincan]

Hi all,

The column toggle feature of DataTable is not included in the core as build-in. It has a structure that the users completely control. As you can see in our example, how you can set up such a toggle structure is exemplified. It is up to the user whether to follow this path or not. For example, you can use another component instead of the MultiSelect component. Our demo is just an example. As you mentioned, you can set it up in a structure you hide/show with just CSS. No structure within PrimeVue interferes with this.

As for the performance question, when you try to display a large dataset with HTML <table>,the append/removal of each data from the DOM will be quite slow. This is an expected situation. It is not just an issue specific to PrimeVue. There are some methodologies to deal with such big data structures. The main purpose of these is to split the data. Structures such as paginator, virtualscroller and lazy in PrimeVue are a blessing for this. Ag-grid has a virtualscroller structure by default. In PrimeVue, this happens entirely thanks to the props that you can configure. I started a series of articles on how to overcome such performance problems. Maybe you're interested; https://dev.to/mertsincan/handling-big-data-on-datatable-with-checkbox-selection-multiselect-4hgc

Also, please see my columnToggler + VirtualScroller example with 1,000,000 rows; https://stackblitz.com/edit/9brypt?file=src%2FApp.vue

Best Regards,