@fluid-topics/ft-filterable-table

A filterable table component.

Install

npm install @fluid-topics/ft-filterable-table
yarn add @fluid-topics/ft-filterable-table

Usage

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>