Tabulator now maintains the position of the rightmost column when adjusting the width of table columns

Is there a way to keep the right most column in a fixed position when adjusting column sizes?

Whenever I try to resize a column, the right most column moves along with it, causing a gap or horizontal scroll bar to appear. How can I adjust all the columns dynamically so that the right most column stays in place?

Check out some examples in the documentation

Example of gap from decreasing width of the 3rd column: https://i.sstatic.net/IIbTt.png

Example of scroll bar from increasing width of the 3rd column: https://i.sstatic.net/sLl3t.png

javascriptcssreactjstabulator

Answer №1

Arrangement Mode

If you desire columns to adjust their size dynamically, consider utilizing the fitColumns arrangement mode. Within the table constructor, make sure to specify this in the layout parameter:

var table = new Tabulator("#example-table", {
    layout:"fitColumns",
});

An example can be viewed on the Fit To Width Example

Tabulator offers a variety of options to customize this arrangement mode and control how each column resizes. For more details, refer to the Layout Documentation

Fixed Columns

If you prefer a column to remain stationary even when horizontally scrolling, utilize the frozen property in the column definition for the dob column to freeze it in place:

{title:"Date of Birth", field:"dob", frozen:true}}

Further information on this feature is available in the Frozen Columns Documentation

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

Design a component to display on the main component, which can be activated by a function within another component

I am looking to create a custom DeleteModal component in my Next.js project. I am aiming for something similar to sonner import { Toaster, toast } from 'sonner' //I want to import Toaster into layout.js to render and use toast.success() in diffe ...

reactjsnext.js

Basic Node.js messaging application excluding the use of socket.io

Recently, I've delved into learning Node.js and embarked on creating a basic chat application. It appears that socket.io is the go-to option for most developers, but I'm keen on grasping the concept from a more foundational standpoint using GET a ...

javascriptnode.jslivechat

Dynamically adjust the label position based on the button position

I am currently developing an interface that allows users to change the position of buttons and add a label text under the button. However, I am facing an issue where the label is not always centered below the button due to variations in the size and number ...

htmlcssangulardynamiclabel

Building a table in Quasar by utilizing nested objects

I am currently facing an issue while using Quasar to create Q-Tables. I am struggling with incorporating nested objects with dynamic key names. Below is the content of my table: data: [ { 'FrozenYogurt' : { &a ...

javascriptvue.jsquasar

Is it necessary to include parentheses when utilizing a named function as a jQuery ajax success callback?

Is it necessary to include parentheses when specifying a function as a success callback if it was defined earlier? What impact does including or not including parentheses have? For example: function fish_food(){//do something} $.ajax({ url: '/ ...

javascriptjqueryajax

Develop a JavaScript library for use in the npm ecosystem

I have developed a minimalist JavaScript library that includes common functions: !!window.JsUtils || (window.JsUtils = {}); JsUtils = (function () { "use strict"; return { randomHex: function (len) { var maxlen = 8; ...

javascriptnode.jsnpmmodule

When using Typescript with MUI styled components, there may be issues with recognizing common objects for styles

I'm facing a challenge where I have various styled components with some shared styles. To address this, I decided to create a function that takes in a `theme` parameter and outputs the common styles being used. Here's a glimpse of what I came up ...

reactjstypescriptmaterial-uistyled-components

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

In my project, I am attempting to compile a list of Profile objects and then extract specific elements from each object in the list. To accomplish this, I have defined a public interface named Profile, imported it into my component, and instantiated a new ...

javascriptangulartypescript

``Changing the value of the radio button does not update the ng-model variable

I have encountered an issue with my code. Upon page load, the radio button is checked but the ng-model value session.payment does not get updated automatically. I have to manually select it again for the update to take effect. <li ng-repeat="method i ...

javascriptangularjs

Tips for updating data within an array using a copied object

Just starting out with JavaScript Could you assist me with a basic inquiry, please? For instance, I have an array like this: const array = [{ id: 1, name: 'Ferrari', type: 'F40', price: '350 000$', countr ...

javascriptnode.jsarraysjsonobject

The execution of the Javascript function is not being carried out

Why is alert("Test1") being executed, but alert("Test2") is not running? P.S. I'm currently not utilizing JSON data. <script> $(document).ready(function() { var param = 10; $.getJSON( 'modules/mod_sche ...

javascriptajaxjson

What is the best way to extract information from my MYSQL database and represent it as an array?

Currently, I am working on a backend API that utilizes a MySQL database. My goal is to extract data from this database and utilize it to plot latitude and longitude points on a map using the Google Maps API. To achieve this, I have integrated the Gmaps API ...

javascriptvue.jsaxiosnuxt.js

Django is indicating that the path is not reachable

I've been struggling with a seemingly silly issue in my code. I can't figure out why it's not working properly. Here is the directory structure of my Django Project: https://i.sstatic.net/0tVo4.png The HTML file I'm targeting (index.h ...

htmlcssdjango

Exploring the power of Selenium Webdriver in combination with JavaScript

Can someone help me figure out why I'm getting this error message: "Exception in thread "main" java.lang.ClassCastException: java.lang.Long cannot be cast to org.openqa.selenium.WebElement at canvasdrag.Canvas.main(Canvas.java:57)" WebElement elemen ...

javascriptseleniumselenium-webdriver

Identify the transition of the parent element containing the <iframe> from a hidden state to a

Is there a way to identify when an iframe is shown after being hidden? HTML : <div style="display:none"> <iframe></iframe> </div> When the <div> is displayed using jQuery with $('div').show();, how can I determi ...

javascriptjqueryiframereloaddetect

What could be causing the position sticky to not function properly in my script?

Can someone help me troubleshoot an issue with the TopOptions image and component sticking to the top of the page? {!categorySearch && ( <div className="max-w-2xl mx-auto z-40 relative overflow-x-hidden font-metropolis_semibold" ...

htmlcsscss-positiontailwind-css

Vue - Syntax error: Unexpected token, expecting "}."

I recently started working with Vue and have encountered a simple component issue. Sometimes, when I run npm run serve or save a file that is already being served, I receive the following error message: E:\Development\website\app>npm run ...

javascriptvue.jsvuejs2

What is the best approach to repurpose a component when small adjustments are needed?

Can a customized slider component be created in React that can be reused with slight variations? For example, having the second one include a 13% field. View image description here ...

javascriptcssreactjssasscomponents

(Enhancing Angular) Capture HttpResponse errors and seamlessly proceed with the Observable

There's a dropdown text box with type-ahead search functionality. Valid item names prompt the expected list of items in the drop-down menu, while invalid entries trigger a 400 error response from the API. This error is caught by the HttpErrorIntercept ...

javascriptangularrxjs

Display the results from the API in a div using Vue.js

Currently working on implementing dynamic buttons to fetch data from an API call. Struggling with pushing the data array to the template and div. Here is my VueJS setup: var example = new Vue({ el: '#example', data: function () { ...

javascriptvue.js