logo

/github|v4.7.0

Class

new Grid(options, el)

Grid public API

PARAMETERS
NameTypeDescription

options

Object

PROPERTIES
NameTypeDescription

data

[ ArrayObject ]

Grid data for making rows. When using the data source, sets to object.

pageOptions

Object = {}

The object for the pagination options with the data source.

header

[ Object ]

Options object for header.

PROPERTIES
NameTypeDescription

height

number = 40

The height of the header area.

align

number = center

Horizontal alignment of the header content.
Available values are 'left', 'center', 'right'.

valign

number = middle

Vertical alignment of the row header content.
Available values are 'top', 'middle', 'bottom'.

complexColumns

[ Array ]

This options creates new parent headers of the multiple columns
which includes the headers of specified columns, and sets up the hierarchy.

PROPERTIES
NameTypeDescription

header

[ string ]

The header of the complex column to be shown on the header.

name

[ string ]

The name of column that makes tree column.

childNames

[ Array ]

The name of the child header(subheader).

renderer

[ function ]

Sets the custom renderer to customize the header content.

headerAlign

string = center

Horizontal alignment of the header content.
Available values are 'left', 'center', 'right'.

headerVAlign

string = middle

Vertical alignment of the row header content.
Available values are 'top', 'middle', 'bottom'.

hideChildHeaders

boolean = false

If set to true, the child columns header are hidden.

width

stringnumber = 'auto'

Options for grid width.

rowHeight

[ stringnumber ]

The height of each rows. The default value is 'auto',
the height of each rows expands to dom's height. If set to number, the height is fixed.

minRowHeight

number = 40

The minimum height of each rows. When this value is larger than
the row's height, it set to the row's height.

bodyHeight

[ stringnumber ]

The height of body area. The default value is 'auto',
the height of body area expands to total height of rows. If set to 'fitToParent', the height of the grid
will expand to fit the height of parent element. If set to number, the height is fixed.

minBodyHeight

number = minRowHeight

The minimum height of body area. When this value
is larger than the body's height, it set to the body's height.

columnOptions

[ Object ]

Option object for all columns

PROPERTIES
NameTypeDescription

minWidth

number = 50

Minimum width of each columns

resizable

boolean = true

If set to true, resize-handles of each columns
will be shown.

frozenCount

number = 0

The number of frozen columns.
The columns indexed from 0 to this value will always be shown on the left side.
Grid#setFrozenColumnCount can be used for setting this value dynamically.

frozenBorderWidth

number = 1

The value of frozen border width.
When the frozen columns are created by "frozenCount" option, the frozen border width set.

treeColumnOptions

[ Object ]

Option object for the tree column.

PROPERTIES
NameTypeDescription

name

[ string ]

The name of column that makes tree column.

useIcon

boolean = true

If set to true, the folder or file icon is created on
the left side of the tree cell data.

useCascadingCheckbox

[ boolean ]

If set to true, a cascading relationship is
created in the checkbox between parent and child rows.

copyOptions

[ Object ]

Option object for clipboard copying

PROPERTIES
NameTypeDescription

useFormattedValue

[ boolean ]

Whether to use formatted values or original values
as a string to be copied to the clipboard

useListItemText

[ boolean ]

Copy select or checkbox cell values to 'text'
rather than 'value' of the listItem option.

customValue

[ stringfunction ]

Copy text with 'formatter' in cell.

useClientSort

boolean = true

If set to true, sorting will be executed by client itself
without server.

editingEvent

string = 'dblclick'

If set to 'click', editable cell in the view-mode will be
changed to edit-mode by a single click.

scrollX

boolean = true

Specifies whether to show horizontal scrollbar.

scrollY

boolean = true

Specifies whether to show vertical scrollbar.

showDummyRows

boolean = false

If set to true, empty area will be filled with dummy rows.

keyColumnName

[ string ]

The name of the column to be used to identify each rows.
If not specified, unique value for each rows will be created internally.

heightResizable

boolean = false

If set to true, a handle for resizing height will be shown.

pagination

Object = null

Options for tui.Pagination.
If set to null or false, pagination will not be used.

selectionUnit

string = 'cell'

The unit of selection on Grid. ('cell', 'row')

rowHeaders

[ Array ]

Options for making the row header. The row header content is number of
each row or input element. The value of each item is enable to set string type. (ex: 'rowNum', 'checkbox')

PROPERTIES
NameTypeDescription

type

[ string ]

The type of the row header. ('rowNum', 'checkbox')

header

[ string ]

The header of the row header.

width

[ number ]

The width of the row header column. The unit is pixel.
If this value isn't set, the column's width sets to default value.

align

string = left

Horizontal alignment of the row header content.
Available values are 'left', 'center', 'right'.

valign

string = middle

Vertical alignment of the row header content.
Available values are 'top', 'middle', 'bottom'.

