A datagrid that sorts, filters and pages without another round trip. Draggable windows, comboboxes, a date picker, tabs, a layout frame. Plain JavaScript, one script tag, and nothing to install alongside it.
npm i kob-ui
Why it exists
EasyUI is GPL unless you buy a licence. Rewriting a working admin app around a component framework was not on the table either. So the widgets that app used were rewritten from scratch — and this is that code, cleaned up and made free to use — in commercial work, with no fee and no attribution.
Use it in closed-source and commercial work. No dual licence, no per-developer fee, no attribution banner. It is not open source: the library ships as a build and may not be modified or republished.
No jQuery, no runtime, no polyfills. One script and one stylesheet, or an ES module import if you have a bundler.
Sorting, per-column filter chips, whole-table search, paging and inline editing all run locally on the rows you loaded.
Every colour, radius and shadow is a CSS custom property. Change three of them and the whole library follows, light and dark.
English and Thai ship with it, Buddhist-era calendar included — while getValue() always hands you ISO dates.
TypeScript definitions for every widget, option and method, plus a live example for each one on this site.
Getting started
No build step. window.Kob is ready as soon as the script runs.
ESM and CommonJS builds ship in the package, with types alongside.
Give an element the widget's class and let the parser build it.
Live, on this page
Every example below is running right now, and the code tab shows the exact source that produced it.
Coming from EasyUI
If your app already speaks datagrid, dialog and
combobox, the mental model carries over. Class names change
from easyui-* to kob-*, and the jQuery plugin
call becomes a plain function call that hands back the instance.
| kob-ui | jQuery EasyUI | |
|---|---|---|
| Licence | Free for commercial use | GPL, or a paid commercial licence |
| Dependencies | None | jQuery |
| Payload | 477 kB JS + 67 kB CSS minified, 174 kB gzipped | ~250 kB plus jQuery, plus icon images |
| Icons | Masked SVG in the stylesheet | PNG sprites |
| Grid filtering | Per-column chips, built in | Filter row extension |
| Theming | CSS custom properties | Prebuilt theme folders |
| Dark mode | Included | No |
| TypeScript types | Bundled | Community definitions |
| Promises | await Kob.confirm(…) | Callbacks |
What is in the box
Sort, per-column filter chips, table-wide search, paging, row selection and inline editors.
A windowed shell: wallpaper icons, taskbar, start menu, one window per running app.
Modal dialogs, or draggable and resizable application windows with minimise and maximise.
north / west / center / east / south with draggable splitters and collapsible regions.
Expand, select, tri-state checkboxes, and children fetched the first time a node opens.
Tabs of grouped commands, large and small buttons, dropdown menus, folds away.
Submenus, shortcuts, separators — as a menu bar, or bound to right-click anywhere.
Tab pages from child elements; titled boxes that fold away or load HTML from a URL.
Value/text lists with keyboard navigation, and a calendar that reads and writes ISO dates.
Labelled inputs with clamping and thousands separators; a real checkbox drawn as a switch.
Read, fill, validate and clear every widget in a form with one call.
The grid's filter chip on its own, for filter bars that sit anywhere on the screen.
Promise-returning alert, confirm and prompt dialogs, corner toasts, and inline banners.
Measured or indeterminate bars, spinners, and a one-line busy mask over anything.
Toolbar buttons with 45 masked-SVG icons, and counts that cap and hide themselves.
Cards, button groups, a 12-column row and the flex helpers — CSS only, no JavaScript.
The whole shell
Wallpaper icons, a taskbar, a start menu, and windows that drag, resize, minimise and maximise. Each one is an ordinary dialog with an ordinary widget inside it.
Make it yours