Using DataTable plugins in Typescript

khaos

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

allan

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_salaheldin

Any updates?

kthorngren

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

PeterLamDH

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

PeterLamDH

it should works

allan

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

PeterLamDH

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

PeterLamDH

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

PeterLamDH

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

allan

All good now then?

Allan

PeterLamDH

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

mustafa_salaheldin

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

mustafa_salaheldin

@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";

allan

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_salaheldin

@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.

allan

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_salaheldin

Thanks @allan , you really made my day.