new DataTable( ... ) - This expression is not constructable.

new DataTable( ... ) - This expression is not constructable.

LajosLajos Posts: 4Questions: 2Answers: 0

Hy, I have a Lit framework based project with Typescript language.
My problem is that I cannot initialize the DataTable. Im using the same mathod as in the document.

new DataTable('#users-data-table',

here i got this error:

This expression is not constructable.
Type 'typeof import("c:/ ... /node_modules/datatables.net-dt/types/dataTables.dataTables")' has no construct signatures.ts(2351)
import DataTable

Typescript code:

import { LitElement, html } from 'lit';
import { customElement, query } from 'lit/decorators.js';

import DataTable from 'datatables.net-dt';
import 'datatables.net-colreorder-dt';
import 'datatables.net-scroller-dt';
import 'datatables.net-select-dt';

...

@customElement('example-page')
export class ExamplePage extends LitElement {
static styles = [styles];

private dataTable: any | undefined = undefined;

@query('#data-table')
dataTable2?: HTMLTableElement;

async connectedCallback() {
// eslint-disable-next-line wc/guard-super-call
super.connectedCallback();

const users = this.getUsers(19999);

this.usersDataTable2 = new DataTable('#users-data-table', {
  infoCallback(max: number, total: number) {
    return total !== max ? `Showing ${total} of ${max} records. ` : `${total} records. `;
  },
  colReorder: true,
  scrollY: '70vh',
  deferRender: true,
  scroller: true,
  select: true,
  data: users,
  columns: [
    { data: 'id', visible: false },
    { data: 'familyName' },
    { data: 'firstName' },
     ....
  ],
  order: {
    idx: 1, // order by first visible 'lastname' column
    dir: 'desc',
  },
})();

}

...

Here is the render funct:
render() {
return html <main @contextmenu=${(e: Event) => e.preventDefault()}> <head> <title>Datatable test</title> </head> <body> <div> <sl-split-panel position="40" style="height: 100vh; opacity: 1"> <div slot="start" style=" height: 100%; background: var(--sl-color-neutral-50); display: block; overflow: hidden; " > <div style="margin: 2%; padding: 1em; border: 1px solid lightgrey"> <table id="data-table" class="data-table" style="width: 100%"> <thead> <tr> <th>ID</th> <th>Family&nbsp;Name</th> <th>First&nbsp;Name</th> .... </tr> </thead> </table> </div> </div> <div slot="end" style=" height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: left; justify-content: top; " > Selected User's Details </div> </sl-split-panel> </div> </body> </main> ;
}

Thanks in advance!

Answers

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    If you can provide a test case I can look at, that would be great. You could use StackBltiz or similar.

    Allan

Sign In or Register to comment.