| _backColor | Internal helper to set background color and return the element for chaining. Prefer using CSS classes for styling. |
| _class | Internal helper to add a CSS class and return the element for chaining. Prefer using ui.element() with className parameter or standard classList API. |
| _color | Internal helper to set text color and return the element for chaining. Prefer using CSS classes for styling. |
| _innerText | Internal helper to set element inner text and return the element for chaining. Prefer using standard DOM APIs or ui.div/ui.span with content directly. |
| accordion | Creates an accordion with dynamically populated panes. Example: https://public.datagrok.ai/js/samples/ui/components/accordion |
| actionLink | - |
| appendAll | Appends multiple elements to root, and returns root. An element could be either HTMLElement or Viewer. |
| bigButton | - |
| bind | Binds [item] with the [element]. It enables selecting it as a current object, drag-and-drop, tooltip, and popup menu. |
| bindInputs | - |
| block | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| block25 | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| block50 | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| block75 | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| box | Example: https://public.datagrok.ai/js/samples/ui/containers/box |
| boxFixed | - |
| breadcrumbs | Example: https://public.datagrok.ai/js/samples/ui/components/breadcrumbs |
| button | Creates a button with the specified text, click handler, and tooltip. Example: https://public.datagrok.ai/js/samples/ui/components/buttons |
| buttonsInput | - |
| canvas | - |
| card | Renders content as a card. |
| colorPicker | Creates a color picker bound to colorDiv: clicking the element opens the picker, and its background updates live to preview the selected color. |
| comboPopup | Creates a combo popup with the specified icons and items. Example: https://public.datagrok.ai/js/samples/ui/components/combo-popup |
| comboPopupItems | Creates a combo popup with the specified icons and items |
| contextActions | - |
| dialog | Creates a [Dialog]. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters |
| div | - |
| divH | Div flex-box container that positions child elements horizontally. Example: https://public.datagrok.ai/js/samples/ui/containers/flexbox |
| divText | Returns DivElement with the specified inner text. Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| divV | Div flex-box container that positions child elements vertically. Example: https://public.datagrok.ai/js/samples/ui/containers/flexbox |
| dropDown | Creates a dropdown component. The most common use case is a menu dropdown. |
| element | Creates an instance of the element for the specified tag, and optionally assigns it a CSS class. |
| empty | Removes all child nodes, and disposes widgets that these nodes might contain. See also [remove]. |
| extractRoot | - |
| fileBrowser | Example: https://public.datagrok.ai/js/samples/ui/components/file-browser |
| form | - |
| h1 | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| h2 | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| h3 | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| iconFA | Returns a font-awesome icon with the specified name, handler, and tooltip. Example: https://public.datagrok.ai/js/samples/ui/components/icons |
| iconFAB | Same as iconFA but also blue. |
| iconImage | - |
| iconSvg | Creates an icon for the SVG image Usage: - iconSvg('ai.svg') would map to /images/ai.svg - iconSvg('ai') would map to the svg-ai class |
| iframe | Example: https://public.datagrok.ai/js/samples/ui/components/iframe |
| image | Example: https://public.datagrok.ai/js/samples/ui/components/image |
| info | Example: https://public.datagrok.ai/js/samples/ui/components/info-bar |
| inlineText | Renders inline text, calling [renderMarkup] for each non-HTMLElement. Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| inputs | - |
| inputsRow | - |
| label | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| link | Creates an <a> element. |
| list | Creates a visual element representing list of [items]. Example: https://public.datagrok.ai/js/samples/ui/components/list |
| loader | Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators |
| makeDraggable | Example: https://public.datagrok.ai/js/samples/ui/interactivity/drag-and-drop |
| makeDroppable | - |
| markdown | Example: https://public.datagrok.ai/js/samples/ui/components/markdown |
| narrowForm | - |
| onSizeChanged | Example: https://public.datagrok.ai/js/samples/ui/ui-events |
| p | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| panel | Example: https://public.datagrok.ai/js/samples/ui/containers/panels |
| patternsInput | - |
| popupMenu | Example: ui.popupMenu({ 'About': () => grok.shell.info('About'), 'File': { 'Open': () => grok.shell.info('Open'), 'Close': () => grok.shell.info('Close'), } }); |
| rangeSlider | Example: https://public.datagrok.ai/js/samples/ui/components/range-slider |
| remove | Removes the [element] from the DOM, and disposes any widgets that the [element] might contain. See also [empty]. |
| render | Renders object to html element. |
| renderCard | Renders object to html card. |
| renderInline | - |
| ribbonPanel | Typically, this is a host for the icons. |
| schemeInput | - |
| setClass | - |
| setDisabled | - |
| setDisplay | - |
| setDisplayAll | - |
| setUpdateIndicator | Sets an update indicator on the specified element. Example: https://public.datagrok.ai/js/samples/ui/components/update-indicator |
| showColorPicker | Opens a standalone color picker modal immediately, without a trigger element. Use when there is no persistent UI element to bind to (e.g. editing a canvas-rendered grid cell). |
| showPopup | Shows popup with the [element] near the [anchor]. tooltip, and popup menu. |
| span | Renders multiple objects as a span |
| splitH | Positions child elements horizontally and allows you to resize them. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters |
| splitV | Positions child elements vertically and allows you to resize them. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters |
| star | - |
| tabControl | Example: https://public.datagrok.ai/js/samples/ui/components/tab-control |
| table | Creates a visual table based on [items] and [renderer]. BE WARE: Indexing in the renderer function, due to HTML being totally awesome starts from 1, not 0. Because... What's a better way to make developers life miserable, right? |
| tableFromMap | Creates an html table based on [map]. Example: https://public.datagrok.ai/js/samples/ui/components/html-tables |
| tableFromProperties | Creates an editable html table for the specified items (rows) and properties (columns). |
| tags | - |
| tree | Creates new nodes tree. Example: https://public.datagrok.ai/js/samples/ui/components/tree-view |
| typeAhead | - |
| virtualView | Creates a virtual list widget. Example: https://public.datagrok.ai/js/samples/ui/views/virtual-view |
| wait | Waits for Future<Element> function to complete and collect its result. Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators |
| waitBox | 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 |
| wideForm | - |