Adjustable Columns in Bootstrap Table

After searching, I came across this documentation on how to make columns resizable in bootstrap tables.

However, I am struggling to figure out how to actually implement this feature with an HTML table. Can someone please provide a clear example of how to do so?

I stumbled upon this post on Stack Overflow, but it wasn't quite what I needed as it relies on split.js for column resizing.

Answer №1

Have a look at this specific example straight from the Bootstrap Table Examples:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a302b2f3f282377283f2933203b38363f773935362f3734291a6a74687469">[email protected]</a>/dist/jquery.resizableColumns.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeeb3eafffcf2fbdeafb0acacb0aa">[email protected]</a>/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6dbc6db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130e130e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"><...</answer1>
<exanswer1><div class="answer accepted" i="78379593" l="4.0" c="1713961580" a="R2hvc3Q=" ai="14945696">
<p>Here's the official example from <a href="https://examples.bootstrap-table.com/#extensions/resizable.html#view-source" rel="nofollow noreferrer">Bootstrap Table Examples</a>:</p>
<p><div>
<div>
<pre><code><link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a302b2f3f282377283f2933203b38363f773935362f3734291a6a74687469">[email protected]</a>/dist/jquery.resizableColumns.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeeb3eafffcf2fbdeafb0acacb0aa">[email protected]</a>/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6dbc6db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130e130e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9df7ece8f8efe4b0eff8eef4e7fcfff1f8b0fef2f1e8f0f3eeddadb3afb3ae">[email protected]</a>/dist/jquery.resizableColumns.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f124b5e5d535a7f0e110d0d110b">[email protected]</a>/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a7faa3b6b5bbb297e6f9e5e5f9e3">[email protected]</a>/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>

<table id="table"
  data-show-columns="true"
  data-search="true"
  data-show-toggle="true"
  data-pagination="true"
  data-url="json/data1.json"
  data-resizable="true">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  $(function() {
    $('#table').bootstrapTable()
  })
</script>

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

Utilize a drop-down selector in JavaScript to search and refine the results

Looking for a way to enhance your product search form? Consider adding an option to select a specific shop from the dropdown menu. This will allow users to search for products within a particular store if desired. <form action="#" method="get"> &l ...

Scrolling the bottom of a PDF object element in HTML using JavaScript - a simple tutorial

There is a Pdf object displayed on my website <object data="data/test.pdf" type="application/pdf" width="700" height="900"> </object> I'm trying to automatically scroll this pdf to the last page when the page loads. I've found tha ...

What is the best method for eliminating duplicate objects in an array using 2 specific properties?

I am currently dealing with an array of room objects and my task involves removing duplicate objects based on their room_rate_type_id property: const rooms = [{ room_rate_type_id: 202, price: 200 }, { room_rate_type_id: 202, price: 2 ...

Vue warning: You are trying to access a property or method that is not defined on the instance but is being referenced during

The code snippet above was created to manage an event triggered by a button click var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + &qu ...

The issue of Angular JQuery Datepicker failing to set the MinDate upon initialization

In my AngularJS project, I am using JQuery UI's Datepicker for the Date From and Date To fields. I have successfully bound the value to the model using a directive, and I have also implemented logic in the OnSelect function to ensure that the Date To ...

Guiding you on exporting a Typescript class with parameters in Node.js

Trying to find the Typescript equivalent of require('mytypescriptfile')(optionsObject); This is the TS code provided: export class Animal { name: string; public bark(): string { return "bark " + this.name; } constructor(color:string) ...

What causes performance issues when utilizing mouseover events in JQuery?

var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".test").mouseover(function(){ $('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block&ap ...

What are the steps to converting one grid to another solely with the use of Bootstrap utilities?

https://i.sstatic.net/SuGiM.png I am looking to convert the grid layout shown above into the grid layout displayed below. To achieve the above layout, I have used the following grid structure: <div className="row"> <div className=&q ...

Creating a fixed "sub-page" within Wicket (e.g.: linking a folder in Wicket)

I am in the process of creating a web application with the help of Wicket. While the majority of the website is generated dynamically through Wicket, I have a specific section that needs to function as a standalone "static" html website. Essentially, this ...

Validating a model in Mongoose: Best practices for updating data

I am facing an issue with my model. It seems that while creating, incorrect information is prohibited, but when editing, it is allowed. How can I prevent this from happening? var userSchema = new Schema({ cartaoCidadao: { type: String, require ...

Importing a JavaScript file into another JavaScript file as text in React Native can be a convenient way

In my project, I have a file named MyFirstPage.js that contains the following code snippet: renderCards() { let icon = this.state.icon; .... .... .... } This code is responsible for rendering cards within the main render function. However, as the ...

Optimal middle row height for Twitter-Bootstrap grid system

Hello, I go by the name of Shohel Rana. For quite some time now, I've been grappling with a persistent issue that seems to have no clear solution. The crux of the problem is as follows: I have three rows in this setup. The first and third rows sh ...

Aligning a div within another div and organizing its elements

Hey everyone, I'm struggling with centering a div that contains two Tumblr posts columns, as shown in the screenshot linked below. I really want it to be centered on the page where there is no sidebar present. Additionally, I'm hoping to get the ...

Display PHP array information in an HTML table

I am facing an issue with an array that contains a record set generated by the CodeIgniter model. When attempting to display these records in an HTML table using my view, the layout is not rendering correctly. Here is a snippet of my view: <html> & ...

How to manipulate wrapping behavior in flexbox

My flex container holds three divs, arranged in two rows: First row: One div with a fixed width Another div that should stretch to fill the remaining space Second row: Just one item However, the first div stretches to 100% width and pushes the seco ...

Creating specialized validation for numeric fields in Angular2

Attempting to implement custom validation in Angular 2 has been a challenge for me. I have followed the necessary steps based on my understanding, but still struggling to get it working. import { FORM_DIRECTIVES, AbstractControl, ControlGroup ,FormBuilder ...

Is it necessary to append the path with __dirname when utilizing Node's fs.readFile()?

Illustration: fs.readFile(path.join(__dirname, 'path/to/file'), callback); compared to fs.readFile('path/to/file', callback); Both methods appear to function properly, prompting me to inquire whether I can omit the __dirname prefix, ...

What could be causing the incorrect output when an else statement is included?

When I run the code provided below, I am getting a different answer depending on whether the else statement is included or not. Without the else statement, the answer is true, but with the else statement it is false. Can anyone explain why this is happen ...

How can I easily swap between the front and back cameras while using an app?

Trying to create a web-ar experience that allows users to switch between front and back cameras while utilizing SLAM/6dof with the back camera has been a challenging endeavor. While attempting this in PlayCanvas, I faced difficulties getting the front came ...

React - Dealing with rendering issue when toggling a button using LocalStorage and State

For quite some time now, I've been struggling with a particular issue... I'm encountering challenges in using the current state to display a toggle button that can both add and remove an item from local storage. The code below manages to add and ...