@frui.ts/dataviews
v1.0.0-rc.4
Published
View components for data display
Downloads
91
Readme
@frui.ts/dataViews
View components for data display
DataRepeater
- generic structure for rendering data in a grid format. It supports sorting by column and custom value formatters as well.
DataTable
- similar to DataRepeater, but renders ordinary html <table>
by default.
Example
// in your View
import { ColumnDefinition, DataTable } from "@frui.ts/dataviews";
const tableColumns: ColumnDefinition<MyEntity, MyContext>[] = [
{
title: "id",
property: "id",
valueFormatter: x => `(${x.value})`
},
{
titleFactory: (context) => {context.localize("name")},
property: "name",
sortable: true,
}
];
...
<DataTable items={vm.items} itemKey="id" columns={tableColumns} context={vm} />
You can check ColumnDefinition for more details.
Styles
You can also use default CSS styles for table column headers supporting sorting:
import "@frui.ts/dataviews/styles/sorting-header.scss";