A Svelte wrapper component for Grid.js
npm install gridjs gridjs-svelte<script> import Grid from "gridjs-svelte"; const data = [ { name: "John", email: "john@example.com" }, { name: "Mark", email: "mark@gmail.com" }, ]; </script> <Grid {data} /> <style global> @import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css"; </style>Check the example for more detail.
You can pass all Grid.js configs, refer to Grid.js types for specific configuration options.
You can use instance and bind it with state, you can check the example here or you can see tutorial for how to bindings component.
<script> import Grid from "gridjs-svelte" + let grid const data = [ { name: "John", email: "john@example.com" }, { name: "Mark", email: "mark@gmail.com" }, ] </script> - <Grid {data} /> + <Grid bind:instance={grid} {data} />- Write a plugin, you can see how to write the plugin on plugin basic section.
- Put the list of plugins into
pluginsprops.
- <Grid {data} /> + <Grid {data} plugins={[awesomePlugin]} />NOTE: if you want to create an advanced plugin, you need to know React because Grid.js uses preact (an alternative React). If you need help to create an advanced plugin, you can open discussions maybe I can help.
<script> import Grid from "gridjs-svelte"; import { SvelteWrapper } from "gridjs-svelte/plugins"; import AwesomeComponent from "./components/awesome-component.svelte"; const columns = [ "Name", { name: "Email", plugin: { component: SvelteWrapper, props: { component: AwesomeComponent, }, }, }, ]; const data = [ { name: "John", email: "john@example.com" }, { name: "Mark", email: "mark@gmail.com" }, ]; </script> <Grid {data} {columns} />PRs are welcome! You noticed a bug, a possible improvement or whatever? Any help is always appreciated, so don't hesitate opening one!
git clone https://github.com/iamyuu/gridjs-svelte cd gridjs-svelte npm install npm run dev:webnpm test # or on watch mode npm run test:watch