The step-by-step guide to implementing header filters in autoColumns

I recently started using the tabulator library to create dynamic tables by setting autoColumns:true. Everything was working smoothly until I wanted to add header filters for each column. Despite referring to the documentation, I struggled to find a solution. Below is the snippet of my code:

init: function() {
      var _this = this;
      this.tabulator = new Tabulator("#example", {
        autoColumns:true,
        height:"500px",
        movableColumns: true,
        ajaxProgressiveLoad:"scroll",
        paginationSize:20,
        ajaxProgressiveLoadScrollMargin: 400,
        ajaxLoader: true,
        ajaxLoaderLoading: 'updating data',
        ajaxProgressiveLoadDelay: 200,
        ajaxResponse:function(url, params, response){  
          return {last_page: _this.iTotalPage, data: response}; 
        }
      });
     this.setData(); 
},

setData: function() {
  this.tabulator.setData("/tableData", {searchValue: this.sSerachValue});
},

I'm wondering if there's another way to add header filters without having to manually select columns using (this.tabulator.getColumns()) and mapping them to set filters function?

javascripttabulator

Answer №1

Uncertain if this solution will align with your requirements...
Nevertheless, here is a suggestion using the techniques from an exceptional library that I recently came across ;)

    // Your initial code snippet here...

        this.setData();
        this.setHeaders();
    },
    setData: function() {
        this.tabulator.setData(tableData, {});
    },
    setHeaders: function() {
        var columns = this.tabulator.getColumnDefinitions();

        // Modification to meet your specifications
        columns.forEach(column => {
            column.headerFilter = "input";
        });

        this.tabulator.setColumns(columns);
    }

Alternatively, you could incorporate a button to initiate this process after constructing the table

document.getElementById('setHeaders').onclick = function(e) {
    var columns = object.tabulator.getColumnDefinitions();

    columns.forEach(column => {
        column.headerFilter = "input";
    });

    object.tabulator.setColumns(columns);
}

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

Having trouble retrieving accurate data in jQuery ajax post success when running on localhost with XAMPP

