Slotted Table Usage - paulmaclean/datatables.webcomponent GitHub Wiki
datatables.webcomponent will convert an inline slotted table
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>Slotted Example</title>
</head>
<body>
<h2>Example Usage using slotted table</h2>
<example-data-table data-summable='{"colIndexes":[3]}' data-filterable='{"colIndexes":[1,2]}'>
<table>
<thead>
<tr>
<th>Name</th>
<th>Occupation</th>
<th>Email</th>
<th>Salary</th>
<th>Date Started</th>
</tr>
</thead>
<tbody>
<tr>
<td>
A Person
</td>
<td>
Sales
</td>
<td>
[email protected]
</td>
<td>
102500
</td>
<td>
2018-01-01
</td>
</tr>
<tr>
<td>
Z Programmer
</td>
<td>
Developer
</td>
<td>
[email protected]
</td>
<td>
90500
</td>
<td>
2017-06-01
</td>
</tr>
<tr>
<td>
A Nother Person
</td>
<td>
Sales
</td>
<td>
[email protected]
</td>
<td>
70000
</td>
<td>
2018-05-01
</td>
</tr>
</tbody>
</table>
</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: {
}
};