@fluid-topics/ft-table
v1.3.59
Published
A dynamic table
Downloads
4,270
Readme
A table component.
Install
npm install @fluid-topics/ft-table
yarn add @fluid-topics/ft-tableUsage
Lit
import { html } from "lit"
import "@fluid-topics/ft-table"
import {
ColumnConfiguration,
RowClickEvent
} from "@fluid-topics/ft-table"
interface Model {
...
}
function render() {
const data: Array<Model> = [ ... ]
const columns: Array<ColumnConfiguration<Model>> = [ ... ]
const sort: Sort = {
column: 0,
order: "asc"
}
return html`
<ftds-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>Ftds Table Demo</title>
<script src="./build/ft-table.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
</head>
<body>
<ft-table id="table"></ft-table>
</body>
</html>