0

I would like to ask if it is possible to let the user manually adjust the column widths by clicking on the column and dragging it. If so, how?

Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
L. t.
  • 107
  • 3

2 Answers2

2

You can do that with the colResize plugin. Download the js file and the css file. In the code below, path/to/colResize is the path to the folder containing these two files. If you use an absolute path, you don't need normalizePath.

library(DT)
library(htmltools)

dep <- htmlDependency(
  name = "colResize", 
  version = "1.6.1", 
  src = normalizePath("path/to/colResize"),
  script = "jquery.dataTables.colResize.js",
  stylesheet = "jquery.dataTables.colResize.css",
  all_files = FALSE
)

dat <- iris

dtable <- datatable(
  dat,
  options = list(
    colResize = list()
  )
) 

deps <- dtable$dependencies
deps <- c(deps, list(dep))
dtable$dependencies <- deps

dtable

enter image description here

Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
  • This plugin doesn't work. – Avraam Nov 30 '22 at 17:33
  • @Avraam The GIF proves it works... – Stéphane Laurent Nov 30 '22 at 17:43
  • no. U can see this example website based on this plugin: http://live.datatables.net/hafazixi/3/edit - it doesn't work even here. And in my attempt/practice - it also did not work correctly (as resizable in reactable). This post https://stackoverflow.com/questions/67916127/column-resize-for-users-with-dtdatatable shows smth that should work, but so far I can't figure out how to integrate it into on R... – Avraam Nov 30 '22 at 18:10
  • @Avraam There's an issue with the latest version of the **datatables** library: . Try to downgrade the **DT** package. – Stéphane Laurent Nov 30 '22 at 18:13
  • Strange --- when I try this example, resizing only works on the first column? – Ulrik Lyngs Feb 27 '23 at 07:54
  • 1
    Update: at first I also wrongly thought it didn't work, but it does. The example will only show a resizing cursor on the first column -- and resizing doesn't work when you click *exactly* on the column line, you need to click ever-so-slightly to the left of it. And you need to make the CSS adjustment from the github link @Avraam posted in order to get the resizing symbols to get shown on all columns. (Only modification is to put "cursor: col-resize !important") – Ulrik Lyngs Feb 27 '23 at 08:01
0

tl;dr: Perhaps because of an issue with the latest version of datatables, you need to adjust jquery.dataTables.colResize to

table.dataTable thead th.dt-colresizable-hover {
  cursor: col-resize !important;

Otherwise the resizing cursor won't show up.

Ulrik Lyngs
  • 98
  • 1
  • 5