renderer

[ function ]

Sets the custom renderer to customize the header content.

columns

Array

The configuration of the grid columns.

PROPERTIES
NameTypeDescription

name

string

The name of the column.

ellipsis

boolean = false

If set to true, ellipsis will be used
for overflowing content.

align

string = left

Horizontal alignment of the column content.
Available values are 'left', 'center', 'right'.

valign

string = middle

Vertical alignment of the column content.
Available values are 'top', 'middle', 'bottom'.

className

[ string ]

The name of the class to be used for all cells of
the column.

header

[ string ]

The header of the column to be shown on the header.

width

[ number ]

The width of the column. The unit is pixel. If this value
isn't set, the column's width is automatically resized.

minWidth

number = 50

The minimum width of the column. The unit is pixel.

hidden

[ boolean ]

If set to true, the column will not be shown.

resizable

[ boolean ]

If set to false, the width of the column
will not be changed.

validation

[ Object ]

The options to be used for validation.
Validation is executed whenever data is changed or the Grid#validate is called.

PROPERTIES
NameTypeDescription

required

boolean = false

If set to true, the data of the column
will be checked to be not empty.

dataType

numberstring = 'string'

Specifies the type of the cell value.
Available types are 'string' and 'number'.

defaultValue

[ string ]

The default value to be shown when the column
doesn't have a value.

formatter

[ functionstring ]

The function that formats the value of the cell.
The return value of the function will be shown as the value of the cell. If set to 'listItemText',
the value will be shown the text.

escapeHTML

boolean = true

If set to true, the value of the cell
will be encoded as HTML entities.

ignored

boolean = false

If set to true, the value of the column will be
ignored when setting up the list of modified rows.

sortable

boolean = false

If set to true, sort button will be shown on
the right side of the column header, which executes the sort action when clicked.

sortingType

string = 'asc'

If set to 'desc', will execute descending sort initially
when sort button is clicked.

onBeforeChange

[ function ]

The function that will be
called before changing the value of the cell. If stop() method in event object is called,
the changing will be canceled.

onAfterChange

[ function ]

The function that will be
called after changing the value of the cell.

editor

[ Object ]

The object for configuring editing UI.

PROPERTIES
NameTypeDescription

type

stringfunction = 'text'

The string value that specifies
the type of the editing UI. Available values are 'text', 'password', 'select', 'radio', 'checkbox'.
When using the custom editor, sets to the customized renderer constructor.

options

[ Object ]

Option object using editor

copyOptions

[ Object ]

Option object for clipboard copying.
This option is column specific, and overrides the global copyOptions.

PROPERTIES
NameTypeDescription

useFormattedValue

[ boolean ]

Whether to use
formatted values or original values as a string to be copied to the clipboard

useListItemText

[ boolean ]

Whether to use
concatenated text or original values as a string to be copied to the clipboard

customValue

[ function ]

Whether to use
customized value from "customValue" callback or original values as a string to be copied to the clipboard

relations

[ Array ]

Specifies relation between this and other column.

PROPERTIES
NameTypeDescription

targetNames

[ Array ]

Array of the names of target columns.

disabled

[ function ]

If returns true, target columns
will be disabled.

editable

[ function ]

If returns true, target columns
will be editable.

listItems

[ function ]

The function whose return
value specifies the option list for the 'select', 'radio', 'checkbox' type.
The options list of target columns will be replaced with the return value of this function.

whiteSpace

string = 'nowrap'

If set to 'normal', the text line is broken
by fitting to the column's width. If set to 'pre', spaces are preserved and the text is braken by
new line characters. If set to 'pre-wrap', spaces are preserved, the text line is broken by
fitting to the column's width and new line characters. If set to 'pre-line', spaces are merged,
the text line is broken by fitting to the column's width and new line characters.

summary

[ Object ]

The object for configuring summary area.

PROPERTIES
NameTypeDescription

height

[ number ]

The height of the summary area.

position

string = 'bottom'

The position of the summary area. ('bottom', 'top')

defaultContent

[ stringObject ]

The configuring of summary cell for every column.
This options can be overriden for each column by columnContent options.
If type is string, the value is used as HTML of summary cell for every columns
without auto-calculation.

PROPERTIES
NameTypeDescription

useAutoSummary

boolean = true

If set to true, the summary value of every column is served as a parameter to the template
function whenever data is changed.

template

[ function ]

Template function which returns the
content(HTML) of the column of the summary. This function takes an K-V object as a parameter
which contains a summary values keyed by 'sum', 'avg', 'min', 'max' and 'cnt'.

columnContent

[ Object ]

The configuring of summary cell for each column.
Sub options below are keyed by each column name.
If type of value of this object is string, the value is used as HTML of summary cell for
the column without auto-calculation.

PROPERTIES
NameTypeDescription

