Basic usage

API request example

https://api.mysite.com/users?
    limit=10            # rows per page
    &offset=20          # offset (20 = page number 3)
    &q=michel           # full text search
    &city=limoge        # column filter: where "city" = 'limoge'
    &sort=age
    &order=desc         # order by "age" descending

Bind a load function to datatable events

<script lang="ts">
    import { DataHandler } from '@vincjo/datatables/remote'
    import { myLoadFunction } from './my-api-helper'

    const handler = new DataHandler([], { rowsPerPage: 10 })

    handler.onChange( (state: State) => myLoadFunction(state): Promise<Row[]> )
    // myLoadFunction() must return an iterable dataset
</script>

State = client-side datatable state

type State = {
    pageNumber: number,
    rowsPerPage: number,
    offset: number,
    search: string | undefined,
    sort: Order<Row> | undefined,
    filters: Filter<Row>[] | undefined,
    setTotalRows: (value: number) => void
}

Load function

import type { State } from '@vincjo/datatables/remote'

export const myLoadFunction = async (state: State) => {

    const response = await fetch(
        `https://api.mysite.com/users?${getParams(state)}`
    )
    const json = await response.json()

    state.setTotalRows(json.count)

    return json.results
}


const getParams = ({ offset, rowsPerPage, search, sort, filters }: State) => {

    let params = `offset=${offset}&limit=${rowsPerPage}`

    if (search) {
        params += `&q=${search}`
    }
    if (sort) {
        params += `&sort=${sort.orderBy}&order=${sort.direction}`
    }
    if (filters) {
        params += filters.map(({ filterBy, value }) => `&${filterBy}=${value}`).join('')
    }
    return params
}

Trigger reload

handler.invalidate() // will reload and update data