DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Export types and some corrections

Export types and some corrections

sebastianbarthsebastianbarth Posts: 39Questions: 11Answers: 0
in Free community support

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: 39Questions: 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: 39Questions: 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: 39Questions: 11Answers: 0

    There also is this problem:

  • sebastianbarthsebastianbarth Posts: 39Questions: 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,189Questions: 1Answers: 10,411 Site admin

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

    Thanks,
    Allan

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.