useAutoSummary

boolean = true

If set to true, the summary value of each column is served as a parameter to the template
function whenever data is changed.

template

[ function ]

Template function which returns the
content(HTML) of the column of the summary. This function takes an K-V object as a parameter
which contains a summary values keyed by 'sum', 'avg', 'min', 'max' and 'cnt'.

usageStatistics

boolean = true

Send the hostname to google analytics.
If you do not want to send the hostname, this option set to false.

onGridMounted

[ function ]

The function that will be called after rendering the grid.

onGridBeforeDestroy

[ function ]

The function that will be called before destroying the grid.

el

HTMLElement

The target element to create grid.

Static Methods

applyTheme(presetName, extOptions)

Apply theme to all grid instances with the preset options of a given name.

PARAMETERS
NameTypeDescription

presetName

string

preset theme name. Available values are 'default', 'striped' and 'clean'.

extOptions

[ Object ]

if exist, extend preset options with this object.

PROPERTIES
NameTypeDescription

outline

[ Object ]

Styles for the table outline.

PROPERTIES
NameTypeDescription

border

[ string ]

Color of the table outline.

showVerticalBorder

[ boolean ]

Whether vertical outlines of
the table are visible.

selection

[ Object ]

Styles for a selection layer.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of a selection layer.

border

[ string ]

Border color of a selection layer.

scrollbar

[ Object ]

Styles for scrollbars.

PROPERTIES
NameTypeDescription

border

[ string ]

Border color of scrollbars.

background

[ string ]

Background color of scrollbars.

emptySpace

[ string ]

Color of extra spaces except scrollbar.

thumb

[ string ]

Color of thumbs in scrollbars.

active

[ string ]

Color of arrows(for IE) or
thumb:hover(for other browsers) in scrollbars.

frozenBorder

[ Object ]

Styles for a frozen border.

PROPERTIES
NameTypeDescription

border

[ string ]

Border color of a frozen border.

area

[ Object ]

Styles for the table areas.

PROPERTIES
NameTypeDescription

header

[ Object ]

Styles for the header area in the table.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of the header area
in the table.

border

[ string ]

Border color of the header area
in the table.

body

[ Object ]

Styles for the body area in the table.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of the body area
in the table.

summary

[ Object ]

Styles for the summary area in the table.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of the summary area
in the table.

border

[ string ]

Border color of the summary area
in the table.

row

[ Object ]

Styles for the table rows.

PROPERTIES
NameTypeDescription

even

[ Object ]

Styles for even row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of even row.

text

[ string ]

text color of even row.

odd

[ Object ]

Styles for odd row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of cells in odd row.

text

[ string ]

text color of odd row.

dummy

[ Object ]

Styles of dummy row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of dummy row.

hover

[ Object ]

Styles of hovered row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of hovered row.

cell

[ Object ]

Styles for the table cells.

PROPERTIES
NameTypeDescription

normal

[ Object ]

Styles for normal cells.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of normal cells.

border

[ string ]

Border color of normal cells.

text

[ string ]

Text color of normal cells.

showVerticalBorder

[ boolean ]

Whether vertical borders of
normal cells are visible.

showHorizontalBorder

[ boolean ]

Whether horizontal borders of
normal cells are visible.

header

[ Object ]

Styles for header cells.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of header cells.

border

[ string ]

border color of header cells.

text

[ string ]

text color of header cells.

showVerticalBorder

[ boolean ]

Whether vertical borders of
header cells are visible.

showHorizontalBorder

[ boolean ]

Whether horizontal borders of
header cells are visible.

selectedHeader

[ Object ]

Styles for selected header cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of selected header cells.

rowHeader

[ Object ]

Styles for row's header cells.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of row's header cells.

border

[ string ]

border color of row's header cells.

text

[ string ]

text color of row's header cells.

showVerticalBorder

[ boolean ]

Whether vertical borders of
row's header cells are visible.

showHorizontalBorder

[ boolean ]

Whether horizontal borders of
row's header cells are visible.

selectedRowHeader

[ Object ]

Styles for selected row's header cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of selected row's haed cells.

summary

[ Object ]

Styles for cells in the summary area.

PROPERTIES
NameTypeDescription

background

[ string ]

Background color of cells in the summary area.

border

[ string ]

border color of cells in the summary area.

text

[ string ]

text color of cells in the summary area.

showVerticalBorder

[ boolean ]

Whether vertical borders of
cells in the summary area are visible.

showHorizontalBorder

[ boolean ]

Whether horizontal borders of
cells in the summary area are visible.

focused

[ Object ]

Styles for a focused cell.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of a focused cell.

border

[ string ]

border color of a focused cell.

focusedInactive

[ Object ]

Styles for a inactive focus cell.

PROPERTIES
NameTypeDescription

border

[ string ]

border color of a inactive focus cell.

