Server Side

[tuvaergun]

Hello;

When will the Server Side feature be activated?

Waiting Impatiently

[vincjo]

Hey
It will be effective on septembre i think
I have tout do some table header improvements first

[cuiqui]

Hi! Is this on track by any chance?

[vincjo]

Hi,
I will start working on SSR support when "svelte-kit" is released I think

[hood]

I think times are mature enough to start working on server side pagination!

[RA9]

@vincjo svelte-kit is in beta, can we expect a WIP on the server-side?

[samverrall]

Any updates on server-side support?

[stolinski]

I just forked and loaded up the master branch and it seems to work pretty well with Svelte Kit / SSR already. Looks like the master branch isn't the same build that's published, so if you are looking to use this with Svelte Kit and SSR, you probably can just by loading it up locally from the master branch.

[Hmerman6006]

Good day, I setup a project using Svelte and imported svelte-simple-datatables with axios to try and use server side rendering: given the revolutionary syntax of Svelte and the inbuilt Reactive declaration I thought it would be as simple as declaring a function that promises to update a variable and re-drawing the datatable on each search or refresh or some event in the life cycle of a component. But it seems I am implementing something incorrectly since I can see my variable being updated from server side but not the datatable:

<script>
    import { onMount } from "svelte";
    import { Datatable } from 'svelte-simple-datatables';
    import {env} from './utils/EnvUtils.js';
    import axios from "axios";

    console.log(env);
    
    const BASE_URL = env.host + 'records';

    const config = {
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "Accept": "application/json",
            'Content-Type': 'application/json',
            "X-CSRF-Token": document.querySelector('meta[name="csrf-token"][content]').content
        }
    }

    const settings = {
        sortable: true,
        pagination: true,
        scrollY: true,
        rowsPerPage: 50,
        columnFilter: false,
        css: true,
        labels: {
            search: 'Search...',    // search input placeholer
            filter: 'Filter',       // filter inputs placeholder
            noRows: 'No entries to found',
            info: 'Showing {start} to {end} of {rows} entries',
            previous: 'Previous',
            next: 'Next',       
        },
        blocks: {
            searchInput: true, 
            paginationButtons: true,
            paginationRowCount: true,
        }
    }
    let rows;
    let rowData;
    let currentPage = 1;
   let search;
    $: updateData(currentPage, search);  // re-runs if page or search changes
    let perPage = 10;
    async function fetchData(page, search = undefined) {
        console.log(page);
        try {
            const getUrl = (search!==undefined) ? `${BASE_URL}?page=${page}&per_page=${perPage}&search=${search}&delay=1` : `${BASE_URL}?page=${page}&per_page=${perPage}&delay=1`;
            const response = await axios.get(getUrl, config);
            const { data } = await response;
            console.log("data:", data);

            return data && data['data']!==null && data['data']!==undefined ? data.data : [];
        } catch (error) {
            console.error("Error: ", error);
        }
    }

    async function updateData(page, search = undefined) {
        rowData = await fetchData(page, search);
        console.log("row data:", rowData);  // this gets updated
    }

    // onMount(updateData);
</script>

<Datatable {rowData} {settings} bind:dataRows={rows} id={'record-datatable'}>
    <thead>
        <!-- <th data-key="id">ID</th> -->
        <th data-key="title">Title</th>

        <th data-key="updated_at">Updated</th>
    </thead>
    <tbody>
    {#if rows}
        {#each $rows as row}
            <tr>
                <!-- <td>{row.id}</td> -->
                <td>{row.title}</td>
                <td>{row.updated_at}</td>
            </tr>
        {/each}
    {/if}
    </tbody>
</Datatable>

Am I doing something wrong or is this impossible?

Edit

Okay I found my error: the data and settings attributes of the Datatable component was omitted, after adding it; the datatable updated.