I am currently working on an ajax post using jQuery to send data to a php file and facing an issue with getting the correct data in the success function. Below are my code snippets: JAVASCRIPT $.ajax({ url: "ajax/chart-kpi-trend.php", data: { ...

javascriptphpjqueryajax

Restart animation following a scroll occurrence

My experiment involves using the anime.js framework to create a simulation of leaves falling from a tree. The animation triggers when the user scrolls to the top of the page. However, I am facing an issue where the animation only plays once; if the user sc ...

javascriptanime.js

Modifying an image with jQuery

Why won't this image change? Below is the relevant HTML, CSS, and jQuery code. HTML <nav id="desktop-nav"> <div class="logo"> <a href="#"></a> </div> <div> ... </div> ... CSS nav#desktop-nav . ...

javascriptjqueryhtmlcss

How can I pass the color hex value from the controller to the view without using quotation marks?

I'm having trouble sending a value and color pair using JSON. The color value needs to be returned to the JavaScript in the view as color: "#FFFFFF". I can send it to the view that way, but once the browser reads it, it turns into color: &quot;#FF ...

c#javascriptjsonhtmlasp.net-mvc-4

iOS 10.3.1 causing Ionic 2 (click) event to trigger twice

I am currently working on an Ionic 2 app and I am facing an issue with the click event. When I test the app on a device and click on a button, let's say to trigger an alert, the function executes once. However, if I click on the button again, the fun ...

javascripttypescriptionic-frameworkionic2

The scope's attribute is present, but the variable within the scope's attribute is not

Currently, I am delving into angularJS development, but encountering a perplexing issue. I am attempting to format a JSON into a table with intricate rules. The JSON structure currently is as follows: { "id":"test", "title":"Test Sample", "de ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-resource

Using the same ng-model to show distinct values in two separate input fields

I have a form with a dropdown list that loads data using the ng-model="placeid". When a user selects an option from the dropdown, I want to display the selected place's latitude (place.lat) in an input box. Here is the dropdown list code: <select ...

javascriptangularjs

How can AngularJS effectively parse JSON data containing HTML elements?

We are experiencing difficulties in reading a json file containing html content. Here is the code snippet with the json data we are working with: Json data: { "aboutContent": { "listItems": [{ "title": "Investors", "de ...

javascripthtmljsonangularjs

Combining state and props to efficiently pass them as props - what's the best method?

I am attempting to create a component that merges props and state together, allowing the actual view to simply focus on retrieving data from props. In the snippet of code provided below, I am experimenting with utilizing the spread operator (potentially ...

javascriptreactjs

Add HTML or append a child element when clicking, then remove it from the previously clicked element

Within a container, I have several div elements where .div-to-hide is shown by default and .div-to-show is hidden. My goal is to toggle the visibility of these elements - when clicking on a .set, .div-to-hide should hide and .div-to-show should become vis ...

javascriptjqueryhtmlcss

When using the Vue Array.splice() method, the DOM element is not removed in the element-ui table

I am facing an issue with a table containing hierarchical data in Vue. When attempting to remove a child using "array.splice", the DOM structure does not update reactively. Has anyone encountered this before? Are there any potential solutions? This proble ...

javascriptarraysvue.jsspliceelement-ui

Discover in Mongo DB with Mongoose, except for the find() method, which excludes documents containing a specific property

I'm searching for a condition in Mongoose that will help me locate all users except those with the role 'Admin':2000. Keep in mind that admin users also have other roles, such as "User" and "Editor", as shown below: { "name": &q ...

javascriptnode.jsmongodbexpressmongoose

Issue encountered during rootScope update

I've encountered an issue with my Angular service that updates the $rootScope. The actual updating process works as intended, but it triggers an error in the console that has me concerned. app.service("scroll", function($rootScope, $window) { this ...

javascriptangularjs

The communication between a Firefox XUL extension and a webpage

Currently developing a Firefox XUL extension and in need of incorporating interaction between the web page and the extension. For instance, whenever a link is clicked on the page, I would like to trigger a function within the XUL extension. Is there any k ...

javascriptfirefoxhtmlxul

An error is thrown in Three.js stating that the array index 'i' is undefined at line 180, using TransformControls

While working with loaded .STL Files in Three.js using TransformControls, I'm experiencing an issue. Whenever I mouse hover or use the transformControls, my console logs "TypeError: array[i] is undefined three.js:180:9". Is anyone familiar with this e ...

javascriptarraysthree.jstransformtypeerror

How to make Firefox display a user-friendly date value in a date input field when using Angular.js and HTML5?

I am working with an HTML5 date input and I want it to default to the value of the date property in my model. Formatting is not a big concern, as Chrome seems to handle that based on my locale, but ideally, I would like the format to be dd/MM/yyyy. Check ...

javascripthtmlformsdateangularjs

Is there a unique identifier associated with web explorers?

I'm conducting an experiment and I've noticed that Google is able to detect that it's the same computer, even when I change various settings. It seems to be identifying the explorer with a unique ID or something similar. I have tried everyth ...

javascriptseleniumgoogle-chromeselenium-webdriver

What is the method for generating dynamic objects from configuration data with Ext JS?

Working with Ext Js to develop a dynamic web application can be quite challenging. When making an AJAX call to fetch data from the server, it's often unclear what the data will be until it is received. While some examples suggest adding dynamic object ...

javascriptextjs

Tips for Utilizing PHP Without the Need to Refresh the Page

Below are the contents of three files with their respective code: Controler.php <iframe id="frame1" style="display:none"></iframe> <iframe id="frame2" style="display:none"></iframe> <button onClick="document.getElementById(&apo ...

javascriptphphtmlajaxmysqli

React component's object value is set to undefined upon clicking a button

Encountering a strange issue where the object values (strings) disappear when switching between components on button click. The values are passed as props from a single object and display fine initially, but become undefined after transitioning to another ...

javascriptreactjs