Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When Sort is enabled, extra requests to the server are made per sortable column. #30

Open
Etzeitet opened this issue Feb 9, 2023 · 3 comments
Open

When Sort is enabled, extra requests to the server are made per sortable column. #30

Etzeitet opened this issue Feb 9, 2023 · 3 comments
Labels
help wanted Extra attention is needed

Comments

@Etzeitet
Copy link

Etzeitet commented Feb 9, 2023

As per the title, I have found that when sorting is enabled, GridJS makes additional requests to the server url per column that sorting is enabled on.

Below is a simple Svelte component. I have set sort to true

<script>
    import Grid from "gridjs-svelte"

    let columns = [
        {
            id: "id",
            name: "ID",
        },
        {
            id: "machine_name",
            name: "Machine Name",
        },
        {
            id: "action",
            name: "Action",
        },
        {
            id: "start",
            name: "Start",
        },
        {
            id: "status",
            name: "Status",
        }
    ]

    let server = {
        url: "http://localhost:8000/api/jobs",
        then: (data) => data.data
    }

    let sort = true

</script>

<div class="datatable">
    <Grid {server} {columns} {sort}/>
</div>

When the page loads, I can see 6 calls to my backend server:

image

If I disable sort, I get just the one call:

image

And if I enable sort on a single column, I get two calls:

image

Very occasionally only a single call is made, but it is sporadic and it's not clear to me why it seems to behave now and then.

I cannot reproduce this behaviour when using GridJS in a standalone HTML page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/mermaid.css" rel="stylesheet">
        <title>Jobs Manager</title>
    </head>
    <body>
        <div id="wrapper"></div>

        <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
        <script>
            new gridjs.Grid({
                columns: [
                    {
                        id: "id",
                        name: "ID",
                    },
                    {
                        id: "machine_name",
                        name: "Machine Name",
                    },
                    {
                        id: "action",
                        name: "Action",
                    },
                    {
                        id: "start",
                        name: "Start",
                    },
                    {
                        id: "status",
                        name: "Status
                    },
                ],
                server: {
                    url: "http://localhost:8000/api/jobs",
                    then: (data) => data.data
                },
                sort: true
            }).render(document.getElementById("wrapper"))
        </script>
    </body>
</html>

Again, sort is enabled for all 5 columns, but only ever a single call to the backend:

image

I don't see anything in the documentation for gridjs-svelte that suggests this is normal or expected behaviour.

Interestingly, your own example at https://svelte.dev/repl/e772220feac54e65b132615ac4d8eb09 shows the same behaviour. Enabling sort causes multiple backend calls.

image

Hitting a backend multiple times is obviously not desirable, especially with many users. Since I don't see this behaviour in GridJS itself, I can only assume something is wrong in the Svelte component. My Svelte (and JS in general) isn't good enough for me to troubleshoot the issue on my own.
@miklereverie
Copy link

miklereverie commented Mar 3, 2023 •
edited
Loading

I'm getting exactly the same issue here! Exactly one extra request per each column.

Only happens with sort, search and pagination work just fine.

@iamyuu iamyuu added the help wanted Extra attention is needed label Mar 5, 2023
@rogiervandenberg
Copy link

Thank you for creating this issue and posting this @Etzeitet 🙏

I thought I was doing something wrong in my code until I stumbled on this. I have the same issue:

  • Not using sort results in having 2 calls for loading the server side data
    image

  • Using sort creates an additional request per column

  • The issue is indeed in gridjs-svelte, not gridjs itself.

  • The example at https://svelte.dev/repl/e772220feac54e65b132615ac4d8eb09 is indeed very curious and proves this.. 🧐

@BastienTwist
Copy link

Hey, I'm ~1 year late but grid.js released a fix for this issue => grid-js/gridjs#1356

This is not related to gridjs-svelte I think you can close this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@rogiervandenberg @Etzeitet @miklereverie @iamyuu @BastienTwist