Features
This page contains structured information that will help you to start working with DHTMLX Grid and go into deep dive on its functionality.
How to start with DHTMLX Grid
In this section you can find out how to initialize Grid, how to load data into the component and how to integrate Grid into your applications.
Initialization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize Grid |
| Initialization in the TreeGrid mode | Learn how to initialize Grid in the TreeGrid mode |
| Pagination with Grid | The example shows how to initialize Grid inside Pagination |
| Large dataset | The example shows how Grid works with over 11000 rows loaded |
| Several grids with large dataset | The example shows how to initialize several grids inside one container |
Loading data into Grid
| Topic | Description |
|---|---|
| Loading data into Grid | Read how to load the initial data into Grid |
| Initialization with config.data | The example shows how to load data into Grid on the initialization stage |
| Initialization with data.load() | The example shows how to load data from external file |
| Initialization with data.parse() | The example shows how to load data from a local data source |
| Initialization with external DataCollection | The example shows how to load data from external DataCollection |
| Lazy loading | The example shows how to render data dynamically |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Grid with React (Demo) |
| Angular integration | Learn how to use DHTMLX Grid with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Grid with Vue.js (Demo) |
How to configure Grid
How to configure columns
In this section you will get to know how to configure Grid columns on Grid initialization.
| Topic | Description |
|---|---|
| Configuring columns | Learn how to define initial structure of Grid |
| Configuring content alignment | Learn how to align data in a column (Example) |
| Frozen columns | Learn how to split grid columns into the frozen and movable parts (Example) |
| Hidden columns | Learn how to initialize Grid with hidden columns (Example) |
| Sortable columns | Learn how to make columns sortable (Example) |
| Resizable columns | Learn how to make columns resizable (Example) |
How to configure rows
In this section you will get to know how to configure Grid rows on Grid initialization.
| Topic | Description |
|---|---|
| Automatic adding of empty row into Grid | Learn how to to automatically add an empty row after the last filled row in the grid (Example) |
| Frozen rows | Learn how to split grid rows into the frozen and movable parts (Example) |
How to specify formats for Grid data
In this section you will learn how to specify the necessary data formats for a separate column.
| Topic | Description |
|---|---|
| Configuring data formats | Learn how to display values of cells in different formats (percent, currency, date and combination with templates) (Example) |
| Date column and support of the Date() object | The example shows how to use the Date() object for specifying dates |
| Setting pattern and number masks | Learn how to specify input masks for the values of column cells (Example) |
How to configure Grid header and footer
In this section you can learn how to configure the header and footer of Grid, how to configure their heights and styles.
| Topic | Description |
|---|---|
| Configuring header/footer | Learn how to configure a Grid header/footer (Example) |
| Setting the height for header and footer | Learn how to set the height for rows in the header and footer of Grid (Example) |
| Setting the text for header and footer | Learn how to set the text for rows in the header and footer of Grid (Example) |
| Styling header cells | Learn how to set styling to the text of header cells (Example) |
| Styling footer cells | Learn how to set styling to the text of footer cells (Example) |
How to configure tooltips
In this section you will get to know how to add tooltips of the desired appearance with the necessary information, or hide them if needed.
| Topic | Description |
|---|---|
| Hiding tooltips | Learn how to hide/show a tooltip on hovering over the content of a column (Example) |
| Adding templates for tooltips | Learn how to customize the content of the tooltip of a column (Example 1, Example 2) |
How to group cells in Grid
In this section you will find out how to group cells in Grid and its header.
| Topic | Description |
|---|---|
| Grouping cells | Learn how to specify columns and rows spans in Grid (Example) |
| Adding/removing spans | Learn how to add, remove and get spans of rows and columns via API methods |
| Grouping rows and columns in the header | Learn how to specify spans for columns and rows in the Grid header (Example) |
How to configure drag-n-drop
In this section you will get to know how to configure the drag-n-drop functionality for Grid.
| Topic | Description |
|---|---|
| Drag-n-drop inside a grid | Learn how to configure drag-n-drop of columns and (or) rows inside the grid |
| Drag-n-drop between grids | Learn how to configure drag-n-drop between grids (Example) |
| Drag-n-drop of multiple rows | Learn how to allow end users to drag-n-drop several rows at once |
| Copying of rows during drag-n-drop | Learn how to copy a row to a target during drag-n-drop (Example) |
How to render custom statistics in the column header/footer and in the spans
In this section you will get to know how to render custom statistics in the column header/footer and in the spans.
| Topic | Description |
|---|---|
| Defining the data calculation function | Learn how to define the default or create a custom statistical function for data calculation |
| Calculating a column summary | Learn how to form a summary list for a column (Example) |
| Calculating a Grid summary | Learn how to form a summary list for a Grid |
| Getting the summary object | Learn how to get the summary object |
| Displaying custom statistics in the column header/footer text | Learn how to render custom statistics in the text of a column header/footer (Example) |
| Displaying custom statistics in the column header/footer tooltip | Learn how to render custom statistics in the tooltip of a column header/footer |
| Displaying custom statistics in the spans | Learn how to render custom statistics in the spans |
How to configure sizes of Grid and its cells
In this section you can learn how to configure the size of Grid and its cells.
| Topic | Description |
|---|---|
| Responsiveness | The example shows how to configure Grid to adapt its sizes according to the parent container |
| Width and height of Grid | Learn how to set specific size of Grid (Example) |
| Auto-height for Grid | Learn how to configure auto-height for Grid (Example) |
| Adjusting columns by header, footer, data content | Learn how to make the size of columns to automatically adjust to their content (Example) |
| Max width of a column | Learn how to define the maximal width which can be set for a column (Example) |
| Min width of a column | Learn how to define the minimum width which can be set for a column (Example) |
| Auto-width for columns | Learn how to configure auto-width for columns (Example) |
| Auto-height for rows | Learn how to configure auto-height for rows (Example) |
| Row height | Learn how to configure the height of rows (Example) |
How to customize Grid and its cells
In this section you can learn how to configure the style of Grid and its cells.
| Topic | Description |
|---|---|
| Row context menu with custom logic | The example shows how to add a context menu with custom logic for the grid rows |
| Adding HTML content into cells | Learn how to add HTML content (for example, an image, an icon) into data of Grid cells (Example) |
| Adding a template to cells | Learn how to customize the content of cells (Example) |
| Handling events in template | Learn how to assign event handlers to HTML elements of a custom template of Grid cells (Example) |
| Styling Grid | Learn how to customize a grid (Example) |
| Styling cells | Learn how to style the necessary cells (Example) |
| Marking cells with colors | Learn how to apply conditional formatting and mark cells in the grid (Example 1, Example 2) |
| Styling rows | Learn how to style the necessary rows (Example 1, Example 2) |
| Styling selection | The example shows how to style the selection in the grid |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with columns and rows
In this section you will learn how to add and remove columns and rows, how to hide and show them, how to configure their sizes and align content inside the columns.
Adding/removing columns and rows
| Topic | Description |
|---|---|
| Adding / removing columns | Learn how to add/remove columns |
| Adding / removing rows | Learn how to add/remove rows (Example) |
Getting configuration of a cell/column
| Topic | Description |
|---|---|
| Getting configuration of a column | Learn how to get an object with configuration of the specified column |
| Getting configuration of a cell | Learn how to get the current coordinates and size of a cell |
Showing/hiding columns and rows
| Topic | Description |
|---|---|
| Showing / hiding a row | Learn how to show and hide a row in Grid (Example) |
| Checking visibility of a row | Learn how to check whether a row is hidden |
| Hiding columns | Learn how to make a column hidden on Grid initialization (Example) |
| Showing / hiding a column | Learn how to show and hide a column in Grid (Example) |
| Checking visibility of a column | Learn how to check whether a column is hidden (Example) |
How to work with row expander
| Topic | Description |
|---|---|
| Adding sub-rows | Learn how to enable the row expander feature and add sub-rows into Grid (Example) |
| Adjusting configuration of sub-rows | Learn how to configure the sub-rows (Example) |
| Dynamic configuration of sub-rows | Learn how to adjust the configuration settings of sub-rows dynamically (Example) |
| Saving state of nested components or data in sub-rows | Learn how to save the state of nested components or the data of sub-rows |
| Loading data into a sub-row | Learn how to dynamically load data into a sub-row (Example) |
| Handling events | Learn how to add event handlers for sub-rows with sub-components or HTML content (Example) |
| Multi-level Grid nesting | Learn how to specify a multi-level Grid nesting structure (Example) |
| Adjusting sub-row width | Learn how to adjust the sub-row width depending on the width of the parent Grid |
| Getting sub-row config and content | Learn how to get the configuration settings applied to a sub-row and the content inside it |
How to work with data in Grid
This section will tell you how to use Grid API and DataCollection API for working with data of Grid, i.e. edit, add, remove, sort data, etc.
How to edit data
In this section you will find the ways of editing data in Grid.
| Topic | Description |
|---|---|
| Enabling/disabling editing | Read how to enable/disable editing of the whole Grid or its separate columns |
| Editing with different editors | Learn how to specify the type of the editor for editing the cells (Example), (Example 2), (Example 3) |
| Editing with a colorpicker editor | The example shows how to implement a colorpicker editor for editing cells |
| Inline editing | The example allows you to try out inline editing in Grid |
| Editing data using the right panel | The example shows how to implement editing in Grid via the right panel |
| Editing data using a modal window | The example shows how to implement editing in Grid via the modal window |
| Editing of a specific cell | Learn how to enable editing of a cell (Example) |
| Grid and Chart. Edit Grid to see the changes in Chart | Check the example to see how the chart changes after you edit data in the grid |
| Keyboard navigation | Learn how to enable key navigation for editing the cells (Example) |
How to sort data
In this section you will find the ways of sorting data in Grid.
| Topic | Description |
|---|---|
| Sorting data | Learn how to sort data in the grid (Example) |
| Sorting by multiple columns | Learn how to sort Grid data by multiple columns (Example 1, Example 2) |
| Sortable columns | Learn how to define whether a column should be sortable (Example) |
| Getting sorting state | Learn how to get the current state of sorting data in Grid (Example) |
How to filter data
In this section you will find the ways of filtering data in Grid.
| Topic | Description |
|---|---|
| Setting the type of a filter in the header/footer | Learn how to specify the type of the filter in the header/footer of a Grid column (Example) |
| Filtering data | Learn how to filter grid data by the specified criteria (Example 1, Example 2) |
| Customizing filters in the header/footer | Learn how to add a custom function with your own logic for filtering data in a Grid column (Example) |
| Getting the header filter | Learn how to get and use an object of the header filter (Example) |
How to group data
In this section you will get to know how to group row data in Grid.
| Topic | Description |
|---|---|
| Enabling data grouping | Learn how to enable row data grouping (Example) |
| Configuring data grouping | Learn how to configure row data grouping (Example) |
| Making group panel elements closable | Learn how to make elements of the group panel closable (Example) |
| Using DataCollection API for data grouping | Learn how to group Grid data with DataCollection API (Example) |
How to work with selection
In this section you will find the ways of working with selection functionality.
| Topic | Description |
|---|---|
| Configuring selection | Learn how to configure the mode of selection of Grid elements (Example) |
| Enabling multiselection | Learn how to enable multi-row/multi-cell selection in Grid (Example) |
| Working with selection | Learn how to enable/disable selection, set selection to cells, remove selection, and get the object of a selected cell (Example) |
| Selection API | Learn how to use the API of Selection to manage the selection of Grid cells |
| Keyboard navigation | Learn how to enable key navigation that allows moving the selection between cells (Example) |
How to work with TreeGrid mode
In this section you will find the ways of working with the TreeGrid mode of Grid.
| Topic | Description |
|---|---|
| Enabling TreeGrid mode | Learn how to enable the TreeGrid mode of Grid |
| Configuring TreeGrid mode | Learn how to configure the TreeGrid mode of Grid |
| Data loading in TreeGrid mode | Learn how to load data in the TreeGrid mode of Grid |
| Working with TreeGrid mode | Learn how to expand/collapse nodes |
How to scroll Grid
In this section you will learn how to scroll Grid to the necessary position.
| Topic | Description |
|---|---|
| Controlling scroll behavior | Learn how to scroll the grid content to exact position (Example) |
| Keyboard navigation | Learn how to enable key navigation in Grid (Example) |
How to export Grid
In this section you will get to know how to export Grid to different formats.
| Topic | Description |
|---|---|
| Exporting Grid to XLSX, CSV, PNG or PDF format | Learn how to export Grid to the necessary format (Example 1, Example 2) |
How to localize Grid
In this section you will get to know how to localize the interface of Grid.
| Topic | Description |
|---|---|
| Localizing Grid | Learn how to apply different languages to the interface of dhtmlxGrid |
How to work with Grid events
This section explains how to work with Grid events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Grid events (Example) |
API reference
In this section you can find out corresponding references of Grid API.
| Topic | Description |
|---|---|
| Grid methods | Check the list of Grid methods |
| Grid events | Check the list of Grid events |
| Grid properties | Check the list of Grid properties |
| Grid column properties | Check the list of properties of a Grid column |
| DataCollection API | Check the API of DataCollection to work with Grid data |
| Selection API | Check the API of Selection to manage the selection of Grid cells |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with Grid.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| Custom scroll | Learn how to enable custom scroll in Grid |
| AwaitRedraw | Learn how to perform the code after the component's rendering |
Any questions left?
- Check the TreeGrid mode of the Grid widget >>> - it allows showing the nested tabular data
- Check SpreadSheet >>> - if you need functionality like Google Spreadsheets or Excel
- Check Pivot >>> - if you are interested in analyzing data from large datasets
info
Do you need more functionality? Feel free to share your suggestions in the comments below!