@gs-lumina/datatable

Lightweight datatable plugin for GS Lumina backend-oriented SPA applications.

Install

npm install gs-lumina @gs-lumina/datatable

Usage

import gs from 'gs-lumina';
import datatable from '@gs-lumina/datatable';

datatable.setup(gs);
gs.plugin.register('datatable', datatable);

datatable.register('users', {
  columns: [
    { key: 'id', label: 'ID' },
    { key: 'name', label: 'Name', sort: true },
  ],
  rows: [],
});

await gs.mount();

<div gs-datatable="users"></div>

URL State

datatable.register('users', {
  route: {
    enabled: true,
    mode: 'replace',
    filters: {
      status: 'status',
    },
  },
});

<select gs-datatable-filter="status"></select>

refresh() writes page, limit, search, sort, direction, and configured filters to location.search without rerendering the GS Lumina module.

Pagination

datatable.register('users', {
  maxPage: 5,
});

maxPage limits visible page number buttons for large datasets.

Server Side

datatable.register('users', {
  serverSide: true,
  path: '/api/users',
  method: 'GET',
});

Response must be:

{
  "response": [],
  "rows": 0
}

rows:0 is valid and renders an empty table.

Limit Input

<div gs-datatable-limit-info>
  display
  <input type="number" min="10" max="50" step="10" gs-datatable-limit>
  page
</div>