How to rowReorder

Ursicino

Hi, I'm trying to generate a table that allows me to reorder rows. I've been looking online how to do it, but I'm missing something.
I've worked with datatables for some time now, but never experienced this kind of error.

I just want to replicate this table, but keep getting this error:

"Object literal may only specify known properties, and 'rowReorder' does not exist in type 'Settings'."

I've tried first to do it with my own data, but then decided to just copy paste your code to see if it worked. It didn't.

I did try to update packages to the last version, but keep getting the same error, so I returned back to what I had.

I'm working with Metronic theme, it works with Angular 12, and this are the versions that I have at package.json:

Code for initTest:

initTest() {
  $('#example').DataTable({
    columnDefs: [
        {
            className: 'reorder',
            render: () => '≡',
            targets: 0
        },
        { orderable: false, targets: '_all' }
    ],
    order: [[1, 'asc']],
    rowReorder: {
        dataSrc: 1
    }
  });
}

Html code is exactly the same as the example in your web.

Thank you so much in advance

allan

You need the datatables.net-rowreorder-dt extension as well (-dt for the DataTables styling, which you've got for the DataTables core).

Then add:

import 'datatables.net-rowreorder-dt`;

Allan

allan

Hmmm - I note you've got @types/datatables.net. Delete that package. DataTables provides its own types.

Allan

allan

Also update to datatables.net-dt 1.13.8 which is the latest release.

Allan (done now ).

Ursicino

Hi, Allan, thank you for your quick response. I did what you told me, it worked in the way that now the rowReorder option is not an error, but inmediately collapsed everything else ()

Do you have any clue of what could it be? I did the quickfix to what I thought it was the main problem:

But didn't change anything, the error is still there

allan

There is no DataTables.Settings type exported by the DataTables types. Config is the configuration object type.

import DataTable, { Config } from 'datatables.net-dt';

Then:

dtOptions: Config = {};

Out of interest, where did you get the DataTables.Settings type from? Is there a tutorial or something you were following? I've seen it a bunch of times, and it used to be correct with the external third party types, but not with the first party ones provided with DataTables.

Allan

Ursicino

I don't recall where did I found it at the first place, but I'm copying my own code whenever I need a datatable, so I use it always like that. I think it may be coming from @types/datatables.net. I found some solutions where they tell that the problem will solve if I install @types/datatables.net. I did it, but just resolved the problem with DataTables.Settings, I went back to have issues with rowReorder.

Problem now is that, using Config instead of Datatables.Settings, I get more errors :

I now can't use responsive

Neither use every or any with columns

Thanks a lot for your help

allan

Have you included datatables.net-responsive-dt as a package? It isn't in your package list above.

The columns().every() method is in the Typescript defs for DataTables.

That said, I get an error as well when trying to access it. Use as any to access it for the moment.

Allan

Ursicino

Hi, Allan, I did what you said about the responsive package and it worked perfectly. Did also change the columns with as any and it seems to work. But I'm getting other errors now:

I currently finishing my working day. I will read you tomorrow and try to fix my side.

Thank you again, means a lot