Using DataTable plugins in Typescript - Page 2

Using DataTable plugins in Typescript

2»

Answers

  • khaoskhaos Posts: 47Questions: 11Answers: 0

    It's still not working for me either. Using NPM or straight import([CDN]). I'm waiting on that example too. TypeScript sucks.

  • allanallan Posts: 61,022Questions: 1Answers: 9,951 Site admin

    DataTables 1.13.1 is now available on NPM. If you try it, then the Typescript stuff should just work out of the box!

    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    Any updates?

  • kthorngrenkthorngren Posts: 19,924Questions: 26Answers: 4,696

    Did you see Allan's last post?

    DataTables 1.13.1 is now available on NPM. If you try it, then the Typescript stuff should just work out of the box!

    Did you try 1.13.1?

    Kevin

  • PeterLamDHPeterLamDH Posts: 6Questions: 0Answers: 0

    Hello allan , Although DataTables 1.13.1 provide the type of the button.
    The Button hasn't shown up

    Even worse is that columnDefs config is broken ,
    can't use columnDefs: [{targets:"no-sorts"}], with the button config

  • PeterLamDHPeterLamDH Posts: 6Questions: 0Answers: 0

    it should works

  • allanallan Posts: 61,022Questions: 1Answers: 9,951 Site admin

    Sorry, I'm not clear on what the question actually is. Are you saying that the Buttons don't appear? Have you included datatables.net-buttons and datatables.net-buttons/js/buttons.html5?

    Allan

  • PeterLamDHPeterLamDH Posts: 6Questions: 0Answers: 0

    yes i did , i import the following

    import 'jszip'
    import 'pdfmake'
    import 'datatables.net-bs4'
    import 'datatables.net-autofill-bs4'
    import 'datatables.net-buttons-bs4'
    import 'datatables.net-colreorder-bs4'
    import 'datatables.net-datetime'
    import 'datatables.net-fixedcolumns-bs4'
    import 'datatables.net-fixedheader-bs4'
    import 'datatables.net-keytable-bs4'
    import 'datatables.net-responsive-bs4'
    import 'datatables.net-rowgroup-bs4'
    import 'datatables.net-rowreorder-bs4'
    import 'datatables.net-scroller-bs4'
    import 'datatables.net-searchbuilder-bs4'
    import 'datatables.net-searchpanes-bs4'
    import 'datatables.net-select-bs4'
    

    and did the following to create DataTable

            if (!$.fn.dataTable.isDataTable('#driverTable')) {
                $(document).ready(function () {
    
                    $('#driverTable').DataTable(
                        {
                            paging: !1,
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ],
                            ordering: !0,
                            order: [],
                            scrollY: '620px',
                            info: !0,
                            stateSave: !0,
                          columnDefs: [],
                            destroy: !0,
    
                        }
                    );
                });
            }
    

    Problem 1: the button haven't shown up as the data-table is successful created
    Problem 2 : if i put columnDefs: [{ orderable: false, targets: "no-sort" }],
    then error appear

  • PeterLamDHPeterLamDH Posts: 6Questions: 0Answers: 0
    edited November 2022

    it should not be the version problem, cause i make a fresh install and updated the library to latest version

  • PeterLamDHPeterLamDH Posts: 6Questions: 0Answers: 0
    edited November 2022

    oh i forgot to import datatables.net-buttons/js/buttons.html5
    thanks

  • allanallan Posts: 61,022Questions: 1Answers: 9,951 Site admin

    All good now then? :)

    Allan

  • PeterLamDHPeterLamDH Posts: 6Questions: 0Answers: 0

    columnDefs problem exist but it should not be a big problem
    thanks

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    Thanks, I’ll update my packages and let you know.

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    @allan It still has problem
    $.fn.DataTable.isDataTable is not recognized anymore.
    The responsive attribute now also not recognized.
    All the same previous options still not recognized.

    I used:
    import * as DataTable from "datatables.net";
    import "datatables.net-dt";

  • allanallan Posts: 61,022Questions: 1Answers: 9,951 Site admin

    For Responsive, you need to install and import datatables.net-responsive. That type was incorrectly in the core package before. Also note there is no fixheader option. I think you mean fixedheader. And that requires datatables.net-fixedheader.

    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    @allan I adjusted the code and though still not having this worked.
    It would be appreciated if you compiled one example for how to use the JQuery in Typescript class, and how to configure the plugins and specially the searchHighlight.

  • allanallan Posts: 61,022Questions: 1Answers: 9,951 Site admin
    Answer ✓

    With FixedHeader: https://stackblitz.com/edit/vitejs-vite-zqe9nc?file=index.html,package.json,src%2Fmain.ts,src%2Ftypes.d.ts&terminal=dev . I've used Vite as a "compiler" there.

    As for external plug-ins that put options on to the DataTables configuration object such as for search highlighting you can add the following to your types.d.ts file:

    import DataTables, { Api } from 'datatables.net';
    
    declare module 'datatables.net' {
      interface Config {
        searchHighlight: boolean;
      }
    }
    

    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    Thanks @allan , you really made my day.

Sign In or Register to comment.