KVision
Primary version
Primary version
  • KVision Guide
  • Introduction
  • Migration
    • Migration from 8.x to 9.x
    • Migration from 7.x to 8.x
    • Migration from 6.x to 7.x
    • Migration from 5.x to 6.x
    • Migration from 4.x to 5.x
  • 1. Getting Started
    • Setting Up
    • Modules
    • Creating a New Application
    • Development Workflow
    • Hot Module Replacement
    • Debugging
    • Building For Production
  • 2. Frontend Development Guide
    • UI Structure
    • Root Container
    • Theming
    • Dark mode
    • Type safe CSS Properties
    • Basic Components
    • Icons and Images
    • Buttons and Toolbars
    • Layout Containers
    • Events
    • Working with State
    • DOM Bindings & Lifecycle Hooks
    • W3C, Snabdom, and KVision Elements
    • Forms
    • Form controls
    • Drag and drop
    • Internationalization
    • Adding custom tags (SVG example)
    • Custom components
  • 3. Optional UI Functionality (via modules)
    • Using Redux
    • Bootstrap
      • Navigation and menus
      • Tooltips and popovers
      • Modals, windows and toasts
    • Charts
    • Toasts
    • Tabulator Tables
    • Handlebars.js Templates
    • JS Routing with Navigo
    • jQuery Bindings
    • Using REST Services
  • 4. Integrating With Javascript Libraries
    • Integrating With React Components
  • 5. Fullstack Development Guide
    • Select Remote
    • Tom Select Remote
    • Tom Typeahead Remote
    • Tabulator Remote
  • FAQ
  • Useful References
Powered by GitBook
On this page
  1. 5. Fullstack Development Guide

Tabulator Remote

The io.kvision.tabulator.TabulatorRemote component, contained in the kvision-tabulator-remote module, is a subclass of the Tabulator component, dedicated for use with the fullstack interfaces. Unlike standard Tabulator component (which can also load data from an AJAX source but needs a defined endpoint) TabulatorRemote is bound directly to the method of the remote service. The method signature looks like this:

import dev.kilua.rpc.annotations.RpcService
import dev.kilua.rpc.RemoteData
import dev.kilua.rpc.RemoteFilter
import dev.kilua.rpc.RemoteSorter

@Serializable
data class Row(val column1: String, val column2: String, val column3: String)

@RpcService
interface IRowDataService {
    suspend fun rowData(page: Int?, size: Int?, filter: List<RemoteFilter>?, sorter: List<RemoteSorter>?, state: String?): RemoteData<Row>
}

This model is prepared for server side pagination, sorting, filtering and also receiving external state, but the parameters are nullable, and will be sent only when configured by the appropriate TabulatorOptions.

tabulatorRemote(
    getServiceManager(),
    IRowDataService::rowData,
    { someState.toString() },
    TabulatorOptions(
        layout = Layout.FITCOLUMNS,
        pagination = true,
        paginationMode = PaginationMode.REMOTE,
        paginationSize = 3,
        filterMode = FilterMode.REMOTE,
        sortMode = SortMode.REMOTE,
        columns = listOf(
            ColumnDefinition("Column 1", Row::column1.name, headerFilter = Editor.INPUT),
            ColumnDefinition("Column 2", Row::column2.name),
            ColumnDefinition("Column 3", Row::column3.name)
        )
    ), serializer = serializer()
)

The page parameter contains the current requested page, the size parameter - the number of requested rows, the filter and sorter parameters contain values of selected filters and sorters. The returned data is always wrapped into RemoteData class, defined as:

@Serializable
data class RemoteData<T>(val data: List<T> = listOf(), val last_page: Int = 0)

You can ignore last_page value, if the RemoteTabulator component is not configured for remote pagination.

PreviousTom Typeahead RemoteNextFAQ

Last updated 25 days ago