@reportkit/ui

The browser layer for ReportKit — design tokens, page chrome, and DataTables helpers.

Website & Docs · Live Demo · CSS · JS

Part of the Lorapok Labs ecosystem. Framework-free CSS + JS that pairs with the reportkit/core engine and its Laravel adapters.

---

What is @reportkit/ui?

@reportkit/ui gives ReportKit reports a consistent, professional look and the client behaviour they need: CAS design tokens, page chrome, sync/async loaders, KPI cards, and first-class server-side DataTables helpers — including export the current view without re-querying.

Architecture

flowchart TB
  subgraph ui_pkg [reportkit-ui package]
    CSS[reportkit.css]
    Compat[reportkit-compat.css]
    JS[reportkit.js]
  end
  subgraph runtime [Browser runtime]
    Fonts[ReportKit.fonts]
    Sync[ReportKit.syncLoader]
    Async[ReportKit.asyncLoader]
    Table[ReportKit.table]
    Kpi[ReportKit.kpi]
  end
  Host[Host Blade or HTML]
  CSS --> Host
  Compat --> Host
  JS --> Fonts
  JS --> Sync
  JS --> Async
  JS --> Table
  JS --> Kpi

Loading

Layout order (CAS): page-head → filter → summary → KPI → panels → loaders → send → howto.

---

JS surface

API	Purpose
ReportKit.fonts.ensure()	Inject Manrope/Sora
ReportKit.syncLoader.*	Classic form overlay
ReportKit.asyncLoader.*	Prepare progress overlay
ReportKit.table.mount()	DataTables serverSide mount
ReportKit.table.toPreparedRows(api)	Export current view — no re-query
ReportKit.kpi.apply()	Fill KPI cards from summary JSON

Requirements

• Peer: jQuery ≥ 1.10.0
• Optional peer: DataTables (datatables.net) for ReportKit.table.mount

Install

npm install @reportkit/ui

Beta channel:

npm install @reportkit/ui@beta

Use in a page

<link rel="stylesheet" href="path/to/reportkit.css">
<link rel="stylesheet" href="path/to/reportkit-compat.css"><!-- optional CAS aliases -->

<script src="jquery.min.js"></script>
<script src="jquery.dataTables.min.js"></script><!-- optional -->
<script src="path/to/reportkit.js"></script>

ReportKit.fonts.ensure();
ReportKit.syncLoader.bindForm('#search-pan', '#rkSyncLoading');

var table = ReportKit.table.mount('#rkTable', {
  ajax: '/admin/demo-report/data',
  columns: [
    { data: 'id', title: 'ID' },
    { data: 'name', title: 'Name' }
  ]
});

Docs: docs/CSS.md · docs/JS.md

---

Ecosystem

Package	Role
reportkit/core	PHP engine (5.6 → 8.5)
reportkit/laravel-legacy	Laravel 4.1–5.4
reportkit/laravel	Laravel 5.5 → 12 / 13
@reportkit/ui	This repository

Author

Mohammad Maizied Hasan Majumder · mdshuvo40@gmail.com Founder & Principal Engineer at Lorapok Labs · Senior Software Engineer @ Shohoz Ltd

License

MIT © Mohammad Maizied Hasan Majumder / Lorapok Labs