Global

Members

(constant) callback :ResizeObserverCallback

Type:
  • ResizeObserverCallback
Source:

labels :Labels

Type:
Source:

plugins :Plugins

List of registered plugins
Type:
Source:

Methods

$(selector, base) → {FlexibleHTMLElement|null}

Parameters:
Name Type Description
selector String | HTMLElement
base HTMLElement | Document
Source:
Returns:
Type
FlexibleHTMLElement | null

$$(selector, base) → {Array.<FlexibleHTMLElement>}

Parameters:
Name Type Description
selector String
base Element | Document
Source:
Returns:
Type
Array.<FlexibleHTMLElement>

addClass(el, name)

Parameters:
Name Type Description
el Element
name String
Source:

applyColumnDefinition(el, column)

Column definition will update some props on the html element
Parameters:
Name Type Description
el HTMLElement
column Column
Source:

ce(tagName, parent)

Parameters:
Name Type Description
tagName K
parent HTMLElement
Source:
Returns:

dispatch(el, name, data, bubbles)

Parameters:
Name Type Description
el HTMLElement
name String
data any
bubbles Boolean
Source:

el(el) → {FlexibleHTMLElement}

Parameters:
Name Type Description
el *
Source:
Returns:
Type
FlexibleHTMLElement

find(el, selector) → {FlexibleHTMLElement}

Easily retrieve untyped element For actual type, prefer use of el.querySelector
Parameters:
Name Type Description
el HTMLElement
selector String | HTMLElement
Source:
Returns:
Type
FlexibleHTMLElement

findAll(el, selector) → {Array.<FlexibleHTMLElement>}

Easily retrieve untyped elements For actual type, prefer use of el.querySelectorAll
Parameters:
Name Type Description
el Element
selector String
Source:
Returns:
Type
Array.<FlexibleHTMLElement>

getAttribute(el, name) → {any}

Parameters:
Name Type Description
el Element
name String
Source:
Returns:
Type
any

hasAttribute(el, name) → {Boolean}

Parameters:
Name Type Description
el Element
name String
Source:
Returns:
Type
Boolean

hasClass(el, name) → {Boolean}

Parameters:
Name Type Description
el Element
name String
Source:
Returns:
Type
Boolean

insertAfter(newNode, existingNode)

Parameters:
Name Type Description
newNode HTMLElement
existingNode HTMLElement
Source:

off(el, type, listener)

Parameters:
Name Type Description
el EventTarget
type String
listener EventListenerObject | FlexibleListener
Source:

on(el, type, listener)

Parameters:
Name Type Description
el EventTarget
type String
listener EventListenerObject | FlexibleListener
Source:

one(el, type, listener)

Parameters:
Name Type Description
el EventTarget
type String
listener EventListenerObject | FlexibleListener
Source:

passiveOpts(type) → {AddEventListenerOptions}

Automatically set passive options based on type
Parameters:
Name Type Description
type string
Source:
Returns:
Type
AddEventListenerOptions

removeAttribute(el, name)

Parameters:
Name Type Description
el Element
name String
Source:

removeClass(el, name)

Parameters:
Name Type Description
el Element
name String
Source:

setAttribute(el, name, v, check)

Parameters:
Name Type Description
el Element
name String
v any
check Boolean Prevent setting if attribute is already there
Source:

sortByPriority(list) → {Array.<HTMLElement>}

Parameters:
Name Type Description
list Array.<HTMLElement>
Source:
Returns:
Type
Array.<HTMLElement>

toggleClass(el, name)

Parameters:
Name Type Description
el Element
name String
Source:

Type Definitions

Action

Row action
Properties:
Name Type Attributes Description
title String the title of the button
name String the name of the action
class String the class for the button
url String link for the action
html String custom button data
confirm Boolean <optional>
 needs confirmation
default Boolean is the default row action
Source:

AutosizeColumn

Type:
  • default
Source:

Column

Column definition
Properties:
Name Type Attributes Description
field String the key in the data
title String the title to display in the header (defaults to "field" if not set)
width Number <optional>
 the width of the column (auto otherwise)
class String <optional>
 class to set on the column (target body or header with th.class or td.class)
attr String <optional>
 don't render the column and set a matching attribute on the row with the value of the field
hidden Boolean <optional>
 hide the column
noSort Boolean <optional>
 allow disabling sort for a given column
format String | function <optional>
 custom data formatting
defaultFormatValue String <optional>
 default value to use for formatting
transform String <optional>
 custom value transformation
editable Boolean <optional>
 replace with input (EditableColumn module)
editableType String <optional>
 type of input (EditableColumn module)
responsive Number <optional>
 the higher the value, the sooner it will be hidden, disable with 0 (ResponsiveGrid module)
responsiveHidden Boolean <optional>
 hidden through responsive module (ResponsiveGrid module)
filterType String <optional>
 defines a filter field type ("text" or "select" - defaults to "text")
filterList Array <optional>
 defines a custom array to populate a filter select field in the format of [{value: "", text: ""},...]. When defined, it overrides the default behaviour where the filter select elements are populated by the unique values from the corresponding column records.
firstFilterOption Object <optional>
 defines an object for the first option element of the filter select field. defaults to {value: "", text: ""}
Source:

ColumnResizer

Type:
  • default
Source:

ContextMenu

Type:
  • default
Source:

DataGrid

Type:
  • default
Source:

