new DataTable( ... ) - This expression is not constructable.
new DataTable( ... ) - This expression is not constructable.
Lajos
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 Name</th>
<th>First 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
If you can provide a test case I can look at, that would be great. You could use StackBltiz or similar.
Allan