Widget API Reference

Complete reference for all Teryx widgets. Each is available as a named export and on the global Teryx namespace.

grid

Data grid with sorting, pagination, search, filtering, inline editing, and row selection.

grid('#el', { source: '/api/data', columns: [...], paginated: true })

Option	Type	Default	Description
`source`	`string`	--	API URL returning JSON
`columns`	`GridColumn[]`	--	Column definitions
`paginated`	`boolean`	`false`	Server-side pagination
`pageSize`	`number`	`25`	Rows per page
`searchable`	`boolean`	`false`	Search toolbar
`striped`	`boolean`	`false`	Striped rows
`selectable`	`boolean`	`false`	Row selection
`editable`	`boolean`	`false`	Inline editing
`stickyHeader`	`boolean`	`false`	Fixed header
`exportable`	`boolean`	`false`	Export button

Instance: reload(), getSelected(), clearSelection(), setPage(n)

form

Form builder with 20+ field types, validation, and layouts.

form('#el', { action: '/api/submit', fields: [...], layout: 'vertical' })

Option	Type	Default	Description
`action`	`string`	--	Submission URL
`fields`	`FormField[]`	--	Field definitions
`layout`	`'vertical' \| 'horizontal' \| 'inline'`	`'vertical'`	Layout
`submitLabel`	`string`	`'Submit'`	Button text
`liveValidation`	`boolean`	`false`	Validate on change

Field types: text, email, password, number, tel, url, textarea, select, multiselect, checkbox, radio, switch, date, time, datetime, file, color, range, combobox, tag, richtext, code, display

Instance: reset(), validate(), getData(), setData(), submit(), isValid()

Dialog with dragging, resizing, and dynamic content.

const m = modal({ title: 'Edit', content: '...', size: 'md' }); m.open();

Option	Type	Default	Description
`title`	`string`	--	Title
`content`	`string`	--	HTML content
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Size
`draggable`	`boolean`	`false`	Dragging
`resizable`	`boolean`	`false`	Resizing
`buttons`	`ModalButton[]`	--	Footer buttons

Instance: open(), close(), isOpen(), setContent(), setTitle(), maximize()

tabs

Tab panel with multiple variants.

Option	Type	Default	Description
`items`	`TabItem[]`	--	Tab definitions
`variant`	`'tabs' \| 'pills' \| 'underline' \| 'card'`	`'tabs'`	Style
`vertical`	`boolean`	`false`	Vertical
`scrollable`	`boolean`	`false`	Scrollable strip

Instance: activate(id), activeTab(), addTab(), removeTab()

accordion

Collapsible panels.

Option	Type	Default	Description
`items`	`AccordionItem[]`	--	Panel definitions
`multiple`	`boolean`	`false`	Multiple open
`animated`	`boolean`	`true`	Animate

Instance: toggle(id), open(id), close(id), openAll(), closeAll()

toast

Notification toasts.

toast.success('Saved'); toast.danger('Error');

Option	Type	Default	Description
`message`	`string`	--	Text
`type`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Severity
`duration`	`number`	`5000`	Auto-dismiss ms
`position`	`ToastPosition`	`'top-right'`	Position

tree

Hierarchical tree view.

Option	Type	Default	Description
`nodes`	`TreeNode[]`	--	Tree data
`source`	`string`	--	Load from URL
`selectable`	`boolean`	`false`	Selection
`checkable`	`boolean`	`false`	Checkboxes
`lines`	`boolean`	`false`	Connector lines

Instance: expand(id), collapse(id), expandAll(), collapseAll(), getChecked(), getSelected()

chart

Pure SVG charts, zero dependencies.

chart('#el', { type: 'bar', height: 300, series: [...] })

Option	Type	Default	Description
`type`	`'bar' \| 'line' \| 'area' \| 'pie' \| 'donut' \| 'scatter' \| 'gauge'`	--	Chart type
`height`	`number`	`300`	Height (px)
`series`	`Series[]`	--	Data series
`data`	`DataPoint[]`	--	Pie/donut data
`legend`	`boolean`	`false`	Show legend

Navigation sidebar.

Option	Type	Default	Description
`items`	`SidebarItem[]`	--	Nav items
`brand`	`string`	--	Brand text
`collapsible`	`boolean`	`false`	Collapse toggle
`variant`	`'light' \| 'dark'`	`'light'`	Color

