POST - Add child organization to a Partner Portal
Purpose
The API creates a new child organization, along with the domain and other details and associates it with the partner portal. Only the users having Partner Admin role can use this API.
Request URL
https://mail.zoho.com/api/organization
Scope
partner.organization
Request Body (JSON Object)
| Parameter | Data Type | Allowed Values | Description |
| domainName* | String | Domain name | The domain of the child organization that needs to be added |
| orgName | String | Organization name | The name of the child organization that needs to be added |
| emailId* | String | Email ID | The contact email address of the child organization owner |
| firstName* | String | First Name | The First Name of the Super Admin of the child organization |
| lastName* | String | Last Name | The Last Name of the Super Admin of the child organization |
| password | String | Password | The password of the Super Admin account of the child organization |
* - Mandatory parameters
Sample Request
The below request adds the domain zylkerchildnew.com to the Partner Portal.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Grid Options
columnHeader
columnHeader will be enabled by default, and by setting it to false, you can disable the columnHeader, and columnHeader will not appear in the grid.
You can also configure the below options for the columnHeader.
Note: If you do not configure the columnHeader options, it will be set to it's default state.
CopiedcolumnHeader : {
height : number,
manualResize : true | false,
readOnly : true | false,
renderOnResize : true | false,
reorderable : true | false
}height
The height of the columnHeader can be adjusted using the height attribute. The minimum and maximum acceptable range is 30 and 100.
| Type | Value | Default |
| number | any number | 30 |
manualResize
Setting manualResize to true allows users to manually resize the column width by using the resize cue. The 'renderOnResize' option can only be utilized when 'manualResize' is set to true.
| Type | Value | Default |
| boolean | true | false | true |
readOnly
Setting readOnly to true will prevent the users from editing the column headers.
| Type | Value | Default |
| boolean | true | false | true |
renderOnResize
By setting renderOnResize to true, the grid will be rendered in the background when the user resizes the column using the resizing cue. When set to false, the grid will be rendered only after the user completes the dragging action. In this case, a 'preview line' will be visible during the dragging operation.
| Type | Value | Default |
| boolean | true | false | true |
reorderable
Setting "reorderable" to true allows users to rearrange columns easily through drag and drop functionality.
| Type | Value | Default |
| boolean | true | false | false |
columnHighlighter
Enabling this feature will cause the entire column to be highlighted when the user hovers the mouse over it.
| Type | Value | Default |
| boolean | true | false | false |
fillSeries
By setting fillseries to true, users can drag the active cell to fill a set of cells. You can refer here to understand the different types of Fillseries.
| Type | Value | Default |
| boolean | true | false | true |
freezeColumnUpTo
Using freezeColumnUpTo, you can freeze the 'n' number of columns starting from the first column while setting up the grid. The number of columns frozen will be visible in the grid even if the user scrolls.
| Type | Value | Default |
| number | Any number | 0 |
freezeRowUpTo
Using freezeRowUpTo, you can freeze the 'n' number of rows starting from the first row while setting up the grid. The number of rows frozen will be visible in the grid even if the user scrolls.
| Type | Value | Default |
| number | any number | 0 |
height
To set the height of the grid.
| Type | Value | Default |
| number | size in pixels | Takes the innerHeight |
plugins
You can enable the plugins that you need while setting up the grid. You can also enable them later using the enable API.
| Param | Type | Value |
| contextMenu | boolean | true | false |
| filter | boolean | true | false |
| pagination | object | boolean | paginationObject | true | false |
| search | object | boolean | searchObject | true | false |
| sort | boolean | true | false |
readOnly
Setting readOnly to true for the grid will prevent the users from performing any actions like insert, delete, and update in the grid.
| Type | Value | Default |
| boolean | true | false | false |
rowHeader
Row Header will be enabled by default, and by setting it to false, you can disable the rowHeader, and it will not appear in the grid.
You can also configure the below options for rowHeader
Note: If you do not configure the rowHeader options, it will be set to it's default state.
CopiedrowHeader : {
label : boolean | function(row : number) : string,
width : number
}label
The rowLabel represents the content shown in the rowHeader. By default, it is enabled, and if you set it to false, the rowHeader will render only the row checkbox. Below are the possible values for the label key:
| Type | Value | Default |
| boolean | true | false | true |
| function | function (row: number) : string | - |
CopiedrowHeader : {
label : boolean | function(row : number) : string
}width
The width of the rowHeader can be adjusted using the width key. The minimum and maximum acceptable range is 30 and 100.
| Type | Value | Default |
| number | any number | 50 |
CopiedrowHeader : {
width : number
}rowHighlighter
Enabling this feature will cause the entire row to be highlighted when the user hovers the mouse over it.
| Type | Value | Default |
| boolean | true | false | false |
rtl
Setting 'rtl' to true will render the grid from right to left.
| Type | Value | Default |
| boolean | true | false | false |
selection
Selection features include row, column, cell, and range selection. When selection is set to false, these features will not work.
| Type | Value | Default |
| boolean | true | false | true |
styles
Using the styles option, you can customize the grid to fit your product ecosystem. There are a set of styles that you can use to customize the grid.
| Style | Type | Default | Value |
| font | string | Puvi | Any font |
| color | string | Black | Any color |
| background | string | white | Any color |
| size | number | 11 (in pt) | Between 7 and 50 |
| bold | boolean | false | true | false |
| italic | boolean | false | true | false |
| underline | boolean | false | true | false |
| overline | boolean | false | true | false |
| strikeThrough | boolean | false | true | false |
| verticalAlign | string | 'middle' | 'top' | 'middle' | 'bottom' |
| horizontalAlign | string | Based on field types | 'left' | 'center' | 'right' |
| padding | object | top : 2, left : 4, right : 4, bottom : 2 | value in pixel |
theme
By default, the grid has a light theme. You can set a different theme, midNightBlue, when you first configure the grid. Even after setting the initial theme, you can change the grid's theme while it is running using the changeTheme API.
| Type | Value | Default |
| string | 'light' | 'midNightBlue' | 'light' |
width
To set the width of the grid.
| Type | Value | Default |
| number | Size in Pixels | Takes the innerWidth |
zoomLevel
Below are the zoom levels supported by DataGrid,
- 50
- 100
- 200
- 300
- 400
You can give any number between the range of 50 and 400. The numbers will be considered in percentages and rounded off to the nearest value from the above mentioned options.
| Type | Value | Default |
| number | Any number within the range | 100 |
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Grid methods
addBufferSpaceInContainerEnds
This API will add the specified additional space at the end of the grid, following the last row and column.
| Param | Type |
| width | number |
| height | number |
Copied<gridInstance>.addBufferSpaceInContainerEnds(width, height);addEventListener
The Grid supports many custom events. You can attach a callback function for these events using this API. Refer to the list of grid events.
Copied<gridInstance>.addEventListener(eventName, callback);blur
This method will remove the focus in the grid.
Copied<gridInstance>.blur();changeTheme
changeTheme API is used to alter your grid's theme. There are two theme options available currently.
- light
- midNightBlue
Copied<gridInstance>.changeTheme(themeName);clearAllCache
This method will clear all the cell caches of the grid.
Copied<gridInstance>.clearAllCache();clearCache
This method will clear the cell cache of a specific range in the grid.
| Param | Type | Value |
| startRow | number | row index of the first cell in the selected range |
| startColumn | number | column index of the first cell in the selected range |
| endRow | number | row index of the last cell in the selected range |
| endColumn | number | column index of the last cell in the selected range |
Copied<gridInstance>.clearCache(startRow, startColumn, endRow, endColumn);clearColumnHeaderCache
This method will clear the cell cache of all the column headers in the grid.
Copied<gridInstance>.clearColumnHeaderCache();clearRange
To clear a specific range of cells based on the provided values.
Param | Type |
startRow | number(index based starts from 0) |
endRow | number(index based starts from 0) |
endColumn | number(index based starts from 0) |
startColumn | number(index based starts from 0) |
Copied<gridInstance>.clearRange(startRow, startColumn, endRow, endColumn);copy
This method will copy a specific range in the grid.
| Param | Type | Value |
| startRow | number | row index of the first cell in the selected range |
| startColumn | number | column index of the first cell in the selected range |
| endRow | number | row index of the last cell in the selected range |
| endColumn | number | column index of the last cell in the selected range |
Copied<gridInstance>.copy(startRow, startColumn, endRow, endColumn);download
To download the entire grid data in the form of a JSON / CSV.
Param | Type | Value |
fileName | string | string |
| format | string | 'CSV' | 'JSON' |
Copied<gridInstance>.download(fileName, format);focus
This method will enable focus on the grid.
Copied<gridInstance>.focus();getViewPort
This method will return to the current visible region of the grid. It returns the viewport range as an array of objects.
| Range values | Type | Value |
| startRow | number | row index of the first cell in the selected range |
| startColumn | number | column index of the first cell in the selected range |
| endRow | number | row index of the last cell in the selected range |
| endColumn | number | column index of the last cell in the selected range |
Note: getViewPort will only include the scrollable region of the grid. It will not have the columns or rows that are frozen.
Copied<gridInstance>.getViewPort();goToCell
This API will set the active cell or move the selection to a specific cell within a grid based on the values provided.
Param | Type |
row | number |
| column | number |
Copied<gridInstance>.goToCell(row, column);goToColumn
This API will set the active column or move the selection to the current row of a specific column within a grid based on the values provided.
Param | Type |
column | number |
Copied<gridInstance>.goToColumn(column);goToRow
This API will set the active row or move the selection to the current column of a specific row within a grid based on the values provided.
Param | Type |
row | number |
Copied<gridInstance>.goToRow(row);isRedoAvailable
To check if redo action is available. Returns true if redo action can be performed and false otherwise.
Return Type | Value |
boolean | true | false |
Copied<gridInstance>.isRedoAvailable();isUndoAvailable
To check if undo action is available. Returns true if undo action can be performed and false otherwise.
Return Type | Value |
boolean | true | false |
Copied<gridInstance>.isUndoAvailable();redo
To redo the user's last action on the grid.
Copied<gridInstance>.redo();refresh
This method will refresh the grid.
Copied<gridInstance>.refresh();removeEventListener
Using this API, you can remove the callback functions attached for any of these events. Refer to the list of grid events.
Copied<gridInstance>.removeEventListener(eventName, callback);reset
reset API will reset the grid to its default state. The grid will be rendered with 10 rows and 5 columns with the default column type as 'text'.
Copied<gridInstance>.reset();resizeTo
This API will resize the grid based on the dimension(width and height) provided. The current dimension will be checked and updated accordingly.
| Param | Type |
| width | number |
| height | number |
Copied<gridInstance>.resizeTo(width, height);scrollBy
scrollBy allows you to scroll by a specified amount relative to its current position.
Param | Type |
dx | number |
dy | number |
Copied<gridInstance>.scrollBy(dx, dy);scrollTo
To scroll from the current position of the grid to the specified (x, y) position.
Param | Type |
x | number |
y | number |
Copied<gridInstance>.scrollTo(x, y);undo
To undo the user's last action on the grid.
Copied<gridInstance>.undo();updateOptions
This API will update the default gridOptions like row header, row/column freezing, etc.
Copied<gridInstance>.updateOptions(gridOptions);updateStyle
This API can be used to update the overall style of the grid.
| Param | Type | Value |
| style | object | styles |
| force(optional) | boolean | true | false |
When force param is set to 'true', all the existing styles will be removed and the style properties provided in the style object will only be applied. Otherwise, the properties provided in the style object will be added to the existing grid style.
Copied<gridInstance>.updateStyle(style, force);zoom
This API will set the zoom level of the grid based on the zoom value you provide. By default, the zoom level is set to 100%. The zoom level should be provided in the range of 50,100,200,300,400.
| Param | Type |
| Zoomlevel | number |
Copied<gridInstance>.zoom(Zoomlevel);Grid Events
Zoho DataGrid offers the following events to which you can attach an evenlistener a
| Event Name |
| mousedown |
| mousemove |
| mouseleave |
| viewportChange |
| rowHoverChange |
| columnHoverChange |
| cellHoverChange |
| doubleClick |
| scroll |
mousemove
When a mousemove event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| event | Mouse event | object |
| row | index of the current row | number |
| column | index of the current column | number |
| cell dimension | {x - absolute x position, y - absolute y position, width - width, height - height} | object |
| type | 'cell' | 'columnHeader' | 'rowHeader' | 'selectAll' | string |
mousedown
When mousedown event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| event | Mouse event | object |
| row | index of the current row | number |
| column | index of the current column | number |
| cell dimension | {x - absolute x position, y - absolute y position, width - width, height - height} | object |
| type | 'cell' | 'columnHeader' | 'rowHeader' | 'selectAll' | string |
mouseleave
When mouseleave event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| event | Mouse event | object |
viewportChange
When the currently visible viewport of the grid changes, the attached callback function will be executed.
| Param | Description | Type |
| range | [{startRow : number, startColumn : number, endRow : number, endColumn : number}] | [ ] object |
rowHoverChange
When rowHoverChange event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| event | Mouse event | object |
| row | index of the current row | number |
| column | index of the current column | number |
| cell dimension | {x - absolute x position, y - absolute y position, width - width, height - height} | object |
| type | 'cell' | 'columnHeader' | 'rowHeader' | 'selectAll' | string |
columnHoverChange
When columnHoverChange event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| event | Mouse event | object |
| row | index of the current row | number |
| column | index of the current column | number |
| cell dimension | {x - absolute x position, y - absolute y position, width - width, height - height} | object |
| type | 'cell' | 'columnHeader' | 'rowHeader' | 'selectAll' | string |
cellHoverChange
When cellHoverChange event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| event | Mouse event | object |
| row | index of the current row | number |
| column | index of the current column | number |
| cell dimension | {x - absolute x position, y - absolute y position, width - width, height - height} | object |
| type | 'cell' | 'columnHeader' | 'rowHeader' | 'selectAll' | string |
doubleClick
When doubleClick event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| event | Mouse event | object |
| row | index of the current row | number |
| column | index of the current column | number |
| cell dimension | {x - absolute x position, y - absolute y position, width - width, height - height} | object |
| type | 'cell' | 'columnHeader' | 'rowHeader' | 'selectAll' | string |
scroll
When scroll event occurs in the grid, the attached callback function will be executed.
| Param | Description | Type |
| scroll left | Number of pixels content is scrolled from its left edge | number |
| scroll top | Number of pixels content is scroleed from its top edge | number |
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Table of contents
- addBufferSpaceInContainerEnds
- addEventListener
- blur
- changeTheme
- clearAllCache
- clearCache
- clearColumnHeaderCache
- clearRange
- copy
- download
- focus
- getViewPort
- goToCell
- goToColumn
- goToRow
- isRedoAvailable
- isUndoAvailable
- redo
- refresh
- removeEventListener
- reset
- resizeTo
- scrollBy
- scrollTo
- undo
- updateOptions
- updateStyle
- zoom
- Grid Events
- mousemove
- mousedown
- mouseleave
- viewportChange
- rowHoverCange
- columnHoverChange
- cellHoverChange
- doubleClick
- scroll
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Row
addRow
This API will insert an 'n' number of rows after the last row in the grid. If no parameter is passed, a single row will be inserted at the end by default.
| Param | Type | Default |
| count(optional) | number | 1 |
Copied<gridInstance>.addRow(count);appendRow
To append one or 'n' number of rows in the grid. Multiple rows can be appended by providing multiple data sets in the object.
| Param | Key | Type |
| rowObject | row | number |
| datas | string [][] | |
| rowHeights | number | number [] |
Note: By default, the new row will be added at the end of the grid after the last row.
Copied<gridInstance>.appendRow(rowObject);copyRow
To copy the content of one or a continuous set of rows. If no value is provided for endRow, only the row specified by the startRow parameter will be copied.
Param | Type |
startRow | number |
endRow (optional) | number |
Note: The value provided in the startRow should be less than or equal to that provided in the endRow.
Copied<gridInstance>.copyRow(startRow, endRow);copyRows
To copy a set of rows that are not adjacent to each other.
Param | Type |
rows | number[ ] |
Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.
Copied<gridInstance>.copyRows(rows);getRowCount
This API will return the number of rows in the grid.
ReturnType: number
Copied<gridInstance>.getRowCount();insertRowAbove
This API will insert the required rows above the mentioned row based on the values you provide. A row will be inserted by default if the second parameter is not provided.
| Param | Type |
| row | number(index based - starts from 0) |
| count(optional) | number |
Copied<gridInstance>.insertRowAbove(row, count);insertRowBelow
This API will insert the required number of rows below the mentioned row based on the values you provide. A single row will be inserted by default if the second parameter is not provided.
| Param | Type |
| row | number(index based - starts from 0) |
| count(optional) | number |
Copied<gridInstance>.insertRowBelow(row, count);lockRow
To lock one or a continuous set of rows. If no value is provided for endRow, only the row specified by the startRow parameter will be locked.
Param | Type |
startRow | number |
endRow (optional) | number |
Note: The value provided in the startRow should be less than or equal to that provided in the endRow.
Copied<gridInstance>.lockRow(startRow, endRow);lockRows
To lock a set of rows that are not adjacent to each other.
Param | Type |
rows | number [ ] |
Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.
Copied<gridInstance>.lockRows(rows);removeRow
To remove one or a continuous range of rows from the grid. If no value is provided for endRow, only the row specified by the startRow parameter will be removed.
Param | Type |
startRow | number |
endRow (optional) | number |
Note: The value provided in the startRow should be less than or equal to that provided in the endRow.
Copied<gridInstance>.removeRow(startRow, endRow);removeRows
To remove a set of rows that are not adjacent to each other.
Param | Type |
rows | number[ ] |
Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.
Copied<gridInstance>.removeRows(rows);resetRow : server
resetRow API will clear the row axis cache in the grid.
Copied<gridInstance>.resetRow();setAllRowHeightAs
setAllRowHeightAs will reset the height of entire rows to the value provided.
| Param | Type |
| height | number |
Note: Minimum row height that can be set - 30 px
Maximum row height that can be set - 100 px
Copied<gridInstance>.setAllRowHeightAs(height);setRowHeight
setRowHeight is to set the height of a particular Row.
| Param | Type |
| row | number(index based - starts from 0) |
| height | number |
Note: Minimum row height that can be set - 30 px
Maximum row height that can be set - 100 px
Copied<gridInstance>.setRowHeight(row, height);unlockRow
To unlock one or a continuous set of locked rows. If no value is provided for endRow, only the row specified by the startRow parameter will be unlocked.
Param | Type |
startRow | number |
endRow (optional) | number |
Note: The value provided in the startRow should be less than or equal to that provided in the endRow.
Copied<gridInstance>.unlockRow(startRow, endRow);unlockRows
To unlock the locked rows that are not adjacent to each other.
Param | Type |
rows | number [ ] |
Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.
Copied<gridInstance>.unlockRows(rows);© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Column
addColumn
This API will insert the 'n' number of columns after the last column in the grid. If no parameter is passed, a single column will be inserted at the end by default.
| Param | Type | Default |
| count (optional) | number | 1 |
| columnObject (optional) | object(object) | { 'type' : 'text' } |
| Param | Object key | Type |
| columnObject | type (optional) | string |
| styles (optional) | object | |
| properties (optional) | object |
Note: If the columnObject is not passed, by default, a column with a text field will be added/inserted.
Copied<gridInstance>.addColumn(count, columnObject);copyColumn
To copy the content of one or a continuous set of columns. If no value is provided for endColumn, only the column specified by the startColumn parameter will be copied.
Param | Type |
startColumn | number |
endColumn (optional) | number |
Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.
Copied<gridInstance>.copyColumn(startColumn, endColumn);copyColumns
To copy a set of columns that are not adjacent to each other.
Param | Type |
columns | number[ ] |
Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.
Copied<gridInstance>.copyColumns(columns);getColumnCount
This API will return the number of columns in the grid.
ReturnType: number
Copied<gridInstance>.getColumnCount();insertColumnAfter
This API will insert the required number of columns after the mentioned column. If the second parameter is not provided, a single column will be inserted by default.
| Param | Type | Default |
| column | number(index based - starts from 0) | - |
| count (optional) | number | 1 |
| columnProperties (optional) | object | object [] | { 'type' : 'text' } |
Note: If the columnProperties is not passed, by default, a column with a text field will be inserted.
Copied<gridInstance>.insertColumnAfter(column, count, columnProperties);insertColumnBefore
This API will insert the required columns before the mentioned column. A single column will be inserted by default if the second parameter is not provided.
| Param | Type | Default |
| column | number(index based - starts from 0) | - |
| count(optional) | number | 1 |
| columnProperties (optional) | object | object [] | { 'type' : 'text' } |
Note: If the columnProperties is not passed, by default, a column with a text field will be inserted.
Copied<gridInstance>.insertColumnBefore(column, count, columnProperties);lockColumn
To lock one or a continuous set of columns. If no value is provided for endColumn, only the column specified by the startColumn parameter will be locked.
Param | Type |
startColumn | number |
endColumn (optional) | number |
Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.
Copied<gridInstance>.lockColumn(startColumn, endColumn);lockColumns
To lock a set of columns that are not adjacent to each other.
Param | Type |
columns | number[ ] |
Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.
Copied<gridInstance>.lockColumns(columns);removeColumn
To remove one or a continuous range of columns from the grid. If no value is provided for endColumn, only the column specified by the startColumn parameter will be removed.
Param | Type |
startColumn | number |
endColumn (optional) | number |
Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.
Copied<gridInstance>.removeColumn(startColumn, endColumn);removeColumns
To remove a set of columns that are not adjacent to each other.
Param | Type |
columns | number[ ] |
Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.
Copied<gridInstance>.removeColumns(columns);resetColumn: server
resetColumn API will clear the column axis cache in the grid.
Copied<gridInstance>.resetColumn();setAllColumnWidthAs
setAllColumnWidthAs will reset the width of entire columns to the value provided.
| Param | Type |
| width | number |
Note: Minimum column width that can be set - 80 px
Maximum column width that can be set - 500 px
Copied<gridInstance>.setAllColumnWidthAs(width);setColumnWidth
setColumnWidth API is to set the width of a particular column.
| Param | Type |
| column | number(index based - starts from 0) |
| width | number |
Note: Minimum column width that can be set - 80 px
Maximum column width that can be set - 500 px
Copied<gridInstance>.setColumnWidth(column, width);unlockColumn
To unlock one or a continuous set of locked columns. If no value is provided for endColumn, only the column specified by the startColumn parameter will be unlocked.
Param | Type |
startColumn | number |
endColumn (optional) | number |
Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.
Copied<gridInstance>.unlockColumn(startColumn, endColumn);unlockColumns
To unlock the locked columns that are not adjacent to each other.
Param | Type |
columns | number [ ] |
Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.
Copied<gridInstance>.unlockColumns(columns);updateColumnHeaderStyles
This API will update the columnHeader Styles based on the properties you provide.
| Param | Type |
| column | number(index based - starts from 0) |
| styles | object |
Copied<gridInstance>.updateColumnHeaderStyles(column, styles);updateColumnProperties
This API will update the column properties of a particular column.
| Param | Type |
| column | number(index based - starts from 0) |
| properties | object |
Copied<gridInstance>.updateColumnProperties(column, properties);updateColumnStyles
This API will update the column styles based on the properties you provide.
| Param | Type |
| column | number(index based - starts from 0) |
| styles | object |
Copied<gridInstance>.updateColumnStyles(column, styles);© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Client-Side
There is a certain structure you have to follow to load the data in your grid. The structure is explained in detail below.
Structure
Copiedconst Data = {
data : string[][],
columnHeaders: string[],
columns : JSONObject[],
columnwidths : number | number[],
rowHeights : number | number[]
}Note: The columnHeaders, columns, columnWidths, and rowHeights are optional properties. The grid will be rendered with the default configurations if you do not pass them.
Column Header
The Column Header data should be in the 2D array format with the type 'string.'
CopiedcolumnHeaders : [] StringColumn
Provide an array of JSON objects just like the structure mentioned below.
Copied[
{
type,
styles,
properties,
source,
autoFit,
renderer,
validator
}
]| Param | Type |
| type | string |
| styles | object |
| properties | object |
| source | string[ ] |
| renderer | function |
| autoFit | number |
| validator | function |
Column Type:
Column Type should be String representation.
| ColumnType | Value | DataFormat |
| Text | text | Text |
| Numeric | number | Number |
| Currency | currency | Number |
| Percent | percent | Number |
| Date&Time | dateTime | Timestamp |
| Checkbox | checkbox | Boolean |
| Rating | rating | Number |
| Phone Number | phoneNumber | String |
| String | ||
| URL | url | String |
| Dotchart | dotChart | Number |
| Dropdown | dropDown | String |
| Auto Complete | autoComplete | String |
| Multi Select | multiSelect | Array |
| Custom Dom | custom | String | Number |
Column Style:
Column Style should be of String representation. You can modify the look of the columns using the styles.
| Style | Default values | Details |
| fontFamily | Roboto | Webfont, Mono Space font, which we suggest using for better clarity on Numbers. |
| color | Black | To match with a white background |
| background | white | To match with black font color |
| size | 11 | Decent size for the data types |
| bold | false | Bolder in size for highlight |
| italic | false | Stylish for highlight |
| underline | false | Stylish for highlight |
| overline | false | Stylish for highlight |
| strikeThrough | false | Stylish for highlight |
| verticalAlign | 'middle' | 'top' | 'middle' | 'bottom' |
| horizontalAlign | Based on field types | 'left' | 'center' | 'right' |
| ColumnType | Properties |
| Text | format : 'none' | 'initialCaps' | 'uppercase' | 'lowercase' | 'sentenceCase' |
| Numeric | precision: precision value, thousandSeparator : true | false |
| Currency | symbol: '$', symbolPosition : 0 | 1 | 2 | 3, //this value will be changed soon precision: precision value, thousandSeparator : true | false |
| Percent | precision: 2, showSymbol: true|false, thousandSeparator: true|false, fromDecimal : true|false, |
| Date&Time | time: true | false, dateFormat : DATE_FORMATS, timeFormat: TIME_FORMATS, hourCycle : '12H' | '24H' |
| Checkbox | color: 'any color' |
| Rating | color: 'any color,' maxCount: maxCount |
| Phone Number | format: PHONE_NUMBER_FORMATS |
| Dotchart | lowColor : 'any color,' highColor : 'any color,' benchMark : benchMarkValue(number), maxCount: count |
Property Formats:
| DATE FORMATS |
|---|
| 'DD/MM/YYYY' |
| 'YYYY/MM/DD' |
| 'Montd D, YYYY' |
| 'M/D/YYYY' |
| 'D/M/YYYY' |
| 'YYYY/M/D' |
| 'MMDDYYYY' |
| 'DDMMYYYY' |
| 'YYYYMMDD' |
| 'MonDDYYYY' |
| 'DDMonYYYY' |
| 'YYYYMonDD' |
| 'D Montd, YYYY' |
| 'YYYY, Montd D' |
| 'Mon-DD-YYYY' |
| 'DD-Mon-YYYY' |
| 'YYYY-Mon-DD' |
| 'Mon DD, YYYY' |
| 'DD Mon, YYYY' |
| 'YYYY, Mon DD' |
| 'bM/bD/YYYY' |
| 'bD/bM/YYYY' |
| 'YYYY/bM/bD' |
| 'q Q YY' |
| 'q Q YYYY' |
| 'MMM YY' |
| 'MMM YYYY' |
| 'WW WK YY' |
| 'WW WK YYYY' |
| TIME FORMATS |
|---|
| 'HH:MM:SS' |
| 'HH:MM' |
| 'HH' |
| 'HH:MM:SS timeZone' |
| 'HH:MM timeZone' |
| 'HH timeZone' |
| 'HH:MM:SS TZN' |
| 'HH:MM TZN' |
| 'HH TZN' |
| PHONENUMBER FORMATS |
|---|
| '+xx xxxxx xxxxx' |
| '+xx-xxxxx-xxxxx' |
| '+xx xxx xxx xxxx' |
| '+xx-xxx-xxx-xxxx' |
| 'xxxxx xxxxx' |
| 'xxxxx-xxxxx' |
| 'xxx xxx xxxx' |
| 'xxx-xxx-xxxx' |
| 'xxx xxx-xxxx' |
| '(xxx) xxx-xxxx' |
| 'xxxxxxxxxx |
Custom Field properties:
Apart from the above, the renderer() function can be used for the custom fields you design for your grid—and the validator() function to add your custom validations to the required field types.
Column Width
The column width can be configured by providing a single number or an array of numbers.
CopiedcolumnWidths : number | number[] | stringExample
Note: Default value: 100px
Copied/* Set an unique column width for all columns */
columnWidths: 200
/* Set different column width */
columnWidths: [100, 200,300, 150]
/* Set an autofit column width for all columns */
columnWidths: 'auto'
Note: Zero('0') will set the default widthRow Height
The row height can be made by providing a single number or an array of numbers.
CopiedrowHeights : Number | []NumberExample:
Note: Default value: 30px
Copied/* Set an unique row height for all columns */
rowHeights: 30
/* Set different row height */
rowHeights: [30, 40, 20, 50]
Note: Zero('0') will set the default height© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Server-Side
DataGrid provides a set of APIs to bind the Server-Side Data to the Grid. This partial data rendering method has many advantages.
- Partial data rendering enables dynamic data loading, where additional data is loaded and rendered as the user scrolls through the Grid or performs other actions rather than loading all the data simultaneously.
- Loading and rendering a large amount of data in a data grid can be slow and resource-intensive, mainly if the data contains many columns or rows. Partial data rendering can improve performance by loading and rendering only the currently visible data on the screen rather than the entire dataset.
- Loading and rendering only a subset of the data in the Grid can reduce memory usage, which can be particularly important in applications with limited resources.
- DataGrid provides an abstract class that can bind the data with the Grid.
Copied<div id="gridContainer"></div>Copiedconst container = document.querySelector('#gridContainer');
const configuration = {
width: 500,
height: 500
}
const grid = new window.DataGrid.Server(container, configuration);
// all methods of DataProvider are optional
class dataProvider extends DataGrid.DataProvider {
getCellData(row, col) {
return `${row}, ${col}`
}
getMaxRow() {
return 100;
}
getMaxColumn() {
return 100;
}
}
grid.renderData(new dataProvider());getCellData
The data provided in this API will be rendered in the grid to the respective row and column.
Return Type: String
| Param | Type |
| row(index based) | number |
| column(index based) | number |
getColumnLabel
The data provided in this API will be rendered as the column header to the respective column.
ReturnType: String
| Param | Type |
| column(index based) | number |
getColumnWidth
The value provided in this API will be used as the column width for the respective column.
ReturnType: number
| Param | Type |
| column(index based) | number |
getRowHeight
The value provided in this API will be used as the row height for the respective row.
ReturnType: number
| Param | Type |
| row(index based) | number |
getMaxRow
The value provided in this API will be considered as the total number of rows to be rendered in the grid.
ReturnType: number
| Param | Type |
| row(index based) | number |
getMaxColumn
The value provided in this API will be considered as the total number of columns to be rendered in the grid.
ReturnType: number
| Param | Type |
| column(index based) | number |
getColumnProperty
The column object provided in this API will be used to render the styles and properties. of a particular column.
ReturnType: Array of objects
| Param | Type |
| column(index based) | number |
getColumnHeaderProps
The object provided in this API will be used to render the styles for a particular column header.
ReturnType: object{styles}
| Param | Type |
| column(index based) | number |
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Plugins
enable
You can easily enable plugins using the enablePlugin API.
| Param | Type | Value |
| pluginName | string | 'pagination' | 'search' | 'sort' | 'filter' | 'contextMenu' |
| options (optional) | object | properties |
Copied<gridInstance>.plugins.enable(pluginName, options)disable
You can easily disable plugins using the disablePlugin API.
| Param | Type | Value |
| pluginName | string | 'pagination' | 'search' | 'sort' | 'filter' | 'contextMenu' |
Copied<gridInstance>.plugins.disable(pluginName)update
You can easily update plugins using the updatePlugin API.
| Param | Type | Value |
| pluginName | string | 'pagination' | 'search' | 'sort' | 'filter' | 'contextMenu' |
| options (optional) | object | properties |
Copied<gridInstance>.plugins.update(pluginName, options)A set of properties comes along with each plugin. These properties help you to configure the plugins as you wish.
Note: Properties are optional and can be provided if required.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Properties
Pagination
This plugin provides functionality to break down an extensive data set into smaller pieces and display them in a grid format with navigation controls that allow the user to move between different data pages.
| Properties | Type | Default | Description |
|---|---|---|---|
| style | string | style1 | To choose from style1, style2, style3, style4 |
| rowsPerPageOptions | [ ] number | [5, 10, 25, 50, 100, 250] | Number of rows in array. Will be present as the options in the dropdown menu in pagination. |
| rowsPerPage | number | 25 | Number of rows per page in default. |
| suppressUI | boolean | false |
Search
| Properties | Type | Default | Description |
|---|---|---|---|
| suppressUI | boolean | false |
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Events
The hooks feature will add a listener to a particular hook name to the grid. It can be used for executing custom methods based on your requirements.
dataUpdate
This hook will be fired when a cell's data is being updated.
| Param | Type | Description |
|---|---|---|
| row | number | row index of the updated cell |
| column | number | column index of the updated cell |
| content | string | content that has been updated |
Copied<gridInstance>.onBefore('dataUpdate',()=>{
console.log("dataUpdate onBefore");
return true;
});
<gridInstance>.onAfter('dataUpdate',()=>{
console.log("dataUpdate onAfter");
});dataDelete
This hook will be fired when a cell's content is deleted.
| Param | Type | Description |
|---|---|---|
| start row | number | row index of the first cell in the selected range |
| start column | number | column index of the first cell in the selected range |
| end row | number | row index of the last cell in the selected range |
| end column | number | column index of the previous cell in the selected range |
Copied<gridInstance>.onBefore('dataDelete',()=>{
console.log("cell data delete onBefore");
return true;
});
<gridInstance>.onAfter('dataDelete',()=>{
console.log("cell data delete onAfter");
});dataPaste
This hook will be fired when content is pasted.
| Param | Type | Description |
|---|---|---|
| start row | number | row index of the first cell in the selected range |
| start col | number | column index of the first cell in the selected range |
| content | array | content that has been pasted |
Copied<gridInstance>.onBefore('dataPaste',()=>{
console.log("data paste onBefore");
return true;
});
<gridInstance>.onAfter('dataPaste',()=>{
console.log("data paste onAfter");
});dataCopy
This hook will be fired when content is copied.
| Param | Type | Description |
|---|---|---|
| startRow | number | row index of the first cell in the selected range |
| startColumn | number | column index of the first cell in the selected range |
| endRow | number | row index of the last cell in the selected range |
| endColumn | number | column index of the last cell in the selected range |
Copied<gridInstance>.onBefore('dataCopy',()=>{
console.log("data copy onBefore");
return true;
});
<gridInstance>.onAfter('dataCopy',()=>{
console.log("data copy onAfter");
});dataCut
This hook will be fired when content is cut.
| Param | Type | Description |
|---|---|---|
| start row | number | row index of the first cell in the selected range |
| start column | number | column index of the first cell in the selected range |
| end row | number | row index of the last cell in the selected range |
| end column | number | column index of the last cell in the selected range |
Copied<gridInstance>.onBefore('dataCut',()=>{
console.log("data cut onBefore");
return true;
});
<gridInstance>.onAfter('dataCut',()=>{
console.log("data cut onAfter");
});columnInsertBefore
This hook will be fired when columns are inserted before the current column.
| Param | Type | Description |
|---|---|---|
| column | number | Column index of the selected column in the selected range |
| count | number | Number of columns inserted |
| column props | object | object |
Copied<gridInstance>.onBefore('columnInsertBefore',()=>{
console.log("columnInsertBefore initiated");
return true;
});
<gridInstance>.onAfter('columnInsertBefore',()=>{
console.log("columnInsertBefore done");
});
columnInsertAfter
This hook will be fired when columns are inserted after the current column.
| Param | Type | Description |
|---|---|---|
| column | number | Column index of the selected column in the selected range |
| count | number | Number of columns inserted |
| column props | object | object |
Copied<gridInstance>.onBefore('columnInsertAfter',()=>{
console.log("columnInsertAfter initiated");
return true;
});
<gridInstance>.onAfter('columnInsertAfter',()=>{
console.log("columnInsertAfter done");
});
rowInsertAbove
This hook will be fired when a row is inserted above the current row.
| Param | Type | Description |
|---|---|---|
| row | number | index of the row selected |
| count | number | number of rows inserted |
Copied<gridInstance>.onBefore('rowInsertAbove',()=>{
console.log("rowInsertAbove initiated");
return true;
});
<gridInstance>.onAfter('rowInsertAbove',()=>{
console.log("rowInsertAbove done");
});
rowInsertBelow
This hook will be fired when a row is inserted below the current row.
| Param | Type | Description |
|---|---|---|
| row | number | row index of the row selected |
| count | number | number of rows inserted |
Copied<gridInstance>.onBefore('rowInsertBelow', ()=>{
console.log("rowInsertBelow initiated");
return true;
});
<gridInstance>.onAfter('rowInsertBelow', ()=>{
console.log("rowInsertBelow done");
});columnAutoFit
This hook will be fired when autoFit functionality is triggered.
| Param | Type | Description |
|---|---|---|
| column | number | column index of the selected column |
Copied<gridInstance>.onBefore('columnAutoFit', ()=>{
console.log("columnAutoFit initiated");
return true;
});
<gridInstance>.onAfter('columnAutoFit', ()=>{
console.log("columnAutoFit done");
});columnDelete
This hook will be fired when a column is deleted from your grid.
| Param | Type | Description |
|---|---|---|
| column | number | column index of the selected column |
Copied<gridInstance>.onBefore('columnDelete', ()=>{
console.log("columnDelete initiated");
return true;
});
<gridInstance>.onAfter('columnDelete', ()=>{
console.log("columnDelete done");
});rowDelete
This hook will be fired when a row is deleted from your grid.
| Param | Type | Description |
|---|---|---|
| row | number | row index of the deleted row |
Copied<gridInstance>.onBefore('rowDelete', ()=>{
console.log("rowDelete initiated");
return true;
});
<gridInstance>.onAfter('rowDelete', ()=>{
console.log("rowDelete done");
});columnHeaderDataUpdate
This hook will be fired when the data in the column header gets updated.
| Param | Type | Description |
|---|---|---|
| column | number | column index of the cell that is being updated |
| content | string | content that is updated to the cell |
Copied<gridInstance>.onBefore('columnHeaderDataUpdate',()=>{
console.log("columnHeaderDataUpdate initiated");
return true;
});
<gridInstance>.onAfter('columnHeaderDataUpdate',()=>{
console.log("columnHeaderDataUpdate done");
});columnWidthChange
This hook will be fired when the width of the column is changed.
| Param | Type | Description |
|---|---|---|
| column | number | column index of the selected column |
| width | number | updated width in pixels |
Copied<gridInstance>.onBefore('columnWidthChange', ()=>{
console.log("columnWidthChange initiated");
return true;
});
<gridInstance>.onAfter('columnWidthChange', ()=>{
console.log("columnWidthChange done");
});lockColumn
This hook will be fired when a column is locked.
| Param | Type | Description |
|---|---|---|
| start column | number | index of the start column |
| end column | number | index of the end column |
Copied<gridInstance>.onBefore('lockColumn', ()=>{
console.log("lockColumn initiated");
return true;
});
<gridInstace>.onAfter('lockColumn',()=>{
console.log("lockColumn done");
});unlockColumn
This hook will be fired when a column is unlocked.
| Param | Type | Description |
|---|---|---|
| start column | number | index of the start column |
| end column | number | index of the end column |
Copied<gridInstance>.onBefore('unlockColumn',()=>{
console.log("unlockColumn initiated");
return true;
});
<gridInstance>.onAfter('unlockColumn',()=>{
console.log("unlockColumn done");
});lockRow
This hook will be fired when a row is locked.
| Param | Type | Description |
|---|---|---|
| start row | number | index of the start row |
| end row | number | index of the end row |
Copied<gridInstance>.onBefore('unlockColumn',()=>{
console.log("unlockColumn initiated");
return true;
});
<gridInstance>.onAfter('unlockColumn',()=>{
console.log("unlockColumn done");
});unlockRow
This hook will be fired when a row is unlocked.
| Param | Type | Description |
|---|---|---|
| start row | number | index of the start row |
| end row | number | index of the end row |
Copied<gridInstance>.onBefore('lockRow',()=>{
console.log("lockRow initiated");
return true;
});
<gridInstance>.onAfter('lockRow',()=>{
console.log("lockRow done");
});columnReorder
This hook will be fired when a column is moved from one position to another.
| Param | Type | Description |
|---|---|---|
| source column | number | index of source column |
| target column | number | index of target column |
Copied<gridInstance>.onBefore('columnReorder',()=>{
console.log("columnReorder initiated");
return true;
});
<gridInstance>.onAfter('columnReorder',()=>{
console.log("columnReorder done");
});undo
This hook will be fired when undo operation is triggered.
Copied<gridInstance>.onBefore('columnReorder',()=>{
console.log("columnReorder initiated");
return true;
});
<gridInstance>.onAfter('columnReorder',()=>{
console.log("columnReorder done");
});redo
This hook will be fired when redo operation is triggered.
Copied<gridInstance>.onBefore('undo',()=>{
console.log("undo initiated");
return true;
});
<gridInstance>.onAfter('undo',()=>{
console.log("undo done");
});fillSeries
| Param | type | Description |
| start Row | number | row index of the first cell in the selected range |
| start Column | number | column index of the first cell in the selected range |
| end Row | number | row index of the last cell in the selected range |
| end Column | number | column index of the last cell in the selected range |
Copied<gridInstance>.onBefore('redo',()=>{
console.log("redo initiated");
return true;
});
<gridInstance>.onAfter('redo',()=>{
console.log("redo done");
});pageChange
| Param | type | Description |
| pageNumber | number |
Copied<gridInstance>.onBefore('fillSeries',()=>{
console.log("fillSeries initiated");
return true;
});
<gridInstance>.onAfter('fillSeries',()=>{
console.log("fillSeries done");
});pageSizeChange
| Param | type | Description |
| pageNumber | number |
Copied<gridInstance>.onBefore('pageChange',()=>{
console.log("pageChange initiated");
return true;
});
<gridInstance>.onAfter('pageChange',()=>{
console.log("pageChange done");
});copyRow
| Param | type | Description |
| start Row | number | index of the start row |
| end Row | number | index of the end row |
Copied<gridInstance>.onBefore('pageSizeChange',()=>{
console.log("pageSizeChange initiated");
return true;
});
<gridInstance>.onAfter('pageSizeChange',()=>{
console.log("pageSizeChange done");
});copyColumn
| Param | type | Description |
| start column | number | index of the start column |
| end column | number | index of the end column |
Copied<gridInstance>.onBefore('copyRow',()=>{
console.log("copyRow initiated");
return true;
});
<gridInstance>.onAfter('copyRow',()=>{
console.log("copyRow done");
});© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Table of contents
Methods
onAfter
The registered callback will be fired after the hook action is executed.
| Parameter | Type | Description |
|---|---|---|
| hookName | String | Register the callback to be executed before the provided hook actions. |
| callback | Function | Register the callback to be executed before the provided hook actions. |
Copied<gridInstance>.onBefore(hookName, callback);onBefore
The registered callback will be fired before the hook action is executed. The registered method should return either true or false. If true, further grid actions will be performed. If false, different Grid actions won't happen.
Note: Hook action will be executed only if the return value is true.
| Param | Type | Description |
|---|---|---|
| hookName | String | Register the callback to be executed before the provided hook actions. |
| callback | Function | Register the callback to be executed before the provided hook actions. |
Copied<gridInstance>.onBefore(hookName, callback);© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Overview
Welcome to Zoho DataGrid!
DataGrid is a lightweight JavaScript data grid component that helps you present your data in a grid with the familiar spreadsheet feel. The uniqueness of DataGrid is that it utilizes Canvas - HTML5 element for faster rendering, flexible structuring, and improved performance.
DataGrid offers basic grid operations to powerful functionalities such as Search, Sort, Filter, and more.
Zoho DataGrid - Aimed, Intended, and Built for Developers!
Where can I use DataGrid?
Zoho DataGrid is a versatile grid component designed to display and manage tabular data in a user-friendly manner efficiently. It can create customizable grids with sorting, filtering, pagination, and other advanced features, making it ideal for displaying large datasets and handling complex data interactions.
What are the different use cases solved by DataGrid?
DataGrid's impressive array of features and limitless customizations make it a perfect fit for every industry and software out there!
Financial Applications: DataGrid is well-suited for financial applications that require displaying and analyzing large amounts of financial data, such as stock market analytics or portfolio management systems.
Enterprise Resource Planning (ERP) Systems: It can be used in ERP systems to manage efficiently and manipulate data tables, such as inventory management, sales order processing, or production planning.
Data Analytics and Reporting: DataGrid provides a solid foundation for data analysis and reporting applications, enabling users to manipulate, visualize, and export data in various formats.
Note: The examples listed above are just the tip of the iceberg, as DataGrid's versatile potential spans across countless industries.
Professional Support:
If you need help implementing DataGrid, contact us at support@zohodatagrid.com anytime. By purchasing our commercial license, you will also have premium support activated for one year.
Compatibility:
Check out the complete browser compatibility details here.
Version and Release Information:
Current Version: Beta Version 1.2
Release Date: 4th October 2023
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Installation
Step 1: Include Files
a) To import the complete distribution of DataGrid as a minified JavaScript file from the CDN, include the following JS file using the script tag, use the code snippet below.
Copied<script type="text/javascript" src="https://static.zohocdn.com/datagrid/v1_beta_2/grid.min.js"></script>b) To include the following CSS file using the link tag, use the code snippet below.
Copied<link rel="stylesheet" type="text/css" href="https://static.zohocdn.com/datagrid/v1_beta_2/grid.min.css">Download files
To use DataGrid in your application, download the zip file from the following URL and include its JS and CSS files in your project.
Download here:https://static.zohocdn.com/datagrid/v1_beta_2/grid.zip
Step 2: Create Container
You can specify an HTML container to render the grid, but if you don't provide one, the grid will be rendered within the body container by default.
Copied<div id="gridContainer"></div>Step 3: Creating the Grid
Instantiate the grid object as shown in the code snippet below.
Refer to this documentation for more details on the gridObject.
Copiedconst container = document.querySelector('#gridContainer');
const data = [
["8403", "John", "john@zylker.com" ,"5"],
["15256", "Ram", "ram@zylker.com" ,"4"],
["14058", "Priya", "priya.sr@zylker.com" ,"4"]
];
const options = {
width: innerWidth,
height: innerHeight,
};
const gridObject = {
options,
licenseKey: 'non-commercial',
data: data,
}
const grid = new DataGrid(container, gridObject);Show full
Show less
Note: The licenseKey configuration option is mandatory. Refer to this document to know how licenseKey works.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Data Binding
Client-Side
Provide your data to DataGrid as a 2D array /Json of strings. This way, DataGrid will handle your data entirely.
When we say client-side data binding, we mean that DataGrid binds your data source based on values rather than references.
Refer here for more client-side data settings.
Example:
Copiedconst data = [
["8403", "John", "john@zylker.com" ,"5"],
["15256", "Ram", "ram@zylker.com" ,"4"],
["14058", "Priya", "priya.sr@zylker.com" ,"4"]
];
const gridObject = {
licenseKey: 'non-commercial',
data: data
}
const grid = new DataGrid(document.body, gridObject);Server-side
To bind server-side data to the grid component, pass an instance of DataProvider to gridObject with keyName 'data'. This way, DataGrid will not have complete access to your data. Instead, you can use the dataProvider APIs to provide the data and styles required for rendering to DataGrid.
Refer here for more server-side data settings.
Example:
Copiedconst data = [
["8403", "John", "john@zylker.com" ,"5"],
["15256", "Ram", "ram@zylker.com" ,"4"],
["14058", "Priya", "priya.sr@zylker.com" ,"4"]
];
const gridObject = {
licenseKey: 'non-commercial',
data: data
}
class ServerDataProvider extends DataGrid.DataProvider {
constructor() {
super();
}
getCellData(row, column) {
return data[row][column];
}
getMaxRow() {
return data.length;
}
getMaxColumn() {
return data[0].length;
}
}
const grid = new DataGrid(document.body, gridObject);Show full
Show less
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Clipboard
Copying and moving data often requires formatting options such as cut, copy, and paste. These options are helpful in duplicating data within or outside of a grid. Users can perform these actions either by using their mouse or by utilizing keyboard shortcuts.
Copy and Paste:
Users can select one or more cells, rows, or columns and copy the data to the clipboard. They can then paste the data into another location within the grid or another application.
Cut and Paste:
Like copying and pasting, users can select one or more cells, rows, or columns and cut the data to the clipboard. This removes the data from the original location and allows users to paste it into another area inside the grid or another application.
Users can perform the actions using keyboard shortcuts or by accessing the context menu (if it is enabled).
Context Menu
To copy data, select cells and right-click to access the context menu. Then, choose the "Copy" option. Similarly, to cut data, select cells and right-click to access the context menu. From there, choose the "Cut" option.
Keyboard Shortcuts:
| Windows | macOS | Description |
|---|---|---|
| Ctrl + C | Cmd + C | copies the selected content |
| Ctrl + X | Cmd + X | cuts the selected content |
| Ctrl + V | Cmd + V | pastes the content from the clipboard |
Paste data from other sources
You can copy data from outside and paste it into the grid. The data will be pasted as plain text.
Limitations
- Images cannot be copied from outside and pasted in the grid.
- If you copy data from the DataGrid and try to paste it outside the grid, the data will be pasted in a table format.
Related Links
- Options
- Methods
- Hooks
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Selection
Navigating quickly through the grid, even with a large volume of data, is expected. You can navigate within your grid speedily and select the cells. This section explains the various selection methods in DataGrid.
Before going into the selection types, these types will be active only if the selection is set to true in the gridOptions.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : { selection : true }
}
const grid = new DataGrid(document.body, gridObject);Cell Selection
When you click on a particular cell, the cell will be in focus. This cell is referred to as an 'active cell'. At a given time, only one cell will be active, and it will be highlighted.
Range Selection
DataGrid also allows you to select multiple cells or a range of cells within the grid. Range selection is a powerful feature that enables users to work with large amounts of data more efficiently and effectively.
This is typically done by clicking and dragging the mouse cursor over the desired cells or using keyboard shortcuts.
Once a range of cells is selected, it can be used for various actions such as copying, pasting, and deleting.
Row Selection
The entire row in the grid can be selected using the checkbox available in the Row Header at the start of every row. Multiple rows can also be selected using the checkbox in the row header, and various actions can be performed.
Column Selection
The entire column can be selected by clicking the Column Header of that particular column. Along with the grid actions, context menu options like Sort, Filter, Lock, and Autofit can also be performed with the selected column.
Entire Grid Selection
Apart from the entire column and range selection, the whole grid data can also be selected using the select all checkbox in the top left.
Keyboard Shortcuts:
| Windows | macOS | Description |
|---|---|---|
| Ctrl + a | Cmd + a | Select the entire grid. |
| Shift + ↑ | Shift + ↑ | Selects one cell above the current cell. |
| Shift + ↓ | Shift + ↓ | Selects one cell below the current cell. |
| Shift + ← | Shift + ← | Selects one cell to the left of the current cell. |
| Shift + → | Shift + → | Selects one cell to the right of the current cell |
| Ctrl + Shift + ↑ | Cmd + Shift + ↑ | Selects the entire cells above the current cell. |
| Ctrl + Shift + ↓ | Cmd + Shift + ↓ | Selects the entire cells below the current cell. |
| Ctrl + Shift + ← | Cmd + Shift + ← | From the current cell, all the cells remaining to the left in that current row will be selected. |
| Ctrl + Shift + → | Cmd + Shift + → | From the current cell, all the cells remaining to the right in that current row will be selected. |
| PgUp | Nil | Traverses from the current page to the next page. |
| PgDn | Nil | Traverses from the current page to the previous page. |
Related Links
- Options
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Fill Series
Fill Series is your go-to feature when you need to input repeated information across multiple cells in a grid quickly and easily. Fill Series feature can be enabled using the grid properties while configuring the grid. Once activated, you will notice a plus icon in the bottom right corner of your active cell. You can easily fill in the necessary cells by dragging this icon down.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : { fillSeries : true }
}
const grid = new DataGrid(document.body, gridObject);Numeric Fields
- When you use Fill Series on a single cell with a number input, the other cells will be filled with the same value from the active cell.
- However, if you have multiple cells with numeric input selected and use Fill Series, the intended cells will be filled with a logical pattern. For instance, if you have the numbers 1, 3, and 5 in three cells and you select all three cells and drag the cell containing 5 to Fill Series the next three cells, it will fill them in with the sequences 7, 9, 11.
- It is important to note that if you have a non-relational set of numbers selected and try to use Fill Series, the same set of numbers will be repeated below. For example, if you have 3, 4, 8 in three cells, select all three cells and try to drag the cell containing 8 to autofill the next three cells; it will be filled with the same sequence 3, 4, 8.
Supported Types
Number, Checkbox, Rating, DateTime, DotChart, Percent, Phone Number
Text Fields
- When you use Fill Series on a single cell with a string, the other cells will be filled with the same content as the active cell.
- However, if you have multiple cells with strings selected and you drag to Auto Fill, the intended cells will be filled with the same content pattern. So, for example, if you have "apple," "banana," and "orange" in three cells, and you select all three cells and drag the cell containing "orange" to Auto Fill the next three cells, it will fill them in with the sequence "orange," "orange," "orange."
Supported Types
Text, Email, Dropdown, MultiSelect, URL
Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Themes
Themes are a way of customizing the grid. Applying themes changes the overall look and feel of your grid. Currently, two themes are supported in DataGrid -
1. light
2.midNightBlue
By default, the grid will be rendered with a Light theme. You can change it to the other theme while setting up the configurations initially.
While configuring the grid:
To set the theme, you need to pass the type of theme in the theme property from the gridOptions.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : { theme : 'midNightBlue' }
}
const grid = new DataGrid(document.body, gridObject);Dynamic:
Once the grid is rendered, you can change the theme using the updateOptions and changeTheme API.
Copied<gridInstance>.updateOptions( { theme : 'light' } );
<gridInstance>.changeTheme('midNightBlue');Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Zoom
Zoom
Zooming in on data is a valuable feature that enhances the readability and clarity of information. DataGrid offers the zoom API, which enables users to zoom in on the grid to view data more keenly.
While rendering:
To zoom the grid, you must pass the zoom level to be scaled in the zoomLevel property from the gridOptions.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : { zoomLevel : 200 }
}
const grid = new DataGrid(document.body, gridObject);Dynamic:
Once the grid is rendered, you can scale the grid using the updateOptions API and zoom API.
Copied<gridInstance>.zoom(200);
<gridInstance>.updateOptions( { zoomLevel : 200 } );Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Right to Left Grid Direction (RTL)
Right to Left Grid Direction (RTL)
RTL, alias Right to Left, is a feature that allows you to display languages that are read from right to left, such as (Hebrew, Persian, and Arabic). By default, the grid will be positioned with LTR, but you can enable RTL in such instances.
You can use the updateOptions API to enable RTL in your grid.
How keyboard shortcuts function when RTL is enabled:
| Windows | macOS | Functionality when RTL Enabled |
|---|---|---|
| ← | ← | Navigate the cell to the right. |
| → | → | Navigate the cell to the left. |
| Tab | Tab | Pressing the tab button will move the active cell by one cell to the left. |
| Shift +Tab | Shift +Tab | Moves one cell to the right. |
| Shift + ← | Shift + ← | Selects the next cell to the right. |
| Shift + → | Shift + → | Selects the next cell to the left. |
| Ctrl + Shift + ← | Cmd + Shift + ← | All the cells to the right of the current cells of that column will be selected. |
| Ctrl + Shift + → | Cmd + Shift + → | All the cells to the left of the current cells of that column will be selected. |
While rendering the grid:
To change the direction of the grid from right to left, you need to set rtl property from gridOptions to true.
Dynamic:
Once the grid is rendered, you can freeze the columns using the updateOptions API.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : { rtl : true }
}
const grid = new DataGrid(document.body, gridObject);Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Row Height
Set the row heights for your grid using a number or an array of numbers.
Overview
The grid will be rendered with a default row height of 30px. However, the row height can be passed as a constant or an array of values.
The allowable minimum height in DataGrid is 30px, and the maximum allowable row height is 100px.
Row height as a constant
In this example, we set a constant height of 50px for all the rows in the grid.
Copiedconst configuration = {
licenseKey: 'non-commercial',
rowHeights : 50
};
const grid = new DataGrid(document.body , configuration);Row height as an array
In this example, individual heights are set for the first four rows [50,30,40,60]. The remaining rows are rendered with the default height of 30px.
Copiedconst configuration = {
licenseKey: 'non-commercial',
rowHeights : [50,30,40,60]
};
const grid = new DataGrid(document.body , configuration);Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Row Header
The Row Header is the first cell that appears to the left of every row. By default, the Row Header will be enabled, and it will be in the numeric format such as 1,2,3.. and so on. You can turn it on or off by using updateOptions API.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
rowHeader : false
}
};
const grid = new DataGrid(document.body , configuration);Row Label
The row label is enabled by default, displaying numbers (1, 2, 3, etc.) on the left of each row. You can customize the row label using a function, or set it to false to show a checkbox in the row header.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
rowHeader : false
}
};
const grid = new DataGrid(document.body , configuration);Row Reordering
When you enable row reordering in the grid properties during configuration, you gain the ability to drag and drop rows. This allows you to easily interchange the contents of two rows using this feature.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : {
rowHeader : {
label : function(row) {
return "Row-"+row;
}
}
}
}
const grid = new DataGrid(document.body, gridObject);Row Width
Set the row header width for your grid by providing width from RowHeader in options.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : {
rowHeader : {
width : 50
}
}
}
const grid = new DataGrid(document.body, gridObject);Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Row Freezing
The position of specified rows will be locked and visible even when the users scroll to another area in the grid. These frozen rows will be fixed on the top of the grid, while the remaining rows will move accordingly during scrolling.
While configuring the grid:
To freeze the rows on the top, you need to pass the number of rows to be frozen in the freezeColumnUpTo property from the gridOptions.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
freezeRowUpTo : 2
}
};
const grid = new DataGrid(document.body , configuration);Dynamic:
Once the grid is rendered, you can freeze the rows using the updateOptions API.
Copied<gridInstance>.updateOptions( { freezeRowUpTo : 2 } );Related Links
- Options:
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Column Width
Set the column widths for your grid and let your users manually change the width of the columns using DataGrid's interface.
Overview
Column resizing is a feature that allows the users to change the width of the columns with the help of the resizing cue in the column header using their mouse. Manual column resizing will be possible only when the manualResize is set to true in the gridOptions.
The allowable minimum width in DataGrid is 80px. So, if the column width is less than 80px, it will not be applicable, and 80px will be applied to that column. And the maximum allowable column width is 500px.
Note: As of now, the content of a cell will be clipped if it does not fit the width.
Column width as a constant
In this example, we set a constant width of 200px for all the columns in the grid.
Copiedconst configuration = {
licenseKey: 'non-commercial',
columnWidths : 200
};
const grid = new DataGrid(document.body , configuration);Column width as an array
In this example, individual widths are set for the first four columns [60,90,120,110]. The remaining columns are rendered with the default width of 100px.
Copiedconst configuration = {
licenseKey: 'non-commercial',
columnWidths : [60, 90, 120, 110]
};
const grid = new DataGrid(document.body , configuration);Autofit based on content.
In this example, the column's width is autofitted based on the content. This is achieved by passing auto to the columnWidths property. In this case, too, the minimum width of the column remains 80px.
Copiedconst configuration = {
licenseKey: 'non-commercial',
columnWidths : 'auto'
};
const grid = new DataGrid(document.body , configuration);Adjusting column width manually
Set the option manualResize to true to allow the users to manually resize the column width by dragging the cue between the adjacent column headers. If you double-click on that cue, the width will be instantly autofitted.
Note: Be sure to have columnHeader enabled for this feature to work.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
columnHeader : {
manualResize : true
}
}
};
const grid = new DataGrid(document.body, configuration);Related Links
- Options
- Methods
- Hooks
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Column Header
The Column Header appears on top of every column. By default, the ColumnHeader will be enabled and will be in the alphabetical series like A, B, C... and so on. You can turn it on or off by using updateSettings API.
You can also change the column headers to custom values by providing them in an array of strings or functions.
Custom column headers:
Using an array of strings:
An array of strings ['name,' 'ID,' 'Phone,' 'Location'] can be used to set the columnHeaders, as shown in the below example.
Copiedconst configuration = {
licenseKey: 'non-commercial',
columnHeaders : ['name', 'ID', 'Phone', 'Location']
};
const grid = new DataGrid(document.body , configuration);Using a function:
The columnHeaders can also be populated using a function as shown in the example below.
Copiedconst configuration = {
licenseKey: 'non-commercial',
columnHeaders : function( column ) {
return "Column-"+column;
},
};
const grid = new DataGrid(document.body , configuration);Related Links
- Options
- Methods
- Hooks
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Column Freezing
The position of specified columns will be locked and visible even when the users scroll to another area in the grid. These frozen columns will be fixed on the left-hand side of the grid, while the remaining columns will move accordingly during scrolling.
While configuring the grid:
To freeze the columns on the left-hand side, you need to pass the number of columns to be frozen in the freezeColumnUpTo property from the gridOptions.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
freezeColumnUpTo : 2
}
};
const grid = new DataGrid(document.body, configuration);Dynamic:
Once the grid is rendered, you can freeze the columns using the updateOptions API.
Copied<gridInstance>.updateOptions({freezeColumnUpTo : 2});Related Links
- Options:
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Column Reordering
Enable your users to change the order of the columns in your grid based on their priorities/preferences.
By enabling column reordering in the grid properties while configuring the grid, you can drag and drop the columns. The contents of two columns can be interchanged using this feature. This is again an alternative to cut & paste.
Enabling the column reordering setting:
Set reordable to 'true' to enable your users to rearrange the columns by clicking on the column headers and dragging.
Note: When the users reorder the columns manually, the column headers get reordered along with the column data.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
columnHeader : {
reorderable : true
}
}
};
const grid = new DataGrid(document.body, configuration);Related Links
- Options
- Methods
- Hooks
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Column Locking
Enables your users to lock the columns in the grid that are very crucial and want them to be safe under all circumstances.
When a column is locked, that particular column cannot be edited. The locked column will be in a read-only mode. However, the contents from the locked column can be copied.
Column locking using the context menu:
Note: To enable your users to access the column locking feature from the context menu, the contextMenu plugin should be enabled.
Once the context menu is enabled, your users can lock and unlock the columns easily.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
plugins : {
contextMenu : true
}
}
};
const grid = new DataGrid(document.body, configuration);Column locking using the API:
Column locking and unlocking can also be dynamically done using the lockColumn and unlockColumn API. By providing the column index(starting from 0), that column can be locked and unlocked.
Copied<gridInstance>.lockColumn(0);
<gridInstance>.unLockColumn(0);Related Links
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Cell Customization
Custom Field
We also let you create your own field type apart from the ones provided above. Using the custom renderer() function, you can create custom field types.
Note: The custom renderer() function should return a DOM element.
Copiedconst columnProperties = [{
name : "tags"
renderer: function() {
let dom = document.createElement('div');
dom.style.width = "100px";
dom.style.height = "20px";
dom.style.border = "1px solid black";
document.body.appendChild(dom);
dom.addEventListener("click", () => {
dom.style.background = colors[i];
i = (i == (colors.length - 1)) ? 0 : i+1;
})
return dom;
}
}];Column Validator
You can add your additional validation to the individual columns using the Column Validator function. Column Validator should be of Function representation. It should either return the boolean or object value.
Copiedconst columnProperties = [{
name : "tags",
validator: function (value) {
if ((isNaN(+value))) {
return false;
} else if (value < 0) {
return {
value: 0
};
} else if (value > 100) {
return {
value: 100
};
} else {
return true;
}
}
}];Column Properties
Each column type has a specific set of properties and styles with which you can customize the fields. Refer here to know more about column props and column styles.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Field Types
Text
The text field type allows you to enter data in a textual format.
Number
The Number field type allows you to enter numeric data. Precision denotes the number of digits to be displayed after the decimal point. Using the thousandSeparator, you can format your number with commas.
Currency
The currency field allows you to enter currency symbol and number formatted data. You can give the currency symbol to be used in the currency setting. You can set the symbolPosition, precision, and thousandSeparator to make it look how you want.
Percent
The percent field allows you to display the data in a percentage format. When users input numbers, this field will display them in percentage format.
You can configure the precision and thousandSeparator option.
DateTime
You can display the date and time in your preferred format using the date and time field type. When you edit the cell, a calendar icon and a clock icon will be available. You can click the calendar and clock icon to edit the data and time in a particular cell. To display only the date, you can provide 'false' to the time property. You can also select your preferred date and time format using the dateFormat and timeFormat properties.
Checkbox
To render a checkbox in a column, define the column type as check-box. You can change the look of the checkbox by changing the colour.
Rating
The rating field type allows you to set up a column for getting rating input. Stars will appear in this field based on the value you give in the maxCount property. The color of the stars can be changed using the color property.
Phone Number
The Phone Number field type allows you to display your data in the form of a phone number. DataGrid provides you with ten phone number formats to use. The Phone Number field is clickable - when users click, they will be redirected to the connected phone service.
The Email field type allows you to represent the data via email. The email field is also clickable - the connected mail service will open when the user clicks.
URL
The URL field type allows you to enter links inside the grid. Once you add the data, it will get converted into a clickable link (URL).
Dot Chart
The Dot Chart field type allows you to represent your values as a dotted structure. You can configure the lowColor, highColor, benchMark, and maxCount properties. Based on the value the user provides, the dotted design will be displayed in the high/low color.
Values greater than or equal to the benchmark will be rendered with high color, and values less than the benchmark will be rendered with low color.
Dropdown
It allows you to select the desired option from the list of options. You can give the array of desired options using the source property so that it appears for your users to choose from.
Auto Complete
The AutoComplete field predicts and automatically completes the words when you begin typing in the cell. You can provide the list of options in the source property.
Multi Select
The Multi Select field allows users to select more than one option from the list of options. You can give the array of strings to be used as the options using the source property.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Overview
DataGrid provides you with predefined field types along with the custom field type, which allows you to create your own field type based on the requirement.
Cells can have various field types, such as
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Sort
Sort
With this plugin, you can quickly sort your grid data in ascending or descending order based on various column types, whether it has numerical data, dates, or text. Sorting your data in ascending or descending order is as simple as a click.
It is important to note that currently, the plugin allows sorting for one column at a time. When you configure sorting for a particular column, the previous sort will be automatically removed.
By default, the sorting functionality is disabled. You can enable the Sort plugin using the grid options or enablePlugin API.
| Types | Description |
| Ascending | Sorts the data in the ascending order |
| Descending | Sorts the data in the descending order |
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : {
plugins : {
sort: true
}
}
}
const grid = new DataGrid(document.body, gridObject);© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Filter
Filter
The filtering option allows you to filter your columns based on the conditions you want. It allows the users to view the records in your grid based on specific criteria they configure. By default, the filtering option will be disabled.
Filtering can be applied to Columns with any data format. You can use the enablePlugin API to enable the filter feature in your grid.
While configuring the filter, you can give the conditions for strings and numbers as given below.
Criteria for String Data
You can apply filters to columns that contain data in the form of a string. There are various filter conditions you can set to view the records. They are listed below -
| Conditions | Description |
|---|---|
| Equals | To filter data based on a specific value. |
| Not Equals | To exclude data entries based on a specific value. |
| Is empty | To filter data entries that are empty or have a null value. |
| Is not empty | To filter data entries that are not empty. |
| starts with | To filter data entries based on the starting characters. |
| Ends with | To filter data entries based on the ending characters. |
| Contains | To filter data entries based on the presence of a specific character or string. |
| Does not contain | To filter data entries that do not contain a specific character or a string. |
Criteria for Numeric Data
You can apply filters to columns that consist of data in the form of numbers. There are conditions you can set to view the records. They are listed below -
| Conditions | Description |
|---|---|
| = | Only lists the records that exactly match the value you provide. |
| != | To filter records that match the value you have provided and display the rest of the records. |
| < | To filter records that are greater than the value you provide |
| > | To filter records that are less than the value you provide. |
| >= | To filter records that are either greater than or equal to the value you provide. |
| <= | To filter records that are either lesser than or equal to the value you provide. |
| Between | To filter records that are available in between the value range you provide. |
| Not between | To filter records that are not in between the value range you provide. |
| Is empty | To filter the records that have empty values (empty field values, empty data). |
| Is not empty | To filter the records that do not have any empty values. |
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : {
plugins : {
filter: true
}
}
}
const grid = new DataGrid(document.body, gridObject);© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Search
The Search feature will allow you to perform a search inside the grid.
Once the grid is focused, click ctrl/cmd+f to perform the search operation. The search input box will appear. Enter the string to be searched across the grid and hit enter.
Navigation
The number of results will be displayed below the search bar. If you keep clicking enter, the result cells will be focused one after the other.
Note: Search will function only when the focus is on the grid.
Copiedconst configurations = {
options : {
plugins : {
search: true
}
}
}
const grid = new DataGrid(document.body, configurations);Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Pagination
Pagination is useful for those users who want to split the data into multiple pages. This improves the readability and ensures the user takes the right action.
When the grid is rendered for the first time, the number of rows displayed per page will be equal to the minimum of the pages array.
With the Pagination feature enabled, you can navigate to the first, last, next, and previous pages. You can give an array of numbers, which will be present as options in the dropdown using pages property.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : {
plugins : {
pagination: true
}
}
}
const grid = new DataGrid(document.body, gridObject);Pagination can be customized using the below-mentioned properties.
| Properties | Description | Allowed Values |
|---|---|---|
| pageSize | Number of rows per page in default | number |
| pages | Array of number of rows. Will be present as the options in the dropdown menu in pagination. | array of numbers |
| style | Styling for pagination | style1, style2, style3, style4 |
Related Links
- Options
- Methods
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Context Menu
Users can perform contextual actions like inserting a row or deleting a row using the Context Menu.
Note: By enabling the DataGrid's context menu, the browser's default context menu will not be active.
Copiedconst gridObject = {
licenseKey : 'non-commercial',
options : {
plugins : {
contextMenu: true
}
}
}
const grid = new DataGrid(document.body, gridObject);Row
When you right-click on a Row Header, the following context menu options will pop up.
| Options | Description |
| Insert | Row Above/Row Below inserts a new row above or below the current row |
| Delete | Deletes the selected row from the grid |
Column
When you right-click on a Column Header, the following context menu options will pop up.
| Options | Description |
| Insert | Column Below/Column After inserts a new column above or below the current column. |
| Delete | Deletes the selected column from the grid. |
| AutoFit | AutoFit the column based on the contents in the column. |
| Lock / Unlock | Lock and Unlock the selected column from the grid. |
Note: Sort and Filter options will also be displayed here if enabled.
Cell
When you right-click on a cell, the following context menu options will pop up -
| Options | Description |
| Cut | Cuts the content of the active cell |
| Copy | Copies the active cell content |
| Paste | Pastes the content copied from the system clipboard |
| Delete | Clears active cell content |
Related Links
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
1. Install Zoho DataGrid
Install Zoho DataGrid seamlessly - Effortless Installation in a Snap
You can install Zoho DataGrid through your preferred package manager or import the assets directly from a CDN.
Using a package manager
Run the below command to install Zoho DataGrid locally using a package manager.
Copiednpm set registry http://cm-npmregistry
npm install @zoho/data-gridUsing the original path to import in js
Copiedimport { DataGrid } from '@zoho/data-grid';2. Using the script tag
Include the JS file below using the script tag. This will import the complete distribution of DataGrid as a minified JavaScript file from the CDN.
Copiedimport { DataGrid } from "./node_modules/@zoho/data-grid/dist/js/zohogrid.esm.js"
b) CSS
1. Using the link tag
You can import Zoho DataGrid's CSS using a link tag
Copied<script type="text/javascript" src="https://static.stratuscdn.com/datagrid/v1_beta_1/grid.js"></script>2. Using import
If your bundler allows it, you can import Zoho DataGrid's full distribution CSS file using an import statement.
Copied<link rel="stylesheet" href="https://static.stratuscdn.com/datagrid/v1_beta_1/grid.css">3. Create the Grid
Instantiate the grid object as shown in the code snippet below.
Copiedimport "@zoho/data-grid/zohogrid.css";<HTML_Element> to render the grid. Use the <options> parameter to specify the Grid options as a JSONObject. For more information on available Grid Options, refer to the documentation.
Copiedconst grid = new DataGrid(<HTML_Element>, <options>);Note: The licenseKey configuration option is mandatory. Refer to this document to know how licenseKey works.
Copiedconst columnHeaders = ["ID", "Name", "Email ID", "Rating"];
const data = [
["8403", "John", "john@zylker.com" ,"5"],
["15256", "Ram", "ram@zylker.com" ,"4"],
["14058", "Priya", "priya.sr@zylker.com" ,"4"]
];
const container = document.querySelector('#gridContainer');
const options = {width: innerWidth,
height: innerHeight,
licenseKey: 'non-commercial'
};
const grid = new DataGrid(container, options);
const gridData = {
data: data,
columnHeaders: columnHeaders,
columnWidths: [100, 150 , 250, 100],
rowHeights: 30
}
grid.renderData(gridData);
Show full
Show less
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Row Highlighter
Easy data visualization is one of the significant aims of DataGrid. The row highlighter feature of DataGrid makes your viewing experience easier by highlighting the row over which you move your mouse. You can even select multiple rows and view that strip of rows for better clarity.
Set rowHighlighter to true to enable row highlighter in options.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
rowHighlighter : true
}
};
const grid = new DataGrid(document.body , configuration);© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Column Highlighter
Similar to row highlighting, column highlighting is also possible in DataGrid. This feature enhances the viewing experience by automatically highlighting the column your mouse hovers over, making it easier to read. The column highlighting feature will be enabled by default, and you can modify columnHighlighter from options.
Copiedconst configuration = {
licenseKey: 'non-commercial',
options : {
columnHighlighter : true
}
};
const grid = new DataGrid(document.body, configuration);© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Supported Browsers
Supported Browsers
Zoho DataGrid browser compatibility across all major browsers and operating systems:
| Chrome | Firefox | Microsoft Edge | Opera | Safari | |
| Mac | Yes | Yes | Yes | Yes | Yes |
| Windows | Yes | Yes | Yes | Yes | N/A |
| Linux | Yes | Yes | Yes | Yes | N/A |
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
FAQs
General FAQs:
What are the steps involved in the DataGrid Installation?
There are three steps involved in the installation procedure of DataGrid. You can refer here to find the detailed steps to create your first grid using DataGrid.
How do I create a new row in the grid?
Using the addRow API, you can add the required number of new rows in the grid.
How do I create a new column in the grid?
Using the addColumn API, you can add the required number of new columns in the grid. Click here to read more about the APIs.
What are the different field types supported by DataGrid?
DataGrid supports more than ten different column types, such as Text, Number, URL, and so on. Click here to read about the supported field types in detail.
What are the default properties of these field types?
Each of the fields will be rendered with the default properties given below. However, you can customize these fields with the help of the properties attached to each of them.
How many rows and columns can we create? Is there any limit?
There is no limit on the number of rows and columns you want to create. Create as many rows and columns as you wish. By default, a grid comprising 10 rows and 5 columns will be created.
What is the default row height and column width?
The default row height is 30 pixels, and the default column width is 100 pixels.
How can I change the default style of the grid?
You can change the default properties of the grid while initializing the grid using the gridOptions.
Will all the plugins be enabled by default?
No, all the plugins will be disabled by default and can be enabled using the enablePlugin API.
Can we apply our own sort conditions?
No, currently, we support only ascending and descending sort conditions.
Can we apply more than one filter condition?
Currently, we support a single filter, i.e., you can apply only one filter to one column at a time.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Support
Support
If you are looking for further information or have any trouble, contact our 24/7 support at:
Connect with us
Case Studies
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Licensing
Zoho DataGrid is available for free and commercial use. Based on how you use DataGrid, specify the license key in the 'licenseKey' gridObject.
Note: 'licenseKey' is a string, so mention it in single quotes ' '
Free or non-commercial license
If you use DataGrid for non-commercial purposes, pass the string 'non-commercial' to the 'licenseKey' option from the gridObject.
HTML :
Copied<div id="GridContainer"></div>JS :
Copiedconst gridObject = {
licenseKey: 'non-commercial'
};
const grid = new DataGrid(document.body, gridObject);Commercial license
If you use the paid version of Zoho DataGrid for your projects, pass the specific license key (string) provided to you after you purchase.
Contact our sales team to get the commercial license key for your grid.
Appropriate messages[read below] will be shown based on the value in the 'licenseKey' option. This message will be displayed in two places, above the grid as HTML text and in the console.
HTML :
Copied<div id="GridContainer"></div>JS :
Copiedconst gridObject = {
licenseKey: '00000-00000-00000-00000-00000'
};
const grid = new DataGrid(document.body, gridObject);Valid license key
If you use a valid license key for commercial purposes, no messages will be displayed.
Non - commercial
You are using DataGrid's non-commercial version. It is not licensed for development projects intended for production. Contact us at support@zohodatagrid.com to get a valid license key for commercial usage.
Missing license key
The license key for DataGrid is missing. Use your purchased license key for commercial use. Use 'non-commercial' in the 'licenseKey' option for non-commercial purposes.
Invalid license key
The license key for DataGrid is invalid. Contact us at support@zohodatagrid.com to get a valid license key.
Expired license key
The license key for DataGrid has expired and is not valid further. Contact us at support@zohodatagrid.com and renew your license key.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Pagination
| Properties | Type | Default | Description |
|---|---|---|---|
| style | string | style1 | To choose from style1, style2, style3, style4 |
| rowsPerPageOptions | number[ ] | [5, 10, 25, 50, 100, 250] | Number of rows in array. Will be present as the options in the dropdown menu in pagination. |
| rowsPerPage | number | 25 | Number of rows per page in default. |
| suppressUI | boolean | false | To suppress the default UI provided by Zoho DataGrid and implement your custom pagination bar interface instead. |
getCurrentPageNumber
To get the current page number of the grid in the viewport.
ReturnType: number
Copied<gridInstance>.plugin.pagination.getCurrentPageNumber()getProperties
To get the current active pagination properties.
ReturnType: object
Copied<gridInstance>.plugins.pagination.getProperties()getRowsPerPage
To get the current pageSize (i.e.), the number of rows per page displayed currently.
Return type: number
Copied<gridInstance>.plugins.pagination.getRowsPerPage()getTotalPages
To get the total number of pages in the grid.
ReturnType: number
Copied<gridInstance>.plugins.pagination.getTotalPages()goToFirst
To navigate to the first page from the current one in the grid.
Copied<gridInstance>.plugins.pagination.goToFirst()goToLast
To navigate to the last page from the current one in the grid.
Copied<gridInstance>.plugins.pagination.goToLast()goToNext
To navigate to the next page from the current one in the grid.
Copied<gridInstance>.plugins.pagination.goToNext()goToPage
To navigate to the specified page number.
| Param | Type |
| pageNumber | number |
Copied<gridInstance>.plugins.pagination.goToPage(pageNumber)goToPrevious
To navigate to the previous page from the current one in the grid.
Copied<gridInstance>.plugins.pagination.goToPrevious()setRowsPerPage
To change the number of rows per page displayed in the grid.
| Param | Type |
| pageSize | number |
Note: By default, there will be 25 rows per page when you enable pagination.
Copied<gridInstance>.plugins.pagination.setRowsPerPage(pageSize)Copied<gridInstance>.plugins.pagination.update()Note: All the above APIs will work when you have already enables pagination in the grid.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Table of contents
Sort
add
To apply sort to the specified column.
| Param | Type |
| sortObject | { |
Copied<gridInstance>.plugins.sort.add(sortObject)clear
To remove all the sorts applied on the grid.
Copied<gridInstance>.plugins.sort.clear()getApplied
To get all the applied sorts on the grid.
ReturnType: Array of objects
[{[key: number]: [string : 'ascending' | 'descending']},...]
Copied<gridInstance>.plugins.sort.getApplied()getSortedOrder
To get the applied sort order of a particular column.
| Param | Type |
| column | number |
ReturnType: string ('ascending' | 'descending')
Copied<gridInstance>.plugins.sort.getSortedOrder(column)remove
To remove the sort applied on the particular column in the grid.
| Param | Type |
| column | number |
Copied<gridInstance>.plugins.sort.remove(column)updateSort
To modify the sorting order in the specified column.
| Param | Type |
| sortObject | { |
Copied<gridInstance>.plugins.sort.updateSort(sortObject)© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Table of contents
Filter
add
To apply a filter condition to a specific column in the grid.
| Param | Type |
| columnNumber | number |
| operation | string |
| values | any |
Copied<gridInstance>.plugin.filter.add(columnNumber, operation, values)clear
To clear all the applied filter conditions in the grid.
Copied<gridInstance>.plugins.filter.clear()getFilters
To get the filtered data in the form of an array after applying a filter condition to a particular column.
ReturnType: Array of objects
[{ fieldId : number, operation : string, values : string [] },...]
Copied<gridInstance>.plugin.filter.getFilters()Note: All the above APIs expect add will work only when you have already done a filter operation.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Table of contents
Search
| Properties | Type | Default | Description |
|---|---|---|---|
| suppressUI | boolean | false | To suppress the default UI provided by Zoho DataGrid and implement your custom search bar interface instead. |
clear
This API is used to clear the context of the most recent search operation, effectively resetting the search state and allowing users to initiate a new search operation.
Copied<gridinstance>.plugins.search.clear()find
To search for a string in the grid. This will highlight all the search results present in the grid.
| Param | Type |
| key | string |
Copied<gridinstance>.plugins.search.find(key)getAllIndexes
To get the indexes of all the search results in an array of objects.
ReturnType: Array of objects
[ {row,column}, {row,column},....]
Copied<gridinstance>.plugins.search.getAllIndexes()getCurrentIndex
To get the cell index of the cell currently holds the focused search result. This will return an object containing the cell position.
ReturnType: object
{ row, column}
Copied<gridinstance>.plugins.search.getCurrentIndex()getNextIndex
To get the index of the cell holding the succeeding search result. This will return an object containing the cell position.
ReturnType: object
{ row, column}
Copied<gridinstance>.plugins.search.getNextIndex()getPreviousIndex
To get the index of the cell holding the preceding search result. This will return an object containing the cell position.
ReturnType: object
{ row, column}
Copied<gridinstance>.plugins.search.getPreviousIndex()getTotalCount
To get the total number of the cells containing the search results for a specific string.
ReturnType: number
Copied<gridinstance>.plugins.search.getTotalCount()goTo
To navigate to a specific search result index. This will shift the focus to the cell with the specified search result index.
| Param | Type |
| index | number |
Copied<gridinstance>.plugins.search.goTo(index)goToNext
To navigate to the succeeding search result index from the current one. This will shift the focus to the cell with the subsequent search result.
Copied<gridinstance>.plugins.search.goToNext()goToPrevious
To navigate to the preceding search result index from the current one. This will shift the focus to the cell containing the previous search result.
Copied<gridinstance>.plugins.search.goToPrevious()Note: All the above APIs expect find will work only when you have already made a search in the grid.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Properties
Column Type
Column Type should be String representation.
| ColumnType | Value | DataFormat |
| Text | text | Text |
| Numeric | number | Number |
| Currency | currency | Number |
| Percent | percent | Number |
| Date&Time | dateTime | Timestamp |
| Checkbox | checkbox | Boolean |
| Rating | rating | Number |
| Phone Number | phoneNumber | String |
| String | ||
| URL | url | String |
| Dotchart | dotChart | Number |
| Dropdown | dropDown | String |
| Auto Complete | autoComplete | String |
| Multi Select | multiSelect | Array |
| Custom Dom | custom | String | Number |
Column Style
Column Style should be of String representation. You can modify the look of the columns using the styles.
| Style | Type | Default | Value |
| font | string | Puvi | Any font |
| color | string | Black | Any color |
| background | string | white | Any color |
| size | number | 11 (in pt) | Between 7 and 50 |
| bold | boolean | false | true | false |
| italic | boolean | false | true | false |
| underline | boolean | false | true | false |
| overline | boolean | false | true | false |
| strikeThrough | boolean | false | true | false |
| verticalAlign | string | 'middle' | 'top' | 'middle' | 'bottom' |
| horizontalAlign | string | Based on field types | 'left' | 'center' | 'right' |
| padding | object | top : 2, left : 4, right : 4, bottom : 2 | value in pixel |
Column Properties
Below are the properties associated with individual column types.
ColumnType | Properties | ||||||||||||||||||||||||
text |
| ||||||||||||||||||||||||
- | |||||||||||||||||||||||||
autoComplete | - | ||||||||||||||||||||||||
rating |
| ||||||||||||||||||||||||
dropdown | - | ||||||||||||||||||||||||
phoneNumber |
| ||||||||||||||||||||||||
currency |
| ||||||||||||||||||||||||
checkbox |
| ||||||||||||||||||||||||
dateTime |
| ||||||||||||||||||||||||
percent |
| ||||||||||||||||||||||||
dotChart |
| ||||||||||||||||||||||||
number |
|
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Table of contents
Configurations
To instantiate the grid in the client-side model
Client_Object
| Key | Type |
| data | client-data |
| options | gridoptions |
| columnHeaders | columnHeaders |
| columns | columns |
| columnWidths | columnWidths |
| rowHeights | rowHeights |
| licenseKey | licenseKey |
Copiedconst grid = new DataGrid(container, gridObject);To instantiate the grid in the server-side model
Server_Object
| Key | Type |
| data | server-data |
| licenseKey | licenseKey |
Copiedconst grid = new DataGrid.Server(container, gridObject);Arguments
| Param | Type |
| container | HTML_Element |
| gridObject | Client_Object | Server_Object |
License key
Use the licenseKey option to set your DataGrid license key.
You can set the licenseKey option to one of the following:
| Value | Details |
| 'non-commercial' | For non-commercial use |
| provided commercial license key | For commercial use |
Note: licenseKey is mandatory. Logger messages will be displayed on the console and above the grid.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.
Data methods
setCellData
The setCellData API will be updated in the respective row and column of the grid.
Return Type: String
| Param | Type |
| row(index based) | number |
| column(index based) | number |
| data | string |
Copied<gridInstance>.setCellData(row, column, data);setCellDataForRange
The setDataForRange API will be updated in the respective range of the grid.
Return Type: String
| Param | Type |
| startRow(index based) | number |
| endRow(index based) | number |
| startColumn(index based) | number |
| endColumn(index based) | number |
| data | [ ] [ ] |
Copied<gridInstance>.setCellDataForRange(startRow, startColumn, endRow, endColumn)Note: Certain methods may not be compatible with server models. For these cases, hooks are executed and implemented using a data provider.
© 2025, Zoho Corporation Pvt. Ltd. All Rights Reserved.