Is there a way to dynamically set the header name passed from JSON? Additionally, how can I hide multiple columns in Tabulator instead of just one? I would also like to be able to show/hide multiple columns on button click.
These questions pertain to a comparison table we are trying to create using Tabulator. I want the ability to compare specific columns and hide any columns that are not relevant at the time, but be able to easily show them again if needed.
If you want Tabulator to automatically generate column names based on the property names of the row data, you can use the autoColumns option like this:
var table = new Tabulator("#example-table", {
data: tabledata,
autoColumns: true,
});
Check out the Autocolumns Example to see this feature in action.
To hide multiple columns, you will need to use the hideColumn or showColumn function multiple times. If you want to prevent the table from redrawing after each individual column is hidden, you can use the blockRedraw function like this:
table.blockRedraw(); // block table redrawing
table.hideColumn("name") // hide the "name" column
table.hideColumn("age") // hide the "age" column
table.restoreRedraw(); // restore table redrawing
To hide a column, simply add visible:false as an argument within the table declaration.
For example:
columns:[{title: "Test Column", field: "test", sorter:"number", width: 100,visible:false}]
If you want to hide or show multiple columns, you'll first need to identify which columns should be hidden or shown.
A straightforward way to achieve this is by creating an array of Boolean states, like so:
var visibility =[];
visibility.push({col1_Status:true,col2_Status:true,col3_Status:false});
Then, in the table initialization:
columns:[{title: "Test Col1", field: "test1", sorter:"number", width: 100,visible:visibility[0].col1_Status},
{title: "Test Col2", field: "test2", sorter:"number", width: 100,visible:visibility[0].col2_Status},
{title: "Test Col3", field: "test3", sorter:"number", width: 100,visible:visibility[0].col3_Status}]
Once you have your JSON data, you can easily change the visibility based on your requirements.
This method allows for independent operation. You can access multiple array values at any time, modify their status, and update tabulator to hide/show columns accordingly.
You can also apply the same technique with column names by changing the title:. Just keep in mind that once a column is initialized within the table, its structure cannot be altered. To update the heading (and data), you will need to remove the existing column and replace it with another.
To accomplish this, use:
table.deleteColumn("Column Name Here");table.addColumn({title:"Name", field:"name"});
I hope this information proves helpful!
My setup consists of a single parent component and 2 child components structured as follows: Parent-component.html <child-component-1 [id]="id"></child-component-1> <child-component-2></child-component-2> The child-compo ...
Starting my first react website and needing assistance with writing an asynchronous JavaScript function. I am currently working on uploading user input files to firebase storage and then making a post request to the API in order to store the data in the da ...
I've been experimenting with loading different templates in this manner: <div ng-class="{active:$first,in:$first,'tab-pane':true}" id="{{p.path}}_settings" ng-repeat="p in panes" ng-include="buildPath(p.path)"> </div> Here&apos ...
My goal is to apply text formatting to a string named 'name'. Once the string is entered into an HTML form and the save button is clicked, the new formatted string should be displayed below the form. The formatting rule states that if the length ...
My website functions as a digital library for a particular niche of 3D models. However, I've noticed that the performance on mobile devices when using modelviewer to display glb files is quite poor. Frequently, the page crashes and reloads unexpectedl ...
I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this: "The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sit ...
In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...
I am struggling with displaying buttons for "True", "False", "Yes", and "No" in an appended row. Here is the application: Application To use the application, follow these steps: 1. Open the application and click on the green plus button. A modal window ...
Hello there! I'm diving into the world of JavaScript and have a query to share on Stackoverflow. If something seems missing in my question, please do point it out for me. Question 1: Can someone shed light on why the output sequence in the console s ...
I've come across similar inquiries, but none of them quite match my situation. When a user clicks on one of the buttons in my app, it triggers a get request to fetch data and then displays that data on the screen. However, the issue arises when I nav ...
Introduction to Home Component const HomeComponent = ({ mode, setMode }) => { return ( <Box m={-1} sx={{overflowX:'hidden'}}> <Navber/> <Stack direction="row" spacing={2} justifyContent="space-be ...
I am interested in integrating the Node.js module https://www.npmjs.com/package/remarkable-regexp into my Ember-CLI project. Can someone guide me on how to make it accessible within the Ember application? I attempted to do so by including the following c ...
If I remove a package from my project using the following command: npm uninstall react The entry for this package in the package.json file does not disappear. Then, when I install a different version of this package like so: npm install <a href="/cdn ...
Currently, I am working on creating a form that will submit without opening the action URL when a button is clicked. Additionally, after submission, I want to display a message and clear the form. Can anyone guide me on how to achieve this? <form id="c ...
Having some trouble with my code that generates an HTML page. The signup function allows users to register and create a password, while the checkpassword function is supposed to verify if the correct password is entered for the given username. I seem to be ...
I am facing an issue with zooming images on mouse hover using CSS. I have a code snippet that works well, but it zooms both images simultaneously. How can I differentiate between mouse movements over different elements in ReactJS? Here is the code: .styl ...
This code snippet creates a total of 48 squares, each labeled with a number from 0 to 47 within them. Utilizing sets is the recommended method for achieving this on stackoverflow. By grouping the rectangle shape along with its corresponding number, it allo ...
Is there a way to track how many times this observable has run? this.clock = Observable.interval(1000).map(function(value){ if(value == 0){ return value * 100 / 60; } return value * 100 / 60; }).take(61); I would like to kno ...
Even though it's not a cross-domain problem, Ajax is returning a 404 error code. In my TIZEN Web application project, I am trying to make an ajax request to a WebService that contains functions necessary for the project. Initially, the xhr.status was ...
Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...