required

[ Object ]

Styles for required cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of required cells.

text

[ string ]

text color of required cells.

editable

[ Object ]

Styles for editable cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of the editable cells.

text

[ string ]

text color of the selected editable cells.

disabled

[ Object ]

Styles for disabled cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of disabled cells.

text

[ string ]

text color of disabled cells.

invalid

[ Object ]

Styles for invalid cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of invalid cells.

text

[ string ]

text color of invalid cells.

currentRow

[ Object ]

Styles for cells in a current row.(deprecated since version 4.4.0)

PROPERTIES
NameTypeDescription

background

[ string ]

background color of cells in a current row.

text

[ string ]

text color of cells in a current row.

evenRow

[ Object ]

Styles for cells in even rows.(deprecated since version 4.4.0)

PROPERTIES
NameTypeDescription

background

[ string ]

background color of cells in even rows.

text

[ string ]

text color of cells in even rows.

oddRow

[ Object ]

Styles for cells in even rows.(deprecated since version 4.4.0)

PROPERTIES
NameTypeDescription

background

[ string ]

background color of cells in odd rows.

text

[ string ]

text color of cells in odd rows.

dummy

[ Object ]

Styles for dummy cells.(deprecated since version 4.4.0)

PROPERTIES
NameTypeDescription

background

[ string ]

background color of dummy cells.

EXAMPLES
var Grid = tui.Grid; // or require('tui-grid')

Grid.applyTheme('striped', {
    grid: {
        border: '#aaa',
        text: '#333'
    },
    cell: {
        disabled: {
            text: '#999'
        }
    }
});

setLanguage(localeCode, data)

Set language

PARAMETERS
NameTypeDescription

localeCode

string

Code to set locale messages and
this is the language or language-region combination (ex: en-US)

data

[ Object ]

Messages using in Grid

EXAMPLES
var Grid = tui.Grid; // or require('tui-grid')

Grid.setLanguage('en'); // default and set English
Grid.setLanguage('ko'); // set Korean
Grid.setLanguage('en-US', { // set new language
     display: {
         noData: 'No data.',
         loadingData: 'Loading data.',
         resizeHandleGuide: 'You can change the width of the column by mouse drag, ' +
                             'and initialize the width by double-clicking.'
     },
     net: {
         confirmCreate: 'Are you sure you want to create {{count}} data?',
         confirmUpdate: 'Are you sure you want to update {{count}} data?',
         confirmDelete: 'Are you sure you want to delete {{count}} data?',
         confirmModify: 'Are you sure you want to modify {{count}} data?',
         noDataToCreate: 'No data to create.',
         noDataToUpdate: 'No data to update.',
         noDataToDelete: 'No data to delete.',
         noDataToModify: 'No data to modify.',
         failResponse: 'An error occurred while requesting data.\nPlease try again.'
     }
});

Instance Methods

activateFocus()

Make view ready to get keyboard input.

addCellClassName(rowKey, columnName, className)

Add the specified css class to cell element identified by the rowKey and className

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

columnName

string

The name of the column

className

string

The css class name to add

addColumnClassName(columnName, className)

Add class name to all cell data of specific column.

PARAMETERS
NameTypeDescription

columnName

string

column name to add className

className

string

class name

addRowClassName(rowKey, className)

Add the specified css class to all cell elements in the row identified by the rowKey

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

className

string

The css class name to add

appendRow(row, options)

Insert the new row with specified data to the end of table.

PARAMETERS
NameTypeDescription

row

[ Object ] = {}

The data for the new row

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

at

[ number ]

The index at which new row will be inserted

extendPrevRowSpan

[ boolean ]

If set to true and the previous row at target index
has a rowspan data, the new row will extend the existing rowspan data.

focus

[ boolean ]

If set to true, move focus to the new row after appending

parentRowKey

[ numberstring ]

Deprecated: Tree row key of the parent which appends given rows

appendTreeRow(row, options)

Insert the new tree row with specified data.

PARAMETERS
NameTypeDescription

row

[ Object ] = {}

The tree data for the new row

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

parentRowKey

[ numberstring ]

Tree row key of the parent which appends given rows

offset

[ number ]

The offset value to insert new tree row

focus

[ boolean ]

If set to true, move focus to the new tree row after appending

blur()

Remove focus from the focused cell.

cancelEditing()

Cancel the editing.

check(rowKey)

Check the row identified by the specified rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

checkAll(allPage)

Check all rows.

PARAMETERS
NameTypeDescription

allPage

[ boolean ]

check all rows when using pagination. The default value is 'true'.

clear()

Remove all rows.

collapse(rowKey, recursive)

Expand tree row.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

recursive

boolean

true for recursively expand all descendant

collapseAll()

Collapse all tree row.

copyToClipboard()

Copy to clipboard

destroy()

Destroy the instance.

