Ajax Table Usage - paulmaclean/datatables.webcomponent GitHub Wiki

datatables.webcomponent can fetch data from an api endpoint.

Example View in Browser 

//index.ts
import {DataTable, defineComponent} from "@p_mac/datatables.webcomponent"
//last parameter is the custom element namespace
defineComponent(DataTable.componentName, DataTable, 'example');  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Example</title>
</head>
<body>
    <h2>Example Usage using ajax url</h2>
    <example-data-table
        data-ajax='{"url": "https://unpkg.com/@p_mac/datatables.webcomponent/test/support/data/generated.json"}'
        data-filterable='{"colIndexes":[5]}'
        data-summable='{"colIndexes":[2]}'
    >

    </example-data-table>
    <script src="dist/index.js"></script>
</body>
</html>
//webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry:
        {
            "../dist/index": "./index.ts",
        },

    mode: 'production',
    resolve: {
        extensions: [".js", ".ts"]
    },
    mode: 'production',
    devtool: 'source-map',

    optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                sourceMap: true,
                terserOptions: {
                    ecma: 6,
                },
            }),
        ],
    },

    module: {
        rules: [
            {test: /\.tsx?$/, loader: "ts-loader"},
            {
                test: /\.css$/,
                use: [
                    {loader: "to-string-loader"},
                    {loader: "css-loader"}
                ]
            },
        ]
    },
    plugins: [
    ],
    watchOptions: {
    }
};
⚠️ **GitHub.com Fallback** ⚠️