How to rowReorder

How to rowReorder

UrsicinoUrsicino Posts: 4Questions: 1Answers: 0
edited December 2023 in Free community support

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

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

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

    Allan

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

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

    Allan (done now :)).

  • UrsicinoUrsicino Posts: 4Questions: 1Answers: 0

    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 (:sweat_smile:)

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • UrsicinoUrsicino Posts: 4Questions: 1Answers: 0

    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 :sweat_smile: :

    I now can't use responsive

    Neither use every or any with columns

    Thanks a lot for your help

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • UrsicinoUrsicino Posts: 4Questions: 1Answers: 0

    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 :smile:

Sign In or Register to comment.