disable()

Disable all rows.

disableRow(rowKey, withCheckbox)

Disable the row identified by the rowkey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the target row

withCheckbox

[ boolean ] = true

change including checkbox. The default value is 'true'

disableRowCheck(rowKey)

Disable the row identified by the specified rowKey to not be able to check.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique keyof the row.

enable()

Enable all rows.

enableRow(rowKey, withCheckbox)

Enable the row identified by the rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the target row

withCheckbox

[ boolean ] = true

change including checkbox. The default value is 'true'

enableRowCheck(rowKey)

Enable the row identified by the rowKey to be able to check.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

expand(rowKey, recursive)

Expand tree row.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

recursive

boolean

true for recursively expand all descendant

expandAll()

Expand all tree row.

filter(columnName, state)

Filter the data.

PARAMETERS
NameTypeDescription

columnName

string

column name to filter

state

Array.<FilterState>

filter state

EXAMPLES
grid.filter('name', [{code: 'eq', value: 3}, {code: 'eq', value: 4}]);

findRows(conditions)

Find rows by conditions

PARAMETERS
NameTypeDescription

conditions

ObjectFunction

object (key: column name, value: column value) or
function that check the value and returns true/false result to find rows

RETURNS:
{

Array

} - Row list
EXAMPLES

Conditions type is object.

grid.findRows({
    artist: 'Birdy',
    price: 10000
});

Conditions type is function.

grid.findRows((row) => {
    return (/b/ig.test(row.artist) && row.price > 10000);
});

finishEditing(rowKey, columnName, value)

Save editing value and finishes to edit.

PARAMETERS
NameTypeDescription

rowKey

columnName

value

focus(rowKey, columnName, setScroll)

Focus to the cell identified by given rowKey and columnName.

PARAMETERS
NameTypeDescription

rowKey

NumberString

rowKey

columnName

String

columnName

setScroll

Boolean = false

if set to true, move scroll position to focused position

RETURNS:
{

Boolean

} - true if focused cell is changed

focusAt(rowIndex, columnIndex, isScrollable, setScroll)

Focus to the cell identified by given rowIndex and columnIndex.

PARAMETERS
NameTypeDescription

rowIndex

Number

rowIndex

columnIndex

Number

columnIndex

isScrollable

setScroll

boolean = false

if set to true, scroll to focused cell

RETURNS:
{

Boolean

} - true if success

getAncestorRows(rowKey)

Get the ancestors of the row which has the given row key.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

RETURNS:
{

Array.<TreeRow>

} - the ancestor rows

getCheckedRowKeys()

Return a list of the rowKey of checked rows.

RETURNS:
{

Array.<undefined>

} - A list of the rowKey.

getCheckedRows()

Return a list of the checked rows.

RETURNS:
{

Array.<object>

} - A list of the checked rows.

getChildRows(rowKey)

Get the children of the row which has the given row key.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

RETURNS:
{

Array.<Object>

} - the children rows

getColumns()

Return a list of the column model.

RETURNS:
{

Array

} - A list of the column model.

getColumnValues(columnName)

Return a list of all values in the specified column.

PARAMETERS
NameTypeDescription

columnName

string

The name of the column

RETURNS:
{

Arraystring

} - A List of all values in the specified column. (or JSON string of the list)

getData()

Return a list of all rows.

RETURNS:
{

Array

} - A list of all rows

getDepth(rowKey)

Get the depth of the row which has the given row key.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

RETURNS:
{

number

} - the depth

getDescendantRows(rowKey)

Get the descendants of the row which has the given row key.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

RETURNS:
{

Array.<Object>

} - the descendant rows

getElement(rowKey, columnName)

Return the HTMLElement of the cell identified by the rowKey and columnName.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

columnName

string

The name of the column

RETURNS:
{

HTMLElement

} - The HTMLElement of the cell element

getFilterState()

Get filter state.

RETURNS:
{

Array.<FilterState>

} - filter state

getFocusedCell()

Return data of currently focused cell

RETURNS:
{

numberstring

} - rowKey - The unique key of the row

getIndexOfColumn(columnName)

Return the index of the column indentified by the column name.

PARAMETERS
NameTypeDescription

columnName

string

The unique key of the column

RETURNS:
{

number

} - The index of the column

getIndexOfRow(rowKey)

Return the index of the row indentified by the rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

RETURNS:
{

number

} - The index of the row

getModifiedRows(options)

Return the object that contains the lists of changed data compared to the original data.
The object has properties 'createdRows', 'updatedRows', 'deletedRows'.

PARAMETERS
NameTypeDescription

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

checkedOnly

boolean = false

If set to true, only checked rows will be considered.

withRawData

boolean = false

If set to true, the data will contains
the row data for internal use.

rowKeyOnly

boolean = false

If set to true, only keys of the changed
rows will be returned.

