Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/activewidgets/svelte
Virtualized Svelte Data Grid
https://github.com/activewidgets/svelte
data-grid data-table datagrid datatable grid scrolling svelte table virtual virtualized
Last synced: 5 days ago
JSON representation
Virtualized Svelte Data Grid
- Host: GitHub
- URL: https://github.com/activewidgets/svelte
- Owner: activewidgets
- License: mit
- Created: 2020-02-19T20:04:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T18:49:22.000Z (over 1 year ago)
- Last Synced: 2024-09-24T07:46:33.705Z (about 2 months ago)
- Topics: data-grid, data-table, datagrid, datatable, grid, scrolling, svelte, table, virtual, virtualized
- Language: JavaScript
- Homepage: https://activewidgets.com/svelte/data-grid/
- Size: 1.25 MB
- Stars: 13
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
###
# ActiveWidgets/Svelte • Datagrid
[](https://www.npmjs.com/package/@activewidgets/svelte "View this project on npm")
[](https://www.npmjs.com/package/@activewidgets/svelte "npm package downloads/month")
[](https://github.com/activewidgets/svelte/issues "See Github issues")
[](https://github.com/activewidgets/svelte "Open Github repo")
ActiveWidgets is a multi-framework UI component library. This package provides [virtualized datagrid component for Svelte](https://activewidgets.com/svelte/data-grid/).
[Live demo](https://svelte.activewidgets.com) / [Developer guide](https://activewidgets.com/guide/) / [API reference](https://activewidgets.com/api/)
[](https://svelte.activewidgets.com)
- [Installation](#installation)
- [Usage](#usage)
- [Data properties](#data-properties)
- [User events](#user-events)
## Installation
Add [@activewidgets/svelte](/api/packages/svelte/) to your project dependencies -
```sh
> npm i --save @activewidgets/svelte
```
## Usage
Now you can import ActiveWidgets component classes -
```js
import { Datagrid } from "@activewidgets/svelte";
```
and use them like any standard Svelte component.
```html
import { Datagrid } from '@activewidgets/svelte';
import './styles.css';
let rows = [
{ message: 'Hello, World!' }
];
```
[Live example](https://svelte.activewidgets.com/examples/svelte/hello-world/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/hello-world) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/hello-world?file=src/app.svelte)
## Data properties
You have to provide [columns](/api/datagrid/columns/) and [rows](/api/datagrid/rows/) properties to the datagrid to show some data. The properties of each `column` object define how the data will be rendered -
- [field](/api/datagrid/columns/#field) - where the cell data comes from (string|function)
- [header](/api/datagrid/columns/#header) - column header (string|object)
- [width](/api/datagrid/columns/#width) - column width (number, in pixels)
- [align](/api/datagrid/columns/#align) - cell text alignment (left|right|center)
- [format](/api/datagrid/columns/#format) - number/date format (string|function)
- [fixed](/api/datagrid/columns/#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.
```html
// ...
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;
```
[Live example](https://svelte.activewidgets.com/examples/svelte/columns/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/columns) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/columns?file=src/app.svelte)
## User events
In addition to the standard DOM keyboard and mouse events the datagrid emits composite
[mouse](/api/datagrid/mouse-event/) event which makes it easier to find the elements affected by the user action -
```html
// ...
function onMouse({row}){
alert(`row ${row.key} clicked!`);
}
onMouse(e.detail)} />
```
[Live example](https://svelte.activewidgets.com/examples/svelte/events/) | [Source on github](https://github.com/activewidgets/svelte/tree/master/examples/events) | [Edit on stackblitz](https://stackblitz.com/github/activewidgets/svelte/tree/master/examples/events?file=src/app.svelte)
## More info
- [Live demo](https://svelte.activewidgets.com)
- [Developer guide](https://activewidgets.com/guide/)
- [API reference](https://activewidgets.com/api/)
- [Licensing](https://activewidgets.com/licenses/)
- [Support forum](https://activewidgets.com/messages/)
---
[](https://activewidgets.com)