Datatables movable column width


Topic: Datatables movable column width

HoleInOne pro premium priority asked 3 years ago

In Excel you can as a user resize the width of a column. What is the best aproache to simulate the same in Datatables?


Michał Duszak staff answered 3 years ago

With this CSS you can set column's width to extremely wide / narrow:

.datatable table {
  table-layout: fixed;
}

.datatable table td, .datatable table th {
    overflow: hidden;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;        
    -ms-text-overflow: ellipsis;
   -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: none;
}

Then you have to handle resizing - the way you do it depends on you. For example I have made buttons which resize the first column: https://mdbootstrap.com/snippets/standard/m-duszak/3255970#js-tab-view


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Any
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No