ignoredColumns

[ Array ]

A list of column name to be excluded.

RETURNS:
{

Object

} - Object that contains the result list.

getPagination()

Return an instance of tui.Pagination.

RETURNS:
{

tui.<Pagination>

}

getParentRow(rowKey)

Get the parent of the row which has the given row key.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

RETURNS:
{

Object

} - the parent row

getRow(rowKey)

Return the object that contains all values in the specified row.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the target row

RETURNS:
{

Object

} - The object that contains all values in the row.

getRowAt(rowIdx)

Return the object that contains all values in the row at specified index.

PARAMETERS
NameTypeDescription

rowIdx

number

The index of the row

RETURNS:
{

Object

} - The object that contains all values in the row.

getRowCount()

Return the total number of the rows.

RETURNS:
{

number

} - The total number of the rows

getRowSpanData(rowKey, columnName)

Return the rowspan data of the cell identified by the rowKey and columnName.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

columnName

string

The name of the column

RETURNS:
{

Object

} - Row span data

getSortState()

Get state of the sorted column in rows

RETURNS:
{

Object

} - Sorted column's state

getSummaryValues(columnName)

Return the values of given column summary.
If the column name is not specified, all values of available columns are returned.
The shape of returning object looks like the example below.

PARAMETERS
NameTypeDescription

columnName

[ string ]

column name

RETURNS:
{

Object

}
EXAMPLES
{
    sum: 1000,
    avg: 200,
    max: 300,
    min: 50,
    cnt: 5,
    filtered: {
      sum: 1000,
      avg: 200,
      max: 300,
      min: 50,
      cnt: 5
    }
}

getValue(rowKey, columnName, isOriginal)

Return the value of the cell identified by the rowKey and columnName.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the target row.

columnName

string

The name of the column

isOriginal

[ boolean ]

It set to true, the original value will be return.

RETURNS:
{

numberstring

} - The value of the cell

hideColumn(columnName, arguments)

Hide columns

PARAMETERS
NameTypeDescription

columnName

arguments

string

Column names to hide

isModified()

Return true if there are at least one row modified.

RETURNS:
{

boolean

} - True if there are at least one row modified.

moveRow(rowKey, targetIndex)

Move the row identified by the specified rowKey to target index.
If data is sorted or filtered, this couldn't be used.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

targetIndex

number

target index for moving

off(eventName, fn)

Remove custom event to grid.

PARAMETERS
NameTypeDescription

eventName

string

custom event name

fn

Function

event handler

on(eventName, fn)

Add custom event to grid.

PARAMETERS
NameTypeDescription

eventName

string

custom event name

fn

Function

event handler

prependRow(row, options)

Insert the new row with specified data to the beginning of table.

PARAMETERS
NameTypeDescription

row

[ Object ]

The data for the new row

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

focus

[ boolean ]

If set to true, move focus to the new row after appending

readData(page, data, resetData)

Request 'readData' to the server. The last requested data will be extended with new data.

PARAMETERS
NameTypeDescription

page

Number

Page number

data

Object

Data(parameters) to send to the server

resetData

Boolean

If set to true, last requested data will be ignored.

refreshLayout()

Refresh the layout view. Use this method when the view was rendered while hidden.

reloadData()

Request 'readData' with last requested data.

removeCellClassName(rowKey, columnName, className)

Remove the specified css class from the cell element indentified by the rowKey and columnName.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

columnName

string

The name of the column

className

string

The css class name to be removed

removeCheckedRows(showConfirm)

Remove all checked rows.

PARAMETERS
NameTypeDescription

showConfirm

[ boolean ]

If set to true, confirm message will be shown before remove.

RETURNS:
{

boolean

} - True if there's at least one row removed.

removeColumnClassName(columnName, className)

Remove class name to all cell data of specific column.

PARAMETERS
NameTypeDescription

columnName

string

column name to add className

className

string

class name

removeRow(rowKey, options)

Remove the row identified by the specified rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

options

= {}

removeRowClassName(rowKey, className)

Remove the specified css class from all cell elements in the row identified by the rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

className

string

The css class name to be removed

removeTreeRow(rowKey)

Remove the tree row identified by the specified rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

request(requestType, options)

Send request to server to sync data

PARAMETERS
NameTypeDescription

requestType

String

'createData|updateData|deleteData|modifyData'

options

object = {}

Options

PROPERTIES
NameTypeDescription

url

[ String ]

URL to send the request

hasDataParam

boolean = true

Whether the row-data to be included in the request param

checkedOnly

boolean = true

Whether the request param only contains checked rows

modifiedOnly

boolean = true

Whether the request param only contains modified rows

showConfirm

boolean = true

Whether to show confirm dialog before sending request

withCredentials

boolean = false

Use withCredentials flag of XMLHttpRequest for ajax requests if true

