Lit Element Usage - paulmaclean/datatables.webcomponent GitHub Wiki

datatables.webcomponent can be used inside a lit-element application.

Example View in Browser 

//index.ts
import {DataTable, defineComponent} from "@p_mac/datatables.webcomponent"
    
import App from "./App";

//last parameter is the custom element namespace
defineComponent(DataTable.componentName, DataTable, 'test');
defineComponent(App.componentName, App, 'datatables');
//App.ts
import {LitElement, html} from "@polymer/lit-element";
import * as sampleData from './generated.json';

export default class App extends LitElement {
    public static componentName = 'app';

    render() {
        return html`
            <example-data-table 
                .data="${sampleData.default}"
                .orderable="${ {column: 2, order: 'desc'} }"
                .summable="${ {colIndexes: [2], formatter: (val, index) => { return currencyFormatter.format(val)}} }"
                .filterable="${ {colIndexes: [5]} }"
                .paginatable="${ {resultsPerPage: 5} }"
                >
            </example-data-table>`
    }

}

const currencyFormatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2
});
//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="UTF-8">
     <title>Tester</title>
  </head>
  <body>
     <datatables-app></datatables-app>
     <script src="dist/index.js"></script>
  </body>
</html>
//webpack.config.js

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry:
        {
            "./datatables/dist/index": "./datatables/src/index.ts",
        },
    output: {
        path: path.resolve(__dirname),
        filename: '[name].js'
    },
    externals: {},

    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** ⚠️