Export types and some corrections

Export types and some corrections

sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0

We use typescript in our code where we integrate Datatables. The code makes use of some types from you .d.ts files that partly...
a) aren't exported
b) aren't correct (e.g. return type)
c) aren't mapped by TS types although relevant

We help our self with the following patches and hope there is a change you could take a look and possibly update/fix the types accordingly. Upgrading them on every release is quite annoying. :)

datatables.net

diff --git a/node_modules/datatables.net/types/types.d.ts b/node_modules/datatables.net/types/types.d.ts
index b23e506..ffd11fe 100644
--- a/node_modules/datatables.net/types/types.d.ts
+++ b/node_modules/datatables.net/types/types.d.ts
@@ -514,6 +514,13 @@ export interface ConfigColumns {
      */
     searchable?: boolean;
 
+    // Patch: Add missing option 'targets' ---START
+    /**
+     * https://datatables.net/reference/option/columnDefs.targets
+     */
+    targets?: number[] | number | string
+    // Patch: Add missing option 'targets' ---END
+
     /**
      * Set the column title.
      */
@@ -1677,12 +1684,20 @@ export interface ApiColumnsMethods {
      */
     indexes(type?: string): Api<Array<number>>;
 
+    // Patch: Correct header() method return type ---START
+    // /**
+    //  * Get the header th / td cell for a columna.
+    //  *
+    //  * @returns HTML element for the header of the columna
+    //  */
+    // header(): HTMLElement;
     /**
-     * Get the header th / td cell for a columna.
+     * Get the header th / td cells for a column.
      * 
-     * @returns HTML element for the header of the columna
+     * @returns DataTables API instance with an array containing the header of the column
      */
-    header(): HTMLElement;
+    header(): Api<Array<Node>>;
+    // Patch: Correct header() method return type ---END
 
     /**
      * Obtain the th / td nodes for the selected columns
@@ -2614,11 +2629,17 @@ export interface ExtTypeSettings {
  */
 type FunctionExtTypeSettingsDetect = (data: any, settings: InternalSettings) => (string | null);
 
-type FunctionAjax = (data: object, callback: ((data: any) => void), settings: InternalSettings) => void;
+// Patch: Export type FunctionAjax ---START
+//type FunctionAjax = (data: object, callback: ((data: any) => void), settings: InternalSettings) => void;
+export type FunctionAjax = (data: object, callback: ((data: any) => void), settings: InternalSettings) => void;
+// Patch: Export type FunctionAjax ---END
 
 type FunctionAjaxData = (data: AjaxData, settings: InternalSettings) => string | object;
 
-type FunctionColumnRender = (data: any, type: any, row: any, meta: CellMetaSettings) => any;
+// Patch: Export type FunctionColumnRender ---START
+//export type FunctionColumnRender = (data: any, type: any, row: any, meta: CellMetaSettings) => any;
+export type FunctionColumnRender = (data: any, type: any, row: any, meta: CellMetaSettings) => any;
+// Patch: Export type FunctionColumnRender ---END
 
 type FunctionColumnCreatedCell = (cell: Node, cellData: any, rowData: any, row: number, col: number) => void;
 
@@ -2638,14 +2659,54 @@ type FunctionInitComplete = (settings: InternalSettings, json: object) => void;
 
 type FunctionPreDrawCallback = (settings: InternalSettings) => void;
 
-type FunctionRowCallback = (row: Node, data: any[] | object, index: number) => void;
+// Patch: Export type FunctionRowCallback ---START
+//type FunctionRowCallback = (row: Node, data: any[] | object, index: number) => void;
+export type FunctionRowCallback = (row: Node, data: any[] | object, index: number) => void;
+// Patch: Export type FunctionRowCallback ---END
 
-type FunctionStateLoadCallback = (settings: InternalSettings) => void;
+// Patch: State type for state load/save callbacks ---START
+// Patch: Export type FunctionStateLoadCallback ---START
+//type FunctionStateLoadCallback = (settings: InternalSettings) => void;
+export type FunctionStateLoadCallback = (settings: InternalSettings) => DataTableState | null;
+// Patch: State type for state load/save callbacks ---END
+// Patch: Export type FunctionStateLoadCallback ---END
 
 type FunctionStateLoaded = (settings: InternalSettings, data: object) => void;
 
-type FunctionStateLoadParams = (settings: InternalSettings, data: object) => void;
+// Patch: State type for state load/save callbacks ---START
+//type FunctionStateLoadParams = (settings: InternalSettings, data: object) => void;
+export type FunctionStateLoadParams = (settings: InternalSettings, data: DataTableState) => void;
+// Patch: State type for state load/save callbacks ---END
+
 
-type FunctionStateSaveCallback = (settings: InternalSettings, data: object) => void;
+// Patch: State type for state load/save callbacks ---START
+// Patch: Export type FunctionStateSaveCallback ---START
+//type FunctionStateSaveCallback = (settings: InternalSettings, data: object) => void;
+export type FunctionStateSaveCallback = (settings: InternalSettings, data: DataTableState) => void;
+// Patch: State type for state load/save callbacks ---END
+// Patch: Export type FunctionStateSaveCallback ---END
 
-type FunctionStateSaveParams = (settings: InternalSettings, data: object) => void;
+// Patch: State type for state load/save callbacks ---START
+export type FunctionStateSaveParams = (settings: InternalSettings, data: DataTableState) => void;
+// Patch: State type for state load/save callbacks ---END
+
+// Patch: State type for state load/save callbacks ---START
+/**
+ * Internal state of datatables. Seems not to be documented.
+ * This type is mostly guessed.
+ */
+export interface DataTableState {
+    time: number;
+    start?: number;
+    length?: number;
+    order: [ number, 'asc' | 'desc' | '' ][];
+    search?: {
+        search: string;
+        smart: boolean;
+        regex: boolean;
+        caseInsensitive: boolean;
+    };
+    columns?: [];
+    childRows?: unknown[];
+}
+// Patch: State type for state load/save callbacks ---END

datatables.net-scroller

diff --git a/node_modules/datatables.net-scroller/types/types.d.ts b/node_modules/datatables.net-scroller/types/types.d.ts
index 82daf69..229a001 100644
--- a/node_modules/datatables.net-scroller/types/types.d.ts
+++ b/node_modules/datatables.net-scroller/types/types.d.ts
@@ -64,7 +64,10 @@ declare module 'datatables.net' {
  * Options
  */
 
-interface ConfigScroller {
+/* Patch: Export ConfigScroller interface ---START */
+export interface ConfigScroller {
+// interface ConfigScroller {
+/* Patch ---END */
    /**
     * Scroller uses the boundary scaling factor to decide when to redraw the table - which it
     * typically does before you reach the end of the currently loaded data set (in order to

Answers

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0

    Just found another type that we guessed and 'override from the outside':

    /** First parameter of FunctionAjax used in Config.ajax property
     * @see _fnAjaxParameters in jquery.dataTables.mjs */
    export interface DataTablesRequestParams {
      draw: number;
      columns: {
        'data': 'function';
        'name': '';
        'searchable': true;
        'orderable': false;
        'search': {
          'value': '';
          'regex': false;
        };
      }[];
      order: {
        'column': number;
        'dir': 'asc' | 'desc';
      }[];
      start: number;
      length: number;
      search: {
        value: string;
        regex: boolean;
      };
    }
    

    We use it to cache AJAX data results to spare requests to the server when just wanting to redraw the body (completely, including plugins). We store a result in a local variable. On the next ajax call, when we know that we do not need to fetch new data but know that we a) need to redraw the table with the same data, we update its draw property to that from the current request. Without that, datatables wouldn't see it as new data and won't redraw.

    We also need to read out the data, offset and order properties.

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0

    I found another type that is not exported/defined and what we guessed by our self. Bad about this is that we don't know if it is correct or when it changed following this approach:

    /** Interface reconstructed from what we 'usually' get from datatables.
     * @see _fnAjaxParameters in jquery.dataTables.mjs */
    export interface DataTablesRequestParams {
      draw: number;
      columns: {
        'data': 'function';
        'name': '';
        'searchable': true;
        'orderable': false;
        'search': {
          'value': '';
          'regex': false;
        };
      }[];
      order: {
        'column': number;
        'dir': 'asc' | 'desc';
      }[];
      start: number;
      length: number;
      search: {
        value: string;
        regex: boolean;
      };
    }
    

    We need this type to access the draw property: When we need to redraw a table with the same data, the ajax function is still called, talking to the server. This adds unnecessary burden to the server and stresses the response time. To help us we store the latest server result and return that inside of the ajax function. We need to preserve the draw property though, because passing back the stored draw will lead to datatables not redrawing.

    In addition to this we also need to read and transform the properties order, start and length to map to the endpoint requirements.

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0

    There also is this problem:

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0
    edited November 2023

    We also have problems with Config extensions of Datatables root and column config by the Scroller and FixedColumns at the same time. This does not seem to work at all (e.g. in FixedColumns plugin you name it Settings and in Datatables Config). No matter what we try, one extension is missing in the result: Fixed Columns usually overrides Datatables namespace instead of extending it.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Are you able to update this Typescript playground example to demonstrate the issue please?

    Thanks,
    Allan

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0
    edited October 15

    Hi Allan
    After a while I have the chance to continue on this. I would start with one particular problem that causes us to patch the fixedcolumns plugin - I suggest we ignore the previous outdated code/patches and walk through each issues one by one:
    Playground example

    There are multiple issues here (5.0.3):

    • declare namespace DataTables does not merge with the core namespace
    • interface API does not merge with Api<T> from core namespace
    • Api#fixedColumns() is declared with return type FixedColumnsMethods | Api which causes the FixedColumnsMethods methods to be available conditionally.

    We help our self by reexporting Datatables and patching the types:

    1. fixedcolumns patch
    Export Datatable namespace:

    // declare namespace DataTables {
    export declare namespace DataTables {
    

    Export Api namespace:

    // interface Api {
    export interface Api {
    

    Export Api namespace:

    //fixedColumns(): FixedColumnsMethods | Api;
    fixedColumns(): FixedColumnsMethods; // If we import the lib, we have the types and the FixedColumnsMethods on all Datatable instances
    

    2. Our datatables.ts reexport:

    import type { Api } from 'datatables.net';
    import type { DataTables } from 'datatables.net-fixedcolumns';
    
    // Helps to identify it in our code
    export type Datatables<T> = Api<T> & DataTables.Api;
    

    3. Usage:

    import type { Datatables } from 'ui/datatables/datatables'; // Our reexport
    
    const dt = htmlTable.DataTable(ourConfig) as unknown as Datatables<TableRowDto>;
    dt.fixedColumns().left(2);
    

    I really hope we can sort this out somehow better.
    Thank you,
    Sebastian

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Hi Sebastian,

    Fixes committed here. Sorry about that. I've just tried it out with a Vite project and the latest changes appear to address the issues.

    Are you able to try it and see with the latest file. Assuming it is good, I'll do a release.

    Allan

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0

    And in fixed column types.d.ts I see:

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    I'm not seeing that one I'm afraid. What version of Typescript are you using? I had 5.6.3.

    Allan

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0

    My bad, I replaced the wrong types.d.ts. It is working! I request a release! :smiley:
    Thanks a lot, Allan.

    BTW: We use TS 5.6.2.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Awesome - good to hear that did the job. I'll tag and release it on Friday :)

    Allan

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0
    edited December 3

    Hi Allan,
    found another issue with the types (Datatables 2.1.8).
    The served types include ConfigLanguage looking like this:

    export interface ConfigLanguage {
        emptyTable?: string;
        entries?: string | object;
        info?: string;
        infoEmpty?: string;
        infoFiltered?: string;
        infoPostFix?: string;
        decimal?: string;
        thousands?: string;
        lengthMenu?: string;
        loadingRecords?: string;
        processing?: string;
        search?: string;
        searchPlaceholder?: string;
        zeroRecords?: string;
        paginate?: {
            first?: string;
            last?: string;
            next?: string;
            previous?: string;
        };
        aria?: {
            sortAscending?: string;
            sortDescending?: string;
            paginate?: {
                first?: string;
                last?: string;
                next?: string;
                previous?: string;
            };
        };
        url?: string;
    }
    

    It seems that at least sortAscending and sortDescending are replaced by orderable and orderableReverse, as former properties have no effect any longer.

    Not sure about the other messages.

  • sebastianbarthsebastianbarth Posts: 46Questions: 11Answers: 0

    Another issue:
    thead is actually a tr (actually not even the last thead's row, but the first one when having multiple rows. The name is missleading and type Node could be narrowed down more.

    type FunctionHeaderCallback = (thead: Node, data: any[], start: number, end: number, display: any[]) => void;
    

    Cheers, Sebastian

Sign In or Register to comment.