The persistentFilter in the Tabulator is failing to verify for the headerFilterEmptyCheck

Using Tabulator version 4.4.3

When filtering the checkbox in the usual way, everything works fine. If I set a filtered checkbox to true on a column, it functions correctly:

  headerFilterEmptyCheck: function (value) {
       return !value;
     },

However, when using persistentFilter: true and reloading the page, the checkbox filter will only display true=true. It never shows false or null when unchecked (resulting in 0 rows being returned).

Here is my Column Definition:

{
     title: "Do it?",
     field: "hasToDoIt",
     responsive: 0,
     formatter: "tickCross",
     formatterParams: {
       allowEmpty: true,
       allowTruthy: false,
       tickElement: "<i class='fa fa-check'></i>",
       crossElement: ""
     },
     headerFilter: "tickCross",
     headerFilterEmptyCheck: function (value) {
       return !value; //only filter when the value is true
     },
     sorter: "string",
     headerSortTristate: true,
     width: 80,
     align: 'center'
   },

This is my Table Definition:

new Tabulator("#" + config.Key, {
      index: "_id",
      reactiveData: true,
      persistenceMode: true,
      persistenceID: "accountsummary",
      persistentSort: true,
      persistentFilter: true,
      autoResize: true,
      layout: "fitColumns",
      responsiveLayout: true,
      virtualDomBuffer: 100,
      headerSortTristate: true, 
      data: this.state.Data,
      columns: this.state.Columns,
      groupBy: "Geo",
      groupToggleElement: "header",
      groupStartOpen: true,
      sortOrderReverse: true,
      initialSort: [{ column: "Geo", dir: "asc" }, { column: "Account", dir: "asc" }],
      rowClick: (e, row) => {

        });
      }

After selecting the checkbox, reloading the page should show the filtered results. Unchecking the box should display all rows again.

Answer №1

The reason for this is that the persistent filters feature only saves filters that are applied using the setFilter function, not those applied through column headers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updated the object in an array retrieved from an API by adding a new key-value pair. Attempted to toggle the key value afterwards, only to find that

Essentially, I am retrieving products from an API and including a new key value isAdded in the object within the products array. I utilized a foreach loop to add that key and it was successfully added. Now, when I click the Add to cart button, the product ...

Attempting to deploy my node.js application on Heroku resulted in an error message saying that the web process failed to bind to $PORT within 60 seconds of launch, causing the process to exit with status

I recently encountered an issue while attempting to deploy my node.js app on Heroku. The error message stated that the Web process failed to bind to $PORT within 60 seconds of launch, and the Process exited with status 137. I'm unsure of how to resolv ...

Sending information into MySQL using NodeJS with the help of Postman

As a newcomer in the field, I am exploring how to combine MySQL with nodeJS for integrating projects into WordPress. app.post('/users/add', (req, res) => { id = req.body.id, firstname = req.body.firstname, surname = req.body.surname ...

Cannot trigger event ascn.onchange does not exist as a function

Need to trigger the onChange function and pass parameters within it. Here's what I have tried: setTimeout(function() { document.getElementById(input.key)?.onchange({}) }, 200); Encountering the following error message: cn.onchange is not a function ...

Unusual marking on the navigation bar

Currently, I am making updates to a website that was created by a previous employee long before I joined the team. One of the requested changes is to eliminate the orange box surrounding the navigation links. The navigation appears to be generated using Ja ...

Guide on how to trigger a pop-up modal to open a new webpage by clicking on a hyperlink

I have a page called one.html that has a link on it <a href="#">Click to open second page<a/> When this link is clicked, I would like for second.html to open in a popup modal. The second page contains a basic table that I want to di ...

Configuring headless unit testing with requirejs

Seeking a JavaScript unit testing environment, I feel like I'm on a quest for the Holy Grail. The criteria are as follows: testing Requirejs AMD modules isolating each module by mocking out dependencies ability to test in-browser during development ...

Encountering a TypeError stating that the "option is undefined" error has occurred

Unexpectedly, my dropdown menu that was functioning perfectly fine is now throwing an error. I've made several changes and none of them seem to resolve the issue. Could it be a data type mismatch or am I missing something crucial here? Your insights ...

My code to hide the popup when clicking outside doesn't seem to be working. Can you help me figure out why?

After searching around on stackoverflow, I stumbled upon a solution that worked for me: jQuery(document).mouseup(function (e){ var container = jQuery(".quick-info"); if (container.has(e.target).length === 0) { container.hide(); } }); ...

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

The function of adding data to a list in AngularJS seems to be malfunctioning

I have a JSON list that I am storing in an AngularJS variable called score $scope.jobTemplate = [{ type: "AddInstructions", visible: false, buttonText: "Add Instructions", editableInstructionsList: [{ Number: totalEditableInstruction, Text: "Instruction ...

Retrieve the height of an element containing images, even if the images have not finished loading

After making an Ajax call and inserting some HTML code, I require the height of the newly added div in the Ajax callback. However, the issue arises because the HTML from the Ajax call contains elements like images that need to be loaded first. I have crea ...

sw-precache-webpack-plugin for webpack's default service worker template

When utilizing the sw-precache-webpack-plugin to create a service worker for my project, I've noticed that while all my fonts, js, and css files are stored in the cache storage, the index/html file is missing. This has resulted in it not functioning p ...

When browserify is utilized, the error "function is not defined" may show up as an Un

Exploring an example at and attempting a function call as shown below: My HTML code is: <!DOCTYPE html> <html> <head> <title>Testing Browserify</title> <script src="bundle.js"></script> </head> <body& ...

Adding to the beginning of a list in JQuery mobile

Having trouble figuring out how to prepend my list in jQuery mobile while keeping the divider on top of the most recent item added. I attempted to prepend the newly added item, but it ended up shifting the divider to the bottom instead. function loadScan ...

When organizing data, the key value pair automatically sorts information according to the specified key

I have created a key value pair in Angular. The key represents the questionId and the value is the baseQuestion. The baseQuestion value may be null. One issue I am facing is that after insertion, the key value pairs are automatically sorted in ascending ...

How can I trigger a series of functions in sequence when a button is clicked using Vue.js?

When I click, I need to call 3 functions in a specific order: <CButton @click=" getBillPrice(); updateBill(); postData();" type="submit" color="primary">Save</CButton> However, the func ...

Using the DatePicker component with non-escaped Latin alphabet characters in date-fns for ReactJS

While attempting to integrate the DatePicker component from Material UI into my React project, I encountered an error. Although many attributed the issue to a version discrepancy, what ultimately resolved the problem for me was assigning a value to the Da ...

Logging in using Selenium WebDriver in Java

I'm just starting out with selenium webdriver and I need to automate a webpage for my project. Right now, I'm working on the login page but I'm having trouble with the login button. I'm not sure which locator to use for it. The login bu ...

Ensure that all asynchronous code within the class constructor finishes executing before any class methods are invoked

Looking to create a class that takes a filename as a parameter in the constructor, loads the file using XmlHttpRequest, and stores the result in a class variable. The problem arises with the asynchronous nature of request.onreadystatechange, causing the ge ...