Module: ui

Routines for building UI

Namespaces

Classes

Variables

icons

• icons: Object

Type declaration

Name	Type
`add`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`close`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`copy`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`delete`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`edit`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`filter`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`help`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`info`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`play`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`remove`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`save`	(`handler`: `null` \| `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`search`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`settings`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`sync`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`
`undo`	(`handler`: `Function`, `tooltipMsg`: `null` \| `string`) => `HTMLElement`

Defined in

ui.ts:2298

• tooltip: Tooltip

Defined in

ui.ts:1654

Functions

_backColor

▸ _backColor(x, s): HTMLElement

Parameters

Name	Type
`x`	`HTMLElement`
`s`	`string`

Returns

HTMLElement

Defined in

ui.ts:112

_class

▸ _class(x, s): HTMLElement

Parameters

Name	Type
`x`	`HTMLElement`
`s`	`string`

Returns

HTMLElement

Defined in

ui.ts:102

_color

▸ _color(x, s): HTMLElement

Parameters

Name	Type
`x`	`HTMLElement`
`s`	`string`

Returns

HTMLElement

Defined in

ui.ts:107

_innerText

▸ _innerText(x, s): HTMLElement

Parameters

Name	Type
`x`	`HTMLElement`
`s`	`string`

Returns

HTMLElement

Defined in

ui.ts:97

accordion

▸ accordion(key?): Accordion

Creates an accordion with dynamically populated panes. Example: https://public.datagrok.ai/js/samples/ui/components/accordion

Parameters

Name	Type	Default value
`key`	`any`	`null`

Returns

Accordion

Defined in

ui.ts:171

actionLink

▸ actionLink(text, onClick?, tooltipMessage?): HTMLLabelElement

Parameters

Name	Type
`text`	`string`
`onClick?`	`Function`
`tooltipMessage?`	`string`

Returns

HTMLLabelElement

Defined in

ui.ts:2148

appendAll

▸ appendAll(root, elements): HTMLElement

Appends multiple elements to root, and returns root. An element could be either HTMLElement or Viewer.

Parameters

Name	Type
`root`	`HTMLElement`
`elements`	(`HTMLElement` \| `Viewer`<`any`>)[]

Returns

HTMLElement

Defined in

ui.ts:65

bigButton

▸ bigButton(text, handler, tooltip?): HTMLButtonElement

Parameters

Name	Type	Default value
`text`	`string`	`undefined`
`handler`	`Function`	`undefined`
`tooltip`	`null` \| `string`	`null`

Returns

HTMLButtonElement

Defined in

ui.ts:432

bind

▸ bind(item, element, options?): HTMLElement

Binds [item] with the [element]. It enables selecting it as a current object, drag-and-drop, tooltip, and popup menu.

Parameters

Name	Type
`item`	`any`
`element`	`HTMLElement`
`options?`	`Object`
`options.contextMenu`	`boolean`

Returns

HTMLElement

Defined in

ui.ts:584

bindInputs

▸ bindInputs(inputs): StreamSubscription[]

Parameters

Name	Type
`inputs`	`InputBase`<`any`>[]

Returns

StreamSubscription[]

Defined in

ui.ts:676

block

▸ block(items, options?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/containers/blocks

Parameters

Name	Type	Default value
`items`	`HTMLElement`[]	`undefined`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:2084

block25

▸ block25(items, options?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/containers/blocks

Parameters

Name	Type	Default value
`items`	`HTMLElement`[]	`undefined`
`options`	`null` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:2102

block50

▸ block50(items, options?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/containers/blocks

Parameters

Name	Type	Default value
`items`	`HTMLElement`[]	`undefined`
`options`	`null` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:2111

block75

▸ block75(items, options?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/containers/blocks

Parameters

Name	Type	Default value
`items`	`HTMLElement`[]	`undefined`
`options`	`null` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:2093

boolInput

▸ boolInput(name, value, onValueChanged?): InputBase<boolean | null>

Deprecated

The method will be removed soon. Use bool instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`boolean`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<boolean | null>

Defined in

ui.ts:1002

box

▸ box(item?, options?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/containers/box

Parameters

Name	Type	Default value
`item`	`null` \| `HTMLElement` \| `Widget`<`any`> \| `InputBase`<`any`>	`null`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:1834

boxFixed

▸ boxFixed(item, options?): HTMLDivElement

Parameters

Name	Type	Default value
`item`	`null` \| `HTMLElement` \| `Widget`<`any`> \| `InputBase`<`any`>	`undefined`
`options`	`null` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:1851

breadcrumbs

▸ breadcrumbs(path): Breadcrumbs

Example: https://public.datagrok.ai/js/samples/ui/components/breadcrumbs

Parameters

Name	Type
`path`	`string`[]

Returns

Breadcrumbs

Defined in

ui.ts:2278

button

▸ button(content, handler, tooltip?): HTMLButtonElement

Creates a button with the specified text, click handler, and tooltip. Example: https://public.datagrok.ai/js/samples/ui/components/buttons

Parameters

Name	Type	Default value
`content`	`string` \| `Element` \| (`string` \| `Element`)[]	`undefined`
`handler`	`Function`	`undefined`
`tooltip`	`null` \| `string`	`null`

Returns

HTMLButtonElement

Defined in

ui.ts:428

buttonsInput

▸ buttonsInput(children?): HTMLDivElement

Parameters

Name	Type	Default value
`children`	`HTMLButtonElement`[]	`[]`

Returns

HTMLDivElement

Defined in

ui.ts:2236

canvas

▸ canvas(width?, height?): HTMLCanvasElement

Parameters

Name	Type	Default value
`width`	`null` \| `number`	`null`
`height`	`null` \| `number`	`null`

Returns

HTMLCanvasElement

Defined in

ui.ts:121

card

▸ card(content): HTMLDivElement

Renders content as a card.

Parameters

Name	Type
`content`	`HTMLElement`

Returns

HTMLDivElement

Defined in

ui.ts:403

choiceInput

▸ choiceInput<T>(name, selected, items, onValueChanged?, options?): ChoiceInput<T | null>

Deprecated

The method will be removed soon. Use choice instead

Type parameters

Name
`T`

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`selected`	`T`	`undefined`
`items`	`T`[]	`undefined`
`onValueChanged`	`null` \| `Function`	`null`
`options`	`null` \| { `nullable?`: `boolean` }	`null`

Returns

ChoiceInput<T | null>

Defined in

ui.ts:972

colorInput

▸ colorInput(name, value, onValueChanged?): InputBase<string>

Deprecated

The method will be removed soon. Use color instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`string`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<string>

Defined in

ui.ts:1039

colorPicker

▸ colorPicker(color, onChanged, colorDiv): HTMLElement

Parameters

Name	Type
`color`	`number`
`onChanged`	(`color`: `number`) => `void`
`colorDiv`	`HTMLElement`

Returns

HTMLElement

Defined in

ui.ts:1043

columnInput

▸ columnInput(name, table, value, onValueChanged?, options?): InputBase<Column | null>

Deprecated

The method will be removed soon. Use column instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`table`	`DataFrame`	`undefined`
`value`	`null` \| `Column`<`any`>	`undefined`
`onValueChanged`	`null` \| `Function`	`null`
`options?`	`Object`	`undefined`
`options.filter?`	`null` \| `Function`	`undefined`

Returns

InputBase<Column | null>

Defined in

ui.ts:1017

columnsInput

▸ columnsInput(name, table, onValueChanged, options?): InputBase<Column[]>

Deprecated

The method will be removed soon. Use columns instead

Parameters

Name	Type
`name`	`string`
`table`	`DataFrame`
`onValueChanged`	(`columns`: `Column`<`any`>[]) => `void`
`options?`	`Object`
`options.available?`	`string`[]
`options.checked?`	`string`[]

Returns

InputBase<Column[]>

Defined in

ui.ts:1023

comboPopup

▸ comboPopup(caption, items, handler, renderer?): HTMLElement

Creates a combo popup with the specified icons and items. Example: https://public.datagrok.ai/js/samples/ui/components/combo-popup

Parameters

Name	Type	Description
`caption`	`string` \| `HTMLElement`
`items`	`string`[]
`handler`	(`item`: `any`) => `void`	(item) => {...}
`renderer?`	`null` \| (`item`: `any`) => `HTMLElement`	(item) => {...}

Returns

HTMLElement

Defined in

ui.ts:444

comboPopupItems

▸ comboPopupItems(caption, items): HTMLElement

Creates a combo popup with the specified icons and items

Parameters

Name	Type
`caption`	`string` \| `HTMLElement`
`items`	`Object`

Returns

HTMLElement

Defined in

ui.ts:453

contextActions

▸ contextActions(x): HTMLElement

Parameters

Name	Type
`x`	`any`

Returns

HTMLElement

Defined in

ui.ts:2252

dateInput

▸ dateInput(name, value, onValueChanged?): DateInput

Deprecated

The method will be removed soon. Use date instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`null` \| `Dayjs`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

DateInput

Defined in

ui.ts:997

dialog

▸ dialog(options?): Dialog

Creates a [Dialog]. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters

Parameters

Name	Type
`options?`	`string` \| { `helpUrl?`: `string` ; `showFooter?`: `boolean` ; `showHeader?`: `boolean` ; `title?`: `string` }

Returns

Dialog

Defined in

ui.ts:578

div

▸ div(children?, options?): HTMLDivElement

Parameters

Name	Type	Default value
`children`	`string` \| `any`[] \| `HTMLElement`	`[]`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:339

divH

▸ divH(items, options?): HTMLDivElement

Div flex-box container that positions child elements horizontally. Example: https://public.datagrok.ai/js/samples/ui/containers/flexbox

Parameters

Name	Type	Default value
`items`	(`null` \| `HTMLElement`)[]	`undefined`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:398

divText

▸ divText(text, options?): HTMLDivElement

Returns DivElement with the specified inner text. Example: https://public.datagrok.ai/js/samples/ui/components/typography

Parameters

Name	Type	Default value
`text`	`string`	`undefined`
`options`	`any`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:196

divV

▸ divV(items, options?): HTMLDivElement

Div flex-box container that positions child elements vertically. Example: https://public.datagrok.ai/js/samples/ui/containers/flexbox

Parameters

Name	Type	Default value
`items`	`any`[]	`undefined`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLDivElement

Defined in

ui.ts:389

▸ dropDown(label, createElement): DropDown

Example: https://public.datagrok.ai/js/samples/ui/components/combo-popup

Parameters

Name	Type
`label`	`string` \| `Element`
`createElement`	() => `HTMLElement`

Returns

DropDown

Defined in

ui.ts:2285

element

▸ element(tagName, className?): HTMLElement & any

Creates an instance of the element for the specified tag, and optionally assigns it a CSS class.

Parameters

Name	Type	Default value	Description
`tagName`	`string`	`undefined`	The name of an element.
`className`	`null` \| `string`	`null`

Returns

HTMLElement & any

Defined in

ui.ts:52

empty

▸ empty(e): HTMLElement

Removes all child nodes, and disposes widgets that these nodes might contain. See also [remove].

Parameters

Name	Type
`e`	`HTMLElement`

Returns

HTMLElement

Defined in

ui.ts:75

extractRoot

▸ extractRoot(x): HTMLElement | null

Parameters

Name	Type
`x`	`any`

Returns

HTMLElement | null

Defined in

ui.ts:262

fileBrowser

▸ fileBrowser(params?): Widget

Example: https://public.datagrok.ai/js/samples/ui/components/file-browser

Parameters

Name	Type
`params`	`Object`
`params.dataSourceFilter?`	`"S3"`[]
`params.path?`	`string`

Returns

Widget

Defined in

ui.ts:2379

floatInput

▸ floatInput(name, value, onValueChanged?): InputBase<number | null>

Deprecated

The method will be removed soon. Use float instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`null` \| `number`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<number | null>

Defined in

ui.ts:992

form

▸ form(inputs, options?, autosize?): HTMLElement

Parameters

Name	Type	Default value
`inputs`	`InputBase`<`any`>[]	`undefined`
`options`	`null` \| {}	`null`
`autosize`	`boolean`	`true`

Returns

HTMLElement

Defined in

ui.ts:2216

h1

▸ h1(s, options?): HTMLHeadingElement

Example: https://public.datagrok.ai/js/samples/ui/components/typography

Parameters

Name	Type	Default value
`s`	`string` \| `Element`	`undefined`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLHeadingElement

Defined in

ui.ts:135

h2

▸ h2(s, options?): HTMLHeadingElement

Example: https://public.datagrok.ai/js/samples/ui/components/typography

Parameters

Name	Type	Default value
`s`	`string` \| `Element`	`undefined`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLHeadingElement

Defined in

ui.ts:147

h3

▸ h3(s, options?): HTMLHeadingElement

Example: https://public.datagrok.ai/js/samples/ui/components/typography

Parameters

Name	Type	Default value
`s`	`string` \| `Element`	`undefined`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLHeadingElement

Defined in

ui.ts:159

iconFA

▸ iconFA(name, handler?, tooltipMsg?): HTMLElement

Returns a font-awesome icon with the specified name, handler, and tooltip. Example: https://public.datagrok.ai/js/samples/ui/components/icons

Parameters

Name	Type	Default value	Description
`name`	`string`	`undefined`	icon name (omit the "fa-" prefix)
`handler`	`null` \| (`this`: `HTMLElement`, `ev`: `MouseEvent`) => `any`	`null`
`tooltipMsg`	`null` \| `string`	`null`

Returns

HTMLElement

Defined in

ui.ts:220

iconImage

▸ iconImage(name, path, handler?, tooltipMsg?, options?): HTMLElement

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`path`	`string`	`undefined`
`handler`	`null` \| (`this`: `HTMLElement`, `ev`: `MouseEvent`) => `any`	`null`
`tooltipMsg`	`null` \| `string`	`null`
`options`	`null` \| `ElementOptions`	`null`

Returns

HTMLElement

Defined in

ui.ts:232

iconSvg

▸ iconSvg(name, handler?, tooltipMsg?): HTMLElement

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`handler`	`null` \| (`this`: `HTMLElement`, `ev`: `MouseEvent`) => `any`	`null`
`tooltipMsg`	`null` \| `string`	`null`

Returns

HTMLElement

Defined in

ui.ts:250

iframe

▸ iframe(options?): HTMLIFrameElement

Example: https://public.datagrok.ai/js/samples/ui/components/iframe

Parameters

Name	Type
`options?`	`Object`
`options.height?`	`string`
`options.src?`	`string`
`options.width?`	`string`

Returns

HTMLIFrameElement

Defined in

ui.ts:503

image

▸ image(src, width, height, options?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/components/image

Parameters

Name	Type
`src`	`string`
`width`	`number`
`height`	`number`
`options?`	`Object`
`options.target?`	`string` \| `Function`
`options.tooltipMsg?`	`string`

Returns

HTMLDivElement

Defined in

ui.ts:537

info

▸ info(children, header?, reopenable?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/components/info-bar

Parameters

Name	Type	Default value
`children`	`string` \| `HTMLElement` \| `HTMLElement`[]	`undefined`
`header`	`null` \| `string`	`null`
`reopenable`	`boolean`	`true`

Returns

HTMLDivElement

Defined in

ui.ts:354

inlineText

▸ inlineText(objects): HTMLElement

Renders inline text, calling [renderMarkup] for each non-HTMLElement. Example: https://public.datagrok.ai/js/samples/ui/components/typography

Parameters

Name	Type
`objects`	`any`[]

Returns

HTMLElement

Defined in

ui.ts:331

inputs

▸ inputs(inputs, options?): HTMLElement

Parameters

Name	Type	Default value
`inputs`	`Iterable`<`InputBase`<`any`>>	`undefined`
`options`	`any`	`null`

Returns

HTMLElement

Defined in

ui.ts:691

inputsRow

▸ inputsRow(name, inputs): HTMLElement

Parameters

Name	Type
`name`	`string`
`inputs`	`InputBase`<`any`>[]

Returns

HTMLElement

Defined in

ui.ts:955

intInput

▸ intInput(name, value, onValueChanged?): InputBase<number | null>

Deprecated

The method will be removed soon. Use int instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`null` \| `number`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<number | null>

Defined in

ui.ts:962

label

▸ label(text, options?): HTMLLabelElement

Example: https://public.datagrok.ai/js/samples/ui/components/typography

Parameters

Name	Type	Default value
`text`	`null` \| `string`	`undefined`
`options`	`null` \| {}	`null`

Returns

HTMLLabelElement

Defined in

ui.ts:2140

link

▸ link(text, target, tooltipMsg?, options?): HTMLAnchorElement

Creates an <a> element.

Parameters

Name	Type
`text`	`string`
`target`	`string` \| `object` \| `Function`
`tooltipMsg?`	`string`
`options`	`null` \| `string` \| `ElementOptions`

Returns

HTMLAnchorElement

Defined in

ui.ts:552

list

▸ list(items, options?): HTMLElement

Creates a visual element representing list of [items]. Example: https://public.datagrok.ai/js/samples/ui/components/list

Parameters

Name	Type
`items`	`any`[]
`options?`	`Object`
`options.processNode?`	(`node`: `HTMLElement`) => `void`

Returns

HTMLElement

Defined in

ui.ts:493

loader

▸ loader(): any

Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators

Returns

any

Defined in

ui.ts:410

makeDraggable

▸ makeDraggable<T>(e, options?): Element

Example: https://public.datagrok.ai/js/samples/ui/interactivity/drag-and-drop

Type parameters

Name
`T`

Parameters

Name	Type
`e`	`Element`
`options?`	`Object`
`options.allowCopy?`	() => `boolean`
`options.check?`	() => `boolean`
`options.dragObjectType?`	`string`
`options.getDragCaption?`	() => `any`
`options.getDragContext?`	() => `any`
`options.getDragHint?`	() => `string`
`options.getDragObject?`	() => `any`
`options.onDragEnd?`	() => `void`
`options.onDragStart?`	(`me`: `MouseEvent`) => `boolean`

Returns

Element

Defined in

ui.ts:640

makeDroppable

▸ makeDroppable<T>(e, options?): void

Type parameters

Name
`T`

Parameters

Name	Type
`e`	`Element`
`options?`	`Object`
`options.acceptDrop?`	(`dragObject`: `T`) => `boolean`
`options.doDrop?`	(`dragObject`: `T`, `copying`: `boolean`) => `void`

Returns

void

Defined in

ui.ts:665

markdown

▸ markdown(text): HTMLElement

Example: https://public.datagrok.ai/js/samples/ui/components/markdown

Parameters

Name	Type
`text`	`string`

Returns

HTMLElement

Defined in

ui.ts:210

moleculeInput

▸ moleculeInput(name, value, onValueChanged?): InputBase<string>

Deprecated

The method will be removed soon. Use molecule instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`string`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<string>

Defined in

ui.ts:1012

multiChoiceInput

▸ multiChoiceInput<T>(name, value, items, onValueChanged?): InputBase<T[] | null>

Deprecated

The method will be removed soon. Use multiChoice instead

Type parameters

Name
`T`

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`T`[]	`undefined`
`items`	`T`[]	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<T[] | null>

Defined in

ui.ts:977

narrowForm

▸ narrowForm(children?, options?): HTMLElement

Parameters

Name	Type	Default value
`children`	`InputBase`<`any`>[]	`[]`
`options`	`null` \| {}	`null`

Returns

HTMLElement

Defined in

ui.ts:2224

onSizeChanged

▸ onSizeChanged(element): rxjs.Observable<any>

Example: https://public.datagrok.ai/js/samples/ui/ui-events

Parameters

Name	Type
`element`	`HTMLElement`

Returns

rxjs.Observable<any>

Defined in

ui.ts:1064

p

▸ p(text, options?): HTMLParagraphElement

Example: https://public.datagrok.ai/js/samples/ui/components/typography

Parameters

Name	Type	Default value
`text`	`string`	`undefined`
`options`	`any`	`null`

Returns

HTMLParagraphElement

Defined in

ui.ts:2120

panel

▸ panel(items?, options?): HTMLDivElement

Example: https://public.datagrok.ai/js/samples/ui/containers/panels

Parameters

Name	Type	Default value
`items`	`HTMLElement`[]	`[]`
`options?`	`string` \| `ElementOptions`	`undefined`

Returns

HTMLDivElement

Defined in

ui.ts:2131

patternsInput

▸ patternsInput(colors): HTMLElement

Parameters

Name	Type
`colors`	`Object`

Returns

HTMLElement

Defined in

ui.ts:1052

popupMenu

▸ popupMenu(items): void

Parameters

Name	Type
`items`	`any`

Returns

void

Defined in

ui.ts:621

radioInput

▸ radioInput(name, value, items, onValueChanged?): InputBase<string | null>

Deprecated

The method will be removed soon. Use radio instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`string`	`undefined`
`items`	`string`[]	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<string | null>

Defined in

ui.ts:1048

rangeSlider

▸ rangeSlider(minRange, maxRange, min, max, vertical?, style?): RangeSlider

Example: https://public.datagrok.ai/js/samples/ui/components/range-slider

Parameters

Name	Type	Default value
`minRange`	`number`	`undefined`
`maxRange`	`number`	`undefined`
`min`	`number`	`undefined`
`max`	`number`	`undefined`
`vertical`	`boolean`	`false`
`style`	`RangeSliderStyle` \| `SliderOptions`	`'barbell'`

Returns

RangeSlider

Defined in

ui.ts:601

remove

▸ remove(element): void

Removes the [element] from the DOM, and disposes any widgets that the [element] might contain. See also [empty].

Parameters

Name	Type
`element`	`HTMLElement`

Returns

void

Defined in

ui.ts:92

render

▸ render(x, options?): HTMLElement

Renders object to html element.

Parameters

Name	Type
`x`	`any`
`options?`	`ElementOptions`

Returns

HTMLElement

Defined in

ui.ts:281

renderCard

▸ renderCard(x): HTMLElement

Renders object to html card.

Parameters

Name	Type
`x`	`object`

Returns

HTMLElement

Defined in

ui.ts:312

renderInline

▸ renderInline(x): HTMLElement

Parameters

Name	Type
`x`	`HTMLElement`

Returns

HTMLElement

Defined in

ui.ts:321

ribbonPanel

▸ ribbonPanel(items): HTMLDivElement

Parameters

Name	Type
`items`	`null` \| `HTMLElement`[]

Returns

HTMLDivElement

Defined in

ui.ts:2064

schemeInput

▸ schemeInput(gradient): HTMLElement

Parameters

Name	Type
`gradient`	`number`[]

Returns

HTMLElement

Defined in

ui.ts:1056

searchInput

▸ searchInput(name, value, onValueChanged?): InputBase<string>

Deprecated

The method will be removed soon. Use search instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`string`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<string>

Defined in

ui.ts:987

setClass

▸ setClass(e, classes, flag): void

Parameters

Name	Type
`e`	`HTMLElement`
`classes`	`string`
`flag`	`boolean`

Returns

void

Defined in

ui.ts:83

setDisabled

▸ setDisabled(element, disabled, tooltip?): void

Parameters

Name	Type
`element`	`HTMLElement`
`disabled`	`boolean`
`tooltip?`	`null` \| `string` \| () => `null` \| `string` \| `HTMLElement`

Returns

void

Defined in

ui.ts:2328

setDisplay

▸ setDisplay(element, show): HTMLElement

Parameters

Name	Type
`element`	`HTMLElement`
`show`	`boolean`

Returns

HTMLElement

Defined in

ui.ts:2320

setDisplayAll

▸ setDisplayAll(elements, show): void

Parameters

Name	Type
`elements`	`HTMLElement`[]
`show`	`boolean`

Returns

void

Defined in

ui.ts:2316

setUpdateIndicator

▸ setUpdateIndicator(element, updating?): void

Example: https://public.datagrok.ai/js/samples/ui/components/update-indicator

Parameters

Name	Type	Default value
`element`	`HTMLElement`	`undefined`
`updating`	`boolean`	`true`

Returns

void

Defined in

ui.ts:417

showPopup

▸ showPopup(element, anchor, vertical?): Element

Shows popup with the [element] near the [anchor]. tooltip, and popup menu.

Parameters

Name	Type	Default value
`element`	`HTMLElement`	`undefined`
`anchor`	`HTMLElement`	`undefined`
`vertical`	`boolean`	`false`

Returns

Element

Defined in

ui.ts:594

sliderInput

▸ sliderInput(name, value, min, max, onValueChanged?, options?): InputBase<number | null>

Deprecated

The method will be removed soon. Use slider instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`null` \| `number`	`undefined`
`min`	`number`	`undefined`
`max`	`number`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`
`options`	`null` \| { `step`: `null` \| `number` }	`null`

Returns

InputBase<number | null>

Defined in

ui.ts:967

span

▸ span(x, options?): HTMLElement

Renders multiple objects as a span

Parameters

Name	Type	Default value
`x`	`any`[]	`undefined`
`options`	`null` \| `string` \| `ElementOptions`	`null`

Returns

HTMLElement

Defined in

ui.ts:317

splitH

▸ splitH(items, options?, resize?): HTMLDivElement

Div flex-box container that positions child elements horizontally. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters

Parameters

Name	Type	Default value
`items`	`HTMLElement`[]	`undefined`
`options`	`null` \| `ElementOptions`	`null`
`resize`	`null` \| `boolean`	`false`

Returns

HTMLDivElement

Defined in

ui.ts:1926

splitV

▸ splitV(items, options?, resize?): HTMLDivElement

Div flex-box container that positions child elements vertically. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters

Parameters

Name	Type	Default value
`items`	`HTMLElement`[]	`undefined`
`options`	`null` \| `ElementOptions`	`null`
`resize`	`null` \| `boolean`	`false`

Returns

HTMLDivElement

Defined in

ui.ts:1860

star

▸ star(id): HTMLElement

Parameters

Name	Type
`id`	`string`

Returns

HTMLElement

Defined in

ui.ts:2256

stringInput

▸ stringInput(name, value, onValueChanged?, options?): InputBase<string>

Deprecated

The method will be removed soon. Use string instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`string`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`
`options`	`null` \| { `clearIcon?`: `boolean` ; `escClears?`: `boolean` ; `icon?`: `string` \| `HTMLElement` ; `placeholder?`: `String` }	`null`

Returns

InputBase<string>

Defined in

ui.ts:982

switchInput

▸ switchInput(name, value, onValueChanged?): InputBase<boolean>

Deprecated

The method will be removed soon. Use toggle instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`boolean`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<boolean>

Defined in

ui.ts:1007

tabControl

▸ tabControl(pages?, vertical?): TabControl

Example: https://public.datagrok.ai/js/samples/ui/components/tab-control

Parameters

Name	Type	Default value	Description
`pages`	`null` \| { `[key: string]`: `any`; }	`null`	list of page factories
`vertical`	`boolean`	`false`

Returns

TabControl

Defined in

ui.ts:180

table

▸ table<T>(items, renderer, columnNames?): HTMLTableElement

Creates a visual table based on [items] and [renderer].

Type parameters

Name
`T`

Parameters

Name	Type	Default value
`items`	`T`[]	`undefined`
`renderer`	`null` \| (`item`: `T`, `ind`: `number`) => `any`	`undefined`
`columnNames`	`null` \| `string`[]	`null`

Returns

HTMLTableElement

Defined in

ui.ts:472

tableFromMap

▸ tableFromMap(map): HTMLTableElement

Creates an html table based on [map]. Example: https://public.datagrok.ai/js/samples/ui/components/html-tables

Parameters

Name	Type
`map`	`Object`

Returns

HTMLTableElement

Defined in

ui.ts:460

tableFromProperties

▸ tableFromProperties(items, properties): HTMLTableElement

Creates an editable html table for the specified items (rows) and properties (columns).

Parameters

Name	Type
`items`	`any`[]
`properties`	`Property`[]

Returns

HTMLTableElement

Defined in

ui.ts:465

tableInput

▸ tableInput(name, table, tables?, onValueChanged?): InputBase<DataFrame | null>

Deprecated

The method will be removed soon. Use table instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`table`	`null` \| `DataFrame`	`undefined`
`tables`	`DataFrame`[]	`grok.shell.tables`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<DataFrame | null>

Defined in

ui.ts:1029

tagsInput

▸ tagsInput(name, tags, showButton): TagsInput

Deprecated

The method will be removed soon. Use tags instead

Parameters

Name	Type
`name`	`string`
`tags`	`string`[]
`showButton`	`boolean`

Returns

TagsInput

Defined in

ui.ts:2294

textInput

▸ textInput(name, value, onValueChanged?): InputBase<string>

Deprecated

The method will be removed soon. Use textArea instead

Parameters

Name	Type	Default value
`name`	`string`	`undefined`
`value`	`string`	`undefined`
`onValueChanged`	`null` \| `Function`	`null`

Returns

InputBase<string>

Defined in

ui.ts:1034

tree

▸ tree(): TreeViewGroup

Creates new nodes tree. Example: https://public.datagrok.ai/js/samples/ui/components/tree-view

Returns

TreeViewGroup

Defined in

ui.ts:698

typeAhead

▸ typeAhead(name, config): TypeAhead

Parameters

Name	Type
`name`	`string`
`config`	`TypeAheadConfig`

Returns

TypeAhead

Defined in

ui.ts:2289

virtualView

▸ virtualView(length, renderer, verticalScroll?, maxColumns?): VirtualView

Creates a virtual list widget. Example: https://public.datagrok.ai/js/samples/ui/views/virtual-view

Parameters

Name	Type	Default value	Description
`length`	`number`	`undefined`	number of elements
`renderer`	`Function`	`undefined`
`verticalScroll`	`boolean`	`true`	vertical or horizontal scrolling
`maxColumns`	`number`	`1000`	maximum number of items on the non-scrolling axis

Returns

VirtualView

Defined in

ui.ts:615

wait

▸ wait(getElement): any

Waits for Future<Element> function to complete and collect its result. Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators

Parameters

Name	Type
`getElement`	() => `Promise`<`HTMLElement`>

Returns

any

Defined in

ui.ts:479

waitBox

▸ waitBox(getElement): any

Waits for Future<Element> function to complete and collect its result as a ui.box. Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators

Parameters

Name	Type
`getElement`	() => `Promise`<`HTMLElement`>

Returns

any

Defined in

ui.ts:486

wideForm

▸ wideForm(children?, options?): HTMLElement

Parameters

Name	Type	Default value
`children`	`InputBase`<`any`>[]	`[]`
`options`	`null` \| {}	`null`

Returns

HTMLElement

Defined in

ui.ts:2230

Namespaces​

Classes​

Variables​

icons​

Type declaration​

Defined in​

tooltip​

Defined in​

Functions​

_backColor​

Parameters​

Returns​

Defined in​

_class​

Parameters​

Returns​

Defined in​

_color​

Parameters​

Returns​

Defined in​

_innerText​

Parameters​

Returns​

Defined in​

accordion​

Parameters​

Returns​

Defined in​

actionLink​

Parameters​

Returns​

Defined in​

appendAll​

Parameters​

Returns​

Defined in​

bigButton​

Parameters​

Returns​

Defined in​

bind​

Parameters​

Returns​

Defined in​

bindInputs​

Parameters​

Returns​

Defined in​

block​

Parameters​

Returns​

Defined in​

block25​

Parameters​

Returns​

Defined in​

block50​

Parameters​

Returns​

Defined in​

block75​

Parameters​

Returns​

Defined in​

boolInput​

Parameters​

Returns​

Defined in​

box​

Parameters​

Returns​

Defined in​

boxFixed​

Parameters​

Returns​

Defined in​

breadcrumbs​

Parameters​

Returns​

Namespaces

Classes

Variables

icons

Type declaration

Defined in

tooltip

Defined in

Functions

_backColor

Parameters

Returns

Defined in

_class

Parameters

Returns

Defined in

_color

Parameters

Returns

Defined in

_innerText

Parameters

Returns

Defined in

accordion

Parameters

Returns

Defined in

actionLink

Parameters

Returns

Defined in

appendAll

Parameters

Returns

Defined in

bigButton

Parameters

Returns

Defined in

bind

Parameters

Returns

Defined in

bindInputs

Parameters

Returns

Defined in

block

Parameters

Returns

Defined in

block25

Parameters

Returns

Defined in

block50

Parameters

Returns

Defined in

block75

Parameters

Returns

Defined in

boolInput

Parameters

Returns

Defined in

box

Parameters

Returns

Defined in

boxFixed

Parameters

Returns

Defined in

breadcrumbs

Parameters

Returns