@fluid-topics/ft-filterable-table
v1.1.87
Published
A dynamic table with filters
Downloads
2,327
Readme
A filterable table component.
Install
npm install @fluid-topics/ft-filterable-table
yarn add @fluid-topics/ft-filterable-tableUsage
Lit
import { html } from "lit"
import "@fluid-topics/ft-filterable-table"
import {
ColumnConfiguration,
RowClickEvent
} from "@fluid-topics/ft-filterable-table"
interface Model {
...
}
function render() {
const data: Array<Model> = [ ... ]
const columns: Array<ColumnConfiguration<Model>> = [ ... ]
const sort: Sort = {
column: 0,
order: "asc"
}
return html`
<ft-filterable-table
.data=${ data }
.columns=${ columns }
.sort=${ sort }
@row-click=${ (e: RowClickEvent<Model>) => console.log("Clicked on row: " + e.detail.title) }
/>
`
}Vanilla JS
<!DOCTYPE html>
<html>
<head>
<title>Ft Filterable Table Demo</title>
<script src="./build/ft-filterable-table.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
</head>
<body>
<ft-filterable-table id="table"></ft-filterable-table>
<script>
const data = [...]
const columns = [...]
const sort = {
column: 0,
order: "asc"
}
let table = document.getElementById("table")
table.init(data, columns, sort)
table.addEventListener("row-click", e => console.log("Clicked on row: " + e.detail.title))
</script>
</body>
</html>