Svelte
ActiveWidgets/Svelte • Datagrid
ActiveWidgets is a multi-framework UI component library. This package provides virtualized datagrid component for Svelte.
Live demo / Developer guide / API reference
Installation
Add @activewidgets/svelte to your project dependencies -
> npm i --save @activewidgets/svelte
Usage
Now you can import ActiveWidgets component classes -
import { Datagrid } from "@activewidgets/svelte";
and use them like any standard Svelte component.
<script>
import { Datagrid } from '@activewidgets/svelte';
import './styles.css';
let rows = [
{ message: 'Hello, World!' }
];
</script>
<Datagrid {rows} />
Live example | Source on github | Edit on stackblitz
Data properties
You have to provide columns and rows properties to the datagrid to show some data. The properties of each column object define how the data will be rendered -
- field - where the cell data comes from (string|function)
- header - column header (string|object)
- width - column width (number, in pixels)
- align - cell text alignment (left|right|center)
- format - number/date format (string|function)
- fixed - fixed (true/false) for columns on the left or right side
The style (string|object) or className properties allow to change the styling of the column and cell elements.
<script>
// ...
const columns = [
{header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
{header: 'Company Name', field: 'companyName', width: 160},
{header: 'Contact', field: 'contactName', width: 120},
{header: 'Title', field: 'contactTitle', width: 120},
{header: 'Address', field: 'address', width: 120, align: 'right'}
];
const rows = northwind.customers;
</script>
<Datagrid {columns} {rows} />
Live example | Source on github | Edit on stackblitz
User events
In addition to the standard DOM keyboard and mouse events the datagrid emits composite mouse event which makes it easier to find the elements affected by the user action -
<script>
// ...
function onMouse({row}){
alert(`row ${row.key} clicked!`);
}
</script>
<Datagrid {columns} {rows} on:mouse={e => onMouse(e.detail)} />
Live example | Source on github | Edit on stackblitz
More info
