Skip to content

How to integrate in your project

Jump to bottom
Roberto Prevato edited this page Jan 7, 2018 · 11 revisions

In order to use the KingTable library, there are three options:

  • download the distribution files, contained in /dist/ folder
  • install using npm: npm install kingtable
  • or, download the source code, and work with ES6 source code It is also necessary to download the Open Iconic fonts.

When using the .css files inside the repository dist folder, the file kingtable.css contains all themes; but it is recommended to optimize your solution, by using the file: kingtable.core.css, which includes only the basic "flatwhite" theme; and eventually add the specific .css files of the desired themes.

Dependencies

How to integrate with server side code

The KingTable library defines an interface for HTTP requests and expected responses, in order to provide pagination and search out of the box. When performing AJAX calls to fetch data that requires server side pagination (and therefore, server side sorting and searching), it sends this information:

HTTP Request Payload

{
  "page": [number],        // page number
  "size": [number],        // results per page
  "sortBy": *sortBy*,    // description below
  "search": [string],      // text search
  "timestamp": [timestamp] // the timestamp of the first time the table was rendered
}

The sortBy parameter can be customized as desired, using the sortByFormatter option. By default, a human readable SQL-like string is sent from client to server (e.g. "name, birthdate desc").

Example:

{
  "page": 1,
  "size": 30,
  "sortBy": "name asc, color desc, red asc",
  "search": null,
  "timestamp": "2017-04-29T19:08:36.800Z"
}

Expected HTTP Response When receiving an AJAX response, it expects the following structure, if results are paginated server side:

{
  items: [array], // array of items that respect the given filters (set of paginated results)
  total: [number] // the total count of items that respect the given filters, except pagination
}

If, instead, a collection doesn't require server side pagination (won't grow over time), the server may simply return an array of items.

In both cases, returned items can be either an optimized collection (array of arrays, where the first array contains property names, following arrays contain the items' values), or a simple collection.

Please refer to the working modes page for more information.

Clone this wiki locally