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
plugins
props.
- <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:web
npm test
# or on watch mode
npm run test:watch