resetColumnWidths(widths)

Reset the width of each column by using initial setting of column models.

PARAMETERS
NameTypeDescription

widths

resetData(data)

Replace all rows with the specified list. This will not change the original data.

PARAMETERS
NameTypeDescription

data

Array

A list of new rows

resetOriginData()

reset original data to current data.
(Original data is set by resetData

restore()

Restore the data to the original data.
(Original data is set by resetData

setBodyHeight(bodyHeight)

Set the height of body-area.

PARAMETERS
NameTypeDescription

bodyHeight

number

The number of pixel

setColumnHeaders(columnsMap)

Set columns title

PARAMETERS
NameTypeDescription

columnsMap

Object

columns map to be change

EXAMPLES
{
     columnName1: 'title1',
     columnName2: 'title2',
     columnName3: 'title3'
}

setColumns(columns)

Set the list of column model.

PARAMETERS
NameTypeDescription

columns

Array

A new list of column model

setColumnValues(columnName, columnValue, checkCellState)

Set the all values in the specified column.

PARAMETERS
NameTypeDescription

columnName

string

The name of the column

columnValue

numberstring

The value to be set

checkCellState

boolean = true

If set to true, only editable and not disabled cells will be affected.

setFilter(columnName, filterOpt)

Set the option of column filter.

PARAMETERS
NameTypeDescription

columnName

string

columnName

filterOpt

stringFilterOpt

filter type

setFrozenColumnCount(count)

Set the count of frozen columns.

PARAMETERS
NameTypeDescription

count

number

The count of columns to be frozen

setHeader(options)

Set options for header.

PARAMETERS
NameTypeDescription

options

Object

Options for header

PROPERTIES
NameTypeDescription

height

[ number ]

The height value

complexColumns

[ Array ]

The complex columns info

setHeight(height)

Set the height of the dimension.

PARAMETERS
NameTypeDescription

height

number

The height of the dimension

setPerPage(perPage)

Set number of rows per page and reload current page

PARAMETERS
NameTypeDescription

perPage

number

Number of rows per page

setRow(rowKey, row)

Set new data to the row identified by the specified rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

row

object

The object that contains all values in the row.

setSelectionRange(range)

Select cells or rows by range

PARAMETERS
NameTypeDescription

range

Object

Selection range

PROPERTIES
NameTypeDescription

start

[ Array ]

Index info of start selection (ex: rowIndex, columnIndex)

end

[ Array ]

Index info of end selection (ex: rowIndex, columnIndex)

setSummaryColumnContent(columnName, columnContent)

Set the HTML string of given column summary.
The type of content is the same as the options.summary.columnContent of the constructor.

PARAMETERS
NameTypeDescription

columnName

string

column name

columnContent

stringobject

HTML string or options object.

setValue(rowKey, columnName, value)

Set the value of the cell identified by the specified rowKey and columnName.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

columnName

string

The name of the column

value

numberstring

The value to be set

setWidth(width)

Set the width of the dimension.

PARAMETERS
NameTypeDescription

width

number

The width of the dimension

showColumn(columnName, arguments)

Show columns

PARAMETERS
NameTypeDescription

columnName

arguments

string

Column names to show

sort(columnName, ascending, multiple)

Sort all rows by the specified column.

PARAMETERS
NameTypeDescription

columnName

string

The name of the column to be used to compare the rows

ascending

[ boolean ]

Whether the sort order is ascending.
If not specified, use the negative value of the current order.

multiple

[ boolean ]

Whether using multiple sort

startEditing(rowKey, columnName, setScroll)

Set focus on the cell at the specified index of row and column and starts to edit.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

columnName

string

The name of the column

setScroll

boolean = false

If set to true, the view will scroll to the cell element.

startEditingAt(rowIndex, columnIndex, setScroll)

Set focus on the cell at the specified index of row and column and starts to edit.

PARAMETERS
NameTypeDescription

rowIndex

numberstring

The index of the row

columnIndex

string

The index of the column

setScroll

boolean = false

If set to true, the view will scroll to the cell element.

uncheck(rowKey)

Uncheck the row identified by the specified rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

uncheckAll(allPage)

Uncheck all rows.

PARAMETERS
NameTypeDescription

allPage

[ boolean ]

Uncheck all rows when using pagination. The default value is 'true'.

unfilter(columnName)

Remove filter state of specific column.

PARAMETERS
NameTypeDescription

columnName

string

column name to unfilter

unsort(columnName)

If the parameter exists, unsort only column with columnName. If not exist, unsort all rows

PARAMETERS
NameTypeDescription

columnName

[ string ]

The name of the column to be used to compare the rows

validate()

Validate all data and returns the result.
Return value is an array which contains only rows which have invalid cell data.

RETURNS:
{

Array.<Object>

} - An array of error object
EXAMPLES
// return value example
[
    {
        rowKey: 1,
        errors: [
            {
                columnName: 'c1',
                errorCode: 'REQUIRED'
            },
            {
                columnName: 'c2',
                errorCode: 'REQUIRED'
            }
        ]
    },
    {
        rowKey: 3,
        errors: [
            {
                columnName: 'c2',
                errorCode: 'REQUIRED'
            }
        ]
    }
]

Events

beforeRequest

Occurs before the http request is sent

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

check

Occurs when a checkbox in row header is checked

PROPERTIES
NameTypeDescription

rowKey

numberstring

rowKey of the checked row

instance

Grid

Current grid instance

checkAll

Occurs when a checkbox in header is checked(checked all checkbox in row header)

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

click

Occurs when a mouse button is clicked on the Grid.
The properties of the event object include the native event object.

PROPERTIES
NameTypeDescription

nativeEvent

Event

Event object

targetType

string

Type of event target

rowKey

number

rowKey of the target cell

columnName

string

columnName of the target cell

instance

Grid

Current grid instance

collapse

Occurs when the row having child rows is collapsed

PROPERTIES
NameTypeDescription

rowKey

numberstring

rowKey of the collapsed row

instance

Grid

Current grid instance

dblclick

Occurs when a mouse button is double clicked on the Grid.
The properties of the event object include the native event object.

PROPERTIES
NameTypeDescription

nativeEvent

Event

Event object

targetType

string

Type of event target

rowKey

number

rowKey of the target cell

columnName

string

columnName of the target cell

instance

Grid

Current grid instance

editingFinish

Occurs when editing the cell is finished

PROPERTIES
NameTypeDescription

rowKey

number

rowKey of the target cell

columnName

number

columnName of the target cell

value

numberstringbooleannullundefined

value of the editing cell

instance

Grid

Current grid instance

editingStart

Occurs when editing the cell is started

PROPERTIES
NameTypeDescription

rowKey

number

rowKey of the target cell

columnName

number

columnName of the target cell

value

numberstringbooleannullundefined

value of the editing cell

instance

Grid

Current grid instance

errorResponse

Occurs after the response event, if the response is Error

PROPERTIES
NameTypeDescription

xhr

XmlHttpRequest

XmlHttpRequest

instance

Grid

Current grid instance

expand

Occurs when the row having child rows is expanded

PROPERTIES
NameTypeDescription

rowKey

numberstring

rowKey of the expanded row

instance

Grid

Current grid instance

failResponse

Occurs after the response event, if the result is false

PROPERTIES
NameTypeDescription

xhr

XmlHttpRequest

XmlHttpRequest

instance

Grid

Current grid instance

focusChange

Occurs when focused cell is about to change

PROPERTIES
NameTypeDescription

rowKey

number

rowKey of the target cell

columnName

number

columnName of the target cell

prevRowKey

number

rowKey of the currently focused cell

prevColumnName

number

columnName of the currently focused cell

instance

Grid

Current grid instance

mousedown

Occurs when a mouse button is downed on the Grid.
The event object has all properties copied from the native MouseEvent.

PROPERTIES
NameTypeDescription

nativeEvent

Event

Event object

targetType

string

Type of event target

rowKey

numberstring

rowKey of the target cell

columnName

string

columnName of the target cell

instance

Grid

Current grid instance

mouseout

Occurs when a mouse pointer is moved off from the Grid.
The event object has all properties copied from the native MouseEvent.

PROPERTIES
NameTypeDescription

nativeEvent

Event

Event object

targetType

string

Type of event target

rowKey

numberstring

rowKey of the target cell

columnName

string

columnName of the target cell

instance

Grid

Current grid instance

mouseover

Occurs when a mouse pointer is moved onto the Grid.
The properties of the event object include the native MouseEvent object.

PROPERTIES
NameTypeDescription

nativeEvent

Event

Event object

targetType

string

Type of event target

rowKey

number

rowKey of the target cell

columnName

string

columnName of the target cell

instance

Grid

Current grid instance

onGridBeforeDestroy

Occurs before the grid is detached from DOM

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

onGridMounted

Occurs when the grid is mounted on DOM

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

response

Occurs when the response is received from the server

PROPERTIES
NameTypeDescription

xhr

XmlHttpRequest

XmlHttpRequest

instance

Grid

Current grid instance

successResponse

Occurs after the response event, if the result is true

PROPERTIES
NameTypeDescription

xhr

XmlHttpRequest

XmlHttpRequest

instance

Grid

Current grid instance

uncheck

Occurs when a checkbox in row header is unchecked

PROPERTIES
NameTypeDescription

rowKey

numberstring

rowKey of the unchecked row

instance

Grid

Current grid instance

uncheckAll

Occurs when a checkbox in header is unchecked(unchecked all checkbox in row header)

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

Resizable