DraggableHeaders

Type:
  • default
Source:

EditableColumn

Type:
  • default
Source:

ExtendedFunction()

Define a function that can be happily passed to addEventListener
Source:

FixedHeight

Type:
  • default
Source:

FlexibleEvent

Type:
  • Event | FlexibleEventProps
Properties:
Name Type Attributes Description
target FlexibleHTMLElement
currentTarget FlexibleHTMLElement
dataTransfer DataTransfer <optional>
 (DragEvent)
clientX number <optional>
 (MouseEvent)
clientY number <optional>
 (MouseEvent)
Source:

FlexibleHTMLElement

Type:
  • HTMLElement | FlexibleHTMLProps
Properties:
Name Type Attributes Description
checked boolean <optional>
 (HTMLInputElement)
value string <optional>
 (HTMLInputElement)
rowHeight number <optional>
 (HTMLTableRowElement) A flexible type HTMLElement type that does not require using instanceof all over the place Make sure that your selector is indeed valid Only includes most commons props
Source:

FlexibleListener(event)

Parameters:
Name Type Description
event FlexibleEvent
Source:

Labels

Available labels that can be translated
Properties:
Name Type Description
itemsPerPage String
gotoPage String
gotoFirstPage String
gotoPrevPage String
gotoNextPage String
gotoLastPage String
of String
items String
resizeColumn String
noData String
areYouSure String
networkError String
Source:

MixedEvent

Keep this as reference for easy documentation
Type:
  • Event | MouseEvent | InputEvent | DragEvent | FocusEvent | KeyboardEvent | PointerEvent
Source:

MixedHTMLElement

Keep this as reference for easy documentation
Type:
  • HTMLElement | HTMLInputElement | HTMLTableRowElement
Source:

Options

Type:
Source:

Options

Available data grid options, plugins included
Properties:
Name Type Attributes Description
id String <nullable>
 Custom id for the grid
url String <nullable>
 An URL with data to display in JSON format
debug Boolean Log actions in DevTools console
filter Boolean Allows a filtering functionality
sort Boolean Allows a sort by column functionality
defaultSort String Default sort field if sorting is enabled
server Boolean Is a server side powered grid
serverParams ServerParams Describe keys passed to the server backend
dir String Dir
perPageValues Array Available per page options
hidePerPage Boolean Hides the page size select element
columns Array.<Column> Available columns
defaultPage Number Starting page
perPage Number Number of records displayed per page (page size)
expand Boolean Allow cell content to spawn over multiple lines
actions Array.<Action> Row actions (RowActions module)
collapseActions Boolean Group actions (RowActions module)
resizable Boolean Make columns resizable (ColumnResizer module)
selectable Boolean Allow selecting rows with a checkbox (SelectableRows module)
selectVisibleOnly Boolean Select all only selects visible rows (SelectableRows module)
autosize Boolean Compute column sizes based on given data (Autosize module)
autoheight Boolean Adjust height so that it matches table size (FixedHeight module)
autohidePager Boolean auto-hides the pager when number of records falls below the selected page size
menu Boolean Right click menu on column headers (ContextMenu module)
reorder Boolean Allows a column reordering functionality (DraggableHeaders module)
responsive Boolean Change display mode on small screens (ResponsiveGrid module)
responsiveToggle Boolean Show toggle column (ResponsiveGrid module)
filterOnEnter Boolean Toggles the ability to filter column data by pressing the Enter or Return key
spinnerClass String Sets a space-delimited string of css classes for a spinner (use spinner-border css class for bootstrap 5 spinner)
filterKeypressDelay Number Sets a keypress delay time in milliseconds before triggering filter operation.
saveState Boolean Enable/disable save state plugin (SaveState module)
Source:

Plugins

These plugins are all optional
Type:
  • Object
Properties:
Name Type Attributes Description
ColumnResizer ColumnResizer <optional>
 resize handlers in the headers
ContextMenu ContextMenu <optional>
 menu to show/hide columns
DraggableHeaders DraggableHeaders <optional>
 draggable headers columns
EditableColumn EditableColumn <optional>
 draggable headers columns
TouchSupport TouchSupport <optional>
 touch swipe
SelectableRows SelectableRows <optional>
 create a column with checkboxes to select rows
FixedHeight FixedHeight <optional>
 allows having fixed height tables
AutosizeColumn AutosizeColumn <optional>
 compute ideal width based on column content
ResponsiveGrid ResponsiveGrid <optional>
 hide/show column on the fly
RowActions RowActions <optional>
 add action on rows
SpinnerSupport SpinnerSupport <optional>
 inserts a spinning icon element to indicate grid loading.
SaveState SaveState <optional>
 stores grid filter, sort, and paging.
Source:

ResponsiveGrid

Type:
  • default
Source:

RowActions

Type:
  • default
Source:

SaveState

Type:
  • default
Source:

SelectableRows

Type:
  • default
Source:

ServerParams

Parameters to pass along or receive from the server
Properties:
Name Type Description
serverParams.start String
serverParams.length String
serverParams.search String
serverParams.sort String
serverParams.sortDir String
serverParams.dataKey String
serverParams.metaKey String
serverParams.metaTotalKey String
serverParams.metaFilteredKey String
serverParams.optionsKey String
serverParams.paramsKey String
Source:

SpinnerSupport

Type:
  • default
Source:

TouchSupport

Type:
  • default
Source: