Third column not working and undefined index

[Skotpionx]

I have 2 issues. First, when you're on the demo page, the third column cannot be resized. I've looked, and there's nothing that mentions that it's intentionally designed this way.

I'm also experiencing issues when applying it to a table in my project. It's a table created via JavaScript, and after it's created, I apply the following function:

$('#table').DataTable({
  ordering: true,
  searching: true,
  info: false,
  paging: false,
  colResize: {
    isEnabled: true,
    saveState: false,
    hoverClass: 'dt-colresizable-hover',
    hasBoundCheck: true,
    minBoundClass: 'dt-colresizable-bound-min',
    maxBoundClass: 'dt-colresizable-bound-max',
  },
});

Every time I try to make a column larger, I get the following error in the console:

[dhobi]

the third column cannot be resized
That's by design. If you check https://github.com/dhobi/datatables.colResize/blob/master/index.html (source of the demo page) you will see that

isResizable: function (column) {
    return column.idx !== 2;
}

undefined index issue

Could you try with the scrollX property set to true?

$('#table').DataTable({
    scrollX: true, // <-- this
    ordering: true,
    ...    
});

[Skotpionx]

You're right about the third column; I hadn't noticed it, sorry.

On the other hand, the scrollX didn't work because it was already on true, but removing dependencies from other JS files resolved the issue. It seems to be interfering with a previously installed plugin.

Can I take this opportunity to ask you a question about the documentation? If it's mentioned somewhere, I apologize, and I would appreciate it if you could provide the documentation link.

I'm trying to resize all columns, and it has worked by using:

isResizable: function (column) {
    return column.idx !== -1;
}

Is this the correct way to do it?

Additionally, when I try to resize the columns, I've noticed that it depends on the text you have in the <th> . It may allow you to make it smaller or not. In my <th>, I have overflow: hidden, text-overflow: ellipsis, and white-space: nowrap. Is there a way to make it smaller than the space occupied by the text?
This is an example:

[dhobi]

If you want to have every column resizable it's best to just not set isResizable as the default will apply which is:

isResizable: function (column) {
    return true;
}

For the min-width of a column, the following function will be called: getMinWidthOf
The readme states that the following will be tried (in order) if the option is not given:

1. Looking at the CSS min-width property
2. Guessing the width by checking the space the text label uses
3. Minimum 30px width

=> In your case, I would make sure that you define a style property like <th style="min-width: 99px;"> for each column. The plugin should automatically pick that up as the minimum then.