Using DataTable plugins in Typescript

Using DataTable plugins in Typescript

mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0
edited April 2022 in Free community support

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?

This question has an accepted answers - jump to answer

«1

Answers

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0
    edited April 2022

    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_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0
    edited April 2022

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

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Thanks,
    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    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_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    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"
    }
    }

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    Many Thanks!!!

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    @allan any updates,please?

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    Ok, I’ll try

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

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

    Thanks in advance

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0
    edited May 2022

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

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    @allan any updates, please.

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

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

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    any luck, please?

  • BingCommanderBingCommander Posts: 5Questions: 3Answers: 0

    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_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    @allan is there any progress on this?

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    Thanks

  • TheNr1GuestTheNr1Guest Posts: 1Questions: 0Answers: 0

    @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

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

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

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    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_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0
    edited October 2022

    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",

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Allan

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    cool

  • mustafa_salaheldinmustafa_salaheldin Posts: 42Questions: 2Answers: 0

    Hello @allan, is it ready yet :D

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

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

    Allan

Sign In or Register to comment.