Svelte component for Grid.js. Highly inspired by abandoned library gridjs-svelte and library gridjs-react
npm install --save svelte-gridjs
Also, make sure you have Grid.js installed already as it's a peer dependency of gridjs-svelte
:
npm install --save gridjs
Import the Grid component first
import Grid from "svelte-gridjs";
<Grid
data={[
{ name: "John", email: "[email protected]" },
{ name: "Mark", email: "[email protected]" }
]}
columns={['Name', 'Email']}
search
pagination={{
enabled: true,
limit: 1,
}}
/>
Then you can pass all Grid.js configs to the Grid
component. See Grid.js Config for more details.
You can bind your svelte components in Table cells (both in header and body cells) :
The composer function _
allows you to pass a svelte component, props and events with listeners to attach to it. It is fully functionnal with svelte reactivity. Component will unmount properly.
import Grid, {_} from "svelte-gridjs";
import MockComponent from "./MockComponent.svelte";
<Grid
data={[
{ name: "John", email: "[email protected]" },
{ name: "Mark", email: "[email protected]" }
]}
columns={[
'Name',
{
name: 'Email',
formatter: (cell) => _({component : MockComponent, props : {cell}, events : [{event : 'myevent', callback : () => {console.log('hello')}}]})
}
]}
search
pagination={{
enabled: true,
limit: 1,
}}
/>
See the Svelte example.
MIT