How to get server side pagination + search + sorting in grid.js?

I can get the table working with server side data and server side search, but when I start trying to add pagination and sorting on top of that (both server side) I get errors and it stops working.

I've looked into Grid.js's docs and, while there are some examples for server side search, pagination and sorting, there's no example when you want to get them working together. I fail to realize how to get them all working at the same time.

Here's a code snippet, I'm using it inside a Sveltekit application.

<script>

    import Grid from 'gridjs-svelte';
    import { page } from '$app/stores';




    const columns = [
        {
            name: 'Nombres',
            sort: true
        },
        {
            name: 'Apellido',
            sort:true
        }
    ];


    const search = {
        enabled: true,
        server: {
            url: (prev, keyword) => `${prev}?search=${keyword}`
        }
    };

    const pagination = {
        limit: 5,
        server: {
          url: (prev, page, limit) => `${prev}?limit=${limit}&offset=${page * limit}`
    }
    }
</script>


<Grid
    {columns}
    sort
    {search}
    {pagination}
    server={{
        url: 'https://mytestingdomain.com/afiliado/find?page=0&size=500&sort=apellido,asc',
        headers:{ 
            'Authorization': 'Bearer thisiswherethetokengoes', 
            'Content-Type': 'application/json' },
        then: (data) =>
                data.content.map((afiliado) => {
                return [afiliado.nombres, afiliado.apellido];
            })
    }}
/>

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

Thanks in advance for taking the time to read and/or help! 😊

Solution

in case you bump into problems when implementing gridJS with sveltekit, here is the working example I have!

As an important note: there is a known issue with sorting, you'll get multiple requests when doing server side sorting, one request per column in fact, no matter what you do, you can track it or help fix it here: https://github.com/iamyuu/gridjs-svelte/issues/30

<script lang="ts">
    //*Import Grid.js
    import Grid from 'gridjs-svelte';
    import { page } from '$app/stores';
    import type { PageData } from './$types';
    export let data: PageData;
    
    const tokenCookie = data.tokenCookie;

    

    
    const columns = [
        {
            name:'N° Afiliado'
        },
        {
            name: 'Nombres',
            
        },
        {
            name: 'Apellido',
            
        },
        {
            name: 'Género'
        },
        {
            name: 'Tipo Doc.'
        },
        {
            name: 'Documento',
            
        }
    ];

    
    const server = {
        url: "https://mytestingdomain.com/afiliado/look-for?",
        headers: {
            Authorization: `Bearer ${tokenCookie}`,
            'Content-Type': 'application/json'
        },
        total: (data:any) => data.totalElements,
        then: (data:any) => data.content.map(afiliado => ([
            afiliado.nroAfiliado,
            afiliado.nombres,
            afiliado.apellido,
            afiliado.sexo.nombreTipoSexo,
            afiliado.tipoDocumento.descripcion,
            afiliado.nroDocumento
            ])
        ),
    };

        
        const search = {
        enabled: true,
        server: {
            url: (prev:any, keyword:any) => `${prev}text=${keyword}`
        }
    };

    
    const pagination = {
        enabled: true,
        limit: 20,
        server: {
            url: (prev:any, page:any) => {
                return `${prev}${prev.includes("?")
                    ? "&"
                    : "?"}page=${page + 1}&size=20`
            },
        },
    };

    
    const sort = {
    multiColumn: false,
    server: {
        url: (prev:any, columns:any) => {
        if (!columns.length) return prev;
    
        const col = columns[0];
        const dir = col.direction === 1 ? 'asc' : 'desc';
        
        let colName = ['nroAfiliado','nombres', 'apellido','sexo.nombreTipoSexo','tipoDocumento.descripcion','nroDocumento'][col.index];
        return `${prev}&sort=${colName},${dir}`;
        }
    }
}

</script>


<Grid {columns} {search} {pagination}  {sort} {server} />

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