Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamyuu/gridjs-svelte
A Svelte wrapper component for Grid.js
https://github.com/iamyuu/gridjs-svelte
filter grid pagination sort svelte svelte-components table
Last synced: about 2 months ago
JSON representation
A Svelte wrapper component for Grid.js
- Host: GitHub
- URL: https://github.com/iamyuu/gridjs-svelte
- Owner: iamyuu
- License: mit
- Created: 2021-01-14T06:40:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-18T17:39:18.000Z (7 months ago)
- Last Synced: 2024-07-19T21:16:04.673Z (2 months ago)
- Topics: filter, grid, pagination, sort, svelte, svelte-components, table
- Language: Svelte
- Homepage: https://npm.im/gridjs-svelte
- Size: 128 KB
- Stars: 56
- Watchers: 3
- Forks: 13
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-made-by-indonesian - gridjs-svelte - `A Svelte wrapper component for Grid.js` *by [Muhammad Yusuf](https://github.com/iamyuu)* (G)
- made-in-indonesia - gridjs-svelte - `A Svelte wrapper component for Grid.js` *by [Muhammad Yusuf](https://github.com/iamyuu)* (G)
README
# gridjs-svelte
A Svelte wrapper component for [Grid.js](https://gridjs.io)
## Installation
```bash
npm install gridjs gridjs-svelte
```
## Usage
```html
import Grid from "gridjs-svelte";
const data = [
{ name: "John", email: "[email protected]" },
{ name: "Mark", email: "[email protected]" },
];
@import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
```
> You can pass all Grid.js configs, refer to [Grid.js types](https://github.com/grid-js/gridjs/blob/master/src/config.ts) for specific configuration options.
## Example
- [Basic](https://svelte.dev/repl/3da1b239563843c4b76ab1b90115821c)
- [Custom Style](https://svelte.dev/repl/d6fffbcd8ce0409c8bdb4a7c2e7df63c)
- [Action Button](https://svelte.dev/repl/80eca12417414c7eabc79756c5a8f464)
- [Server side](https://svelte.dev/repl/e772220feac54e65b132615ac4d8eb09)
- [Event](https://svelte.dev/repl/318d3daa2ed2402cbeb965f7317c1071)
- [Plugin](https://svelte.dev/repl/9a066ccf55f54173bf5c6c8042142566)
- [HTML in cell](https://svelte.dev/repl/3c6d68ee5793465fb19b16b3d6831d57)
- [Svelte component in cell](https://svelte.dev/repl/e3247cb80c344f95b1fdd2853006f159)
- [forceRender](https://svelte.dev/repl/c779df2be3d64008b3b83fbd091df429)
- [Star Wars](https://svelte.dev/repl/0c77bee765c1458d825a4df13aefb5a4)
## Contributing
**PRs are welcome!**
You noticed a bug, a possible improvement or whatever?
Any help is always appreciated, so don't hesitate opening one!
### Get started (Devs)
```bash
git clone https://github.com/iamyuu/gridjs-svelte
cd gridjs-svelte
npm install
npm run dev:web
```
### Running the tests
```bash
npm test
# or on watch mode
npm run test:watch
```