Using DataTable plugins in Typescript

mustafa_salaheldin

Hello
I'm trying to use the Search highlight and fixedheader options in my datatable in typescript, but it seems like the options are not recognized.

I import the modules like this:

import "datatables.net";
import "datatables.net-fixedheader";

and configure my table like this:

                    $('#table-files').DataTable({
                        //fixheader: true,
                        responsive: true,
                        //searchHighlight: true,
                        //filter: 'applied',
                        paging: false,
                        order: [[1, 'asc']],
                        columns: [

                            { orderable: false, width: '9.5%' },
                            { orderable: true, width: '5%' },
                            { orderable: true, width: '24%' },
                            { orderable: true, width: '7.5%' },
                            { orderable: true, width: '10%' },
                            { orderable: true, width: '9%' },
                            { orderable: false, width: '5%' },
                            { orderable: false, width: '20%' },
                            { orderable: true, width: '10%' }

                        ],
                        autoWidth: false
                    })

The problem is Visual Studio can't find the fixedheader option, though the searchHighlight.

Any advise please?

allan

How are you installing the packages - Nuget or NPM? We've been having problems with Nuget packages and generally recommend NPM for Javascript modules now. Indeed we are going to be dropping the types from the Nuget packages entirely in future due to these issues.

Allan

mustafa_salaheldin

Actually I'm using npm
I tried also:
npm i datatables.net
npm i datatables.net-dt
npm i datatables.net-bs4

none of them recognized the plugins/extensions

mustafa_salaheldin

I also want to add that I'm using webpack 4.41.5

allan

Could you send me your webpack config file please? Or even better a repo that reproduces the issue?

Thanks,
Allan

mustafa_salaheldin

I can only share the webpack file:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
externals: {
jquery: 'jQuery',
bootstrap: 'bootstrap'
}, entry: {
app_bim360pp: "./src/index.js"
},
output: {
path: path.resolve(__dirname, "wwwroot/js"),
filename: '[name].js',
libraryTarget: 'var',
// `library` determines the name of the global variable
library: '[name]'
},
resolve: {
extensions: ['.js', '.jsx', '.tsx', '.ts', '.json'],
},
module: {
rules: [
{
test: /\.js$/,
loader: require.resolve('@open-wc/webpack-import-meta-loader'),
},
{
test: /\.ts$/,
use: "ts-loader"
},
{
test: /\.(css|less)$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
mode: "development",
devtool: "source-map",
plugins: [
// new CleanWebpackPlugin(),
// new HtmlWebpackPlugin({
// template: "./src/index.html"
// }),
new MiniCssExtractPlugin({
filename: "css/[name].[chunkhash].css"
})
]
};

mustafa_salaheldin

And here is my package.json:

{
"name": "bim360pp",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=development --watch",
"release": "webpack --mode=production",
"publish": "npm run release && dotnet publish -c Release"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@mdi/font": "^6.6.96",
"@microsoft/signalr": "^6.0.3",
"@open-wc/webpack-import-meta-loader": "^0.4.7",
"@types/jquery.highlight-bartaz": "^0.0.32",
"@types/pako": "^1.0.3",
"@types/uzip": "^0.20201231.0",
"@zip.js/zip.js": "^2.4.10",
"bootstrap-multiselect": "^0.9.13-1",
"bootstrap4-filestyle": "^2.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"datatables.net-bs4": "^1.11.5",
"datatables.net-fixedcolumns": "^4.0.2",
"datatables.net-fixedheader": "^3.2.2",
"datatables.net-plugins": "^1.11.5",
"fflate": "^0.7.3",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.6.0",
"jquery-highlight": "^3.5.0",
"jstree": "^3.3.12",
"knockout": "^3.5.1",
"mini-css-extract-plugin": "^0.9.0",
"npm-dts": "^1.3.11",
"pako": "^2.0.4",
"qrcode-generator-ts": "^0.0.4",
"qrious": "^4.0.2",
"ts-loader": "^6.2.1",
"typescript": "^3.8.0",
"uzip": "^0.20201231.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"zlib": "^1.0.5"
},
"devDependencies": {
"@types/bootstrap": "^4.3.1",
"@types/bootstrap-filestyle": "^1.2.1",
"@types/bootstrap-multiselect": "^0.9.1",
"@types/browserify": "^12.0.37",
"@types/jquery": "^3.5.14",
"@types/jstree": "^3.3.41",
"@types/node": "^15.14.9"
}
}

allan

Thank you. I'll try putting an example together next week.

Allan

mustafa_salaheldin

Many Thanks!!!

mustafa_salaheldin

@allan any updates,please?

allan

No sorry - I haven't had a chance to do this yet. If you have the time to put together a little example repo showing the issue, that would be useful.

Thanks,
Allan

mustafa_salaheldin

Ok, I’ll try

mustafa_salaheldin

I have created the repo:
https://github.com/mustafa-salahuldin/datatable-test.git

Thanks in advance

mustafa_salaheldin

@allan this project was created with .Net 5. I need to know how to use fixedcolumns, fixedheaders, etc.

mustafa_salaheldin

@allan any updates, please.

allan

Apologies - I haven't had a chance to work on this yet. I hope to do so soon.

Allan

mustafa_salaheldin

OK, please just let me know once you are done,

mustafa_salaheldin

any luck, please?

BingCommander

I'm having the same problem. Importing the base datatables works fine. When I try to add the select extension, I can't add "select: true" to my table configuration. I can't get it to pick up the extra typings.

mustafa_salaheldin

@allan is there any progress on this?

allan

Apologies - I've not been able to work on this yet. It is on my list though.

Allan

mustafa_salaheldin

Thanks

TheNr1Guest

@mustafa_salaheldin The reason why your extension settings are not visible in TypeScript is because you have not added the typings for those extensions. So if you want typings for the fixedheader extension, you need to install it like so:

npm install @types/datatables.net-fixedheader --save-dev

allan

They should actually now be included with all of our extensions. There shouldn't be any need to install the extra type package.

Allan

mustafa_salaheldin

I’ll try and let you know then.
Many thanks.

mustafa_salaheldin

Still not working.
I also used:
import "datatables.net-bs4";
import "datatables.net-fixedheader-bs4";
import "datatables.net-fixedcolumns-bs4";
import "datatables.net-responsive-bs4";

but there is no hope

mustafa_salaheldin

I used these NPM packages too in my packages.json:
"datatables.net": "^1.12.1",
"datatables.net-bs4": "^1.12.1",
"datatables.net-dt": "^1.12.1",
"datatables.net-fixedcolumns": "^4.0.2",
"datatables.net-fixedcolumns-bs4": "^4.1.0",
"datatables.net-fixedheader": "^3.2.2",
"datatables.net-fixedheader-bs4": "^3.2.4",
"datatables.net-plugins": "^1.11.5",
"datatables.net-responsive-bs4": "^2.3.0",

allan

I've been completely rewriting the Typescript type files recently. Will be conitnuing with it next week

Allan

mustafa_salaheldin

cool

mustafa_salaheldin

Hello @allan, is it ready yet

allan

It's ready (as of late on Friday)! I just need to release it. That's coming tomorrow

Allan