Instance: collapse(), expand(), toggle(), isCollapsed()

steps

Step indicator / wizard.

Option	Type	Default	Description
`items`	`StepItem[]`	--	Step definitions
`current`	`number`	`0`	Active index
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout

Instance: next(), prev(), goTo(n), current()

alert

Inline alert banners.

Option	Type	Default	Description
`type`	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`	Severity
`message`	`string`	--	Text
`dismissible`	`boolean`	`false`	Dismiss button

progress

Progress bars.

Option	Type	Default	Description
`value`	`number`	--	Value (0-100)
`color`	`string`	`'primary'`	Color
`striped`	`boolean`	`false`	Striped
`animated`	`boolean`	`false`	Animate

stat

KPI / statistic display.

Option	Type	Default	Description
`label`	`string`	--	Label
`value`	`string \| number`	--	Value
`icon`	`string`	--	Icon
`color`	`string`	--	Color

rating

Star rating.

Option	Type	Default	Description
`value`	`number`	`0`	Current rating
`max`	`number`	`5`	Max stars
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size

timeline

Vertical timeline.

Option	Type	Default	Description
`items`	`TimelineItem[]`	--	Entries
`alternate`	`boolean`	`false`	Alternate layout

card

Content card / panel.

Option	Type	Default	Description
`title`	`string`	--	Title
`content`	`string`	--	Body
`image`	`string`	--	Image URL
`collapsible`	`boolean`	`false`	Collapsible

drawer

Slide-out panel.

Option	Type	Default	Description
`position`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`	Direction
`size`	`string`	`'320px'`	Width/height

Instance: open(), close(), isOpen()

pagination

Page navigation.

Option	Type	Default	Description
`total`	`number`	--	Total items
`current`	`number`	`1`	Current page
`pageSize`	`number`	`10`	Per page

Instance: goTo(n), current(), setTotal(n)

carousel

Image/content carousel.

Option	Type	Default	Description
`slides`	`CarouselSlide[]`	--	Slides
`autoplay`	`boolean`	`false`	Auto-advance
`interval`	`number`	`5000`	Interval (ms)

Instance: next(), prev(), goTo(i), pause(), play()

calendar

Calendar with month/week/day views.

Option	Type	Default	Description
`events`	`CalendarEvent[]`	--	Events
`view`	`'month' \| 'week' \| 'day'`	`'month'`	Default view

colorPicker

Color picker with presets.

Option	Type	Default	Description
`value`	`string`	`'#000000'`	Initial color
`format`	`'hex' \| 'rgb' \| 'hsl'`	`'hex'`	Format

segmented

Segmented button group.

Option	Type	Default	Description
`items`	`SegmentedItem[]`	--	Segments
`value`	`string`	--	Selected
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size

splitter

Resizable split panels.

Option	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction
`sizes`	`number[]`	`[50, 50]`	Panel sizes (%)

fileupload

File upload with drag-and-drop.

Option	Type	Default	Description
`action`	`string`	--	Upload URL
`multiple`	`boolean`	`false`	Multiple files
`dragDrop`	`boolean`	`true`	Drag-and-drop

Dropdown and right-click menus.

Option	Type	Default	Description
`items`	`MenuItem[]`	--	Menu items
`trigger`	`string \| HTMLElement`	--	Trigger element

Top navigation bar.

Option	Type	Default	Description
`brand`	`string`	--	Brand text
`items`	`NavItem[]`	--	Nav items
`variant`	`'light' \| 'dark' \| 'primary'`	`'light'`	Color

messageBox

Alert / confirm dialog.

Option	Type	Default	Description
`message`	`string`	--	Message
`type`	`'info' \| 'warning' \| 'error' \| 'question' \| 'success'`	`'info'`	Type

descriptions / propertyGrid

Key-value display.

Option	Type	Default	Description
`items`	`DescriptionItem[]`	--	Label-value pairs
`columns`	`number`	`3`	Columns

datalist

Templated data list.

Option	Type	Default	Description
`source`	`string`	--	Data URL
`itemTemplate`	`string`	--	Template
`layout`	`'list' \| 'grid'`	`'list'`	Layout

Exporters

Export data in CSV, Excel, JSON, or HTML format.

import { exportCSV, exportExcel, exportJSON, exportHTML } from 'teryx';
exportCSV(data, columns, 'export.csv');