gridjs-svelte

A Svelte wrapper component for Grid.js

Installation

npm install gridjs gridjs-svelte

Usage

Try it out in the browser

<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>

There is also an example server side.

You can pass all Grid.js configs, refer to Grid.js documentation for specific configuration options.

How to get instance?

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} />

<style global>
  @import "https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css";
</style>

How to add plugin?

Try it out in the browser

Write a plugin, you can see how to write the plugin on plugin basic section.
Get an instance of Grid.js, so you can add plugins to Grid.js, you can use grid.plugin.add for adding it.
the last step is you need to re-render Grid.js so that the plugin can appear, you can use grid.forceRender.

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.

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)

git clone https://github.com/iamyuu/gridjs-svelte
cd gridjs-svelte
yarn
yarn storybook

Running the tests

yarn test

andreasbhansen/gridjs-svelte