Skip to main content

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

TopicDescription
Basic initializationLearn how to initialize Grid
Pagination with GridThe example shows how to initialize Grid inside Pagination
Large datasetThe example shows how Grid works with over 11000 rows loaded
Several grids with large datasetThe example shows how to initialize several grids inside one container

Loading data into Grid

TopicDescription
Loading data into GridRead how to load the initial data into Grid
Initialization with config.dataThe 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 DataCollectionThe example shows how to load data from external DataCollection
Lazy loadingThe example shows how to render data dynamically

Integration

TopicDescription
Backend integrationLearn how to connect DHTMLX Suite to a backend (Demo)
OptimusLearn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components)
React integrationLearn how to use DHTMLX Grid with React (Demo)
Angular integrationLearn how to use DHTMLX Grid with Angular (Demo)
Vue integrationLearn how to use DHTMLX Grid with Vue.js (Demo)

How to configure Grid

How to configure columns

In this section you will know how to configure Grid columns on Grid initialization.

TopicDescription
Configuring columnsLearn how to define initial structure of Grid
Configuring content alignmentLearn how to align data in a column (Example)
Frozen columnsLearn how to split grid columns into the frozen and movable parts (Example)
Hidden columnsLearn how to initialize Grid with hidden columns (Example)
Sortable columnsLearn how to make columns sortable (Example)
Resizable columnsLearn how to make columns resizable (Example)

How to configure rows

In this section you will know how to configure Grid rows on Grid initialization.

TopicDescription
Automatic adding of empty row into GridLearn how to to automatically add an empty row after the last filled row in the grid (Example)
Frozen rowsLearn 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.

TopicDescription
Configuring data formatsLearn how to display values of cells in different formats (percent, currency, date and combination with templates) (Example)
Date column and support of the Date() objectThe example shows how to use the Date() object for specifying dates

In this section you can learn how to configure the header and footer of Grid, how to configure their heights and styles.

TopicDescription
Configuring header/footerLearn how to configure a Grid header/footer (Example)
Setting the height for header and footerLearn how to set the height for rows in the header and footer of Grid (Example)
Styling header cellsLearn how to set styling to the text of header cells (Example)
Styling footer cellsLearn how to set styling to the text of footer cells (Example)

How to configure tooltips

In this section you will know how to add tooltips of the desired appearance with the necessary information, or hide them if needed.

TopicDescription
Hiding tooltipsLearn how to hide/show a tooltip on hovering over the content of a column (Example)
Adding templates for tooltipsLearn 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.

TopicDescription
Grouping cellsLearn how to specify columns and rows spans in Grid (Example)
Adding/removing spansLearn how to add, remove and get spans of rows and columns via API methods
Grouping rows and columns in the headerLearn how to specify spans for columns and rows in the Grid header (Example)

How to configure drag-n-drop

In this section you will know how to configure the drag-n-drop functionality for Grid.

TopicDescription
Drag-n-drop inside a gridLearn how to configure drag-n-drop of columns and (or) rows inside the grid
Drag-n-drop between gridsLearn how to configure drag-n-drop between grids (Example)
Drag-n-drop of multiple rowsLearn how to allow end users to drag-n-drop several rows at once
Copying of rows during drag-n-dropLearn how to copy a row to a target during drag-n-drop (Example)

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.

TopicDescription
Width and height of GridLearn how to set specific size of Grid (Example)
Auto-height for GridLearn how to configure auto-height for Grid (Example)
Adjusting columns by header, footer, data contentLearn how to make the size of columns to automatically adjust to their content (Example)
Max width of a columnLearn how to define the maximal width which can be set for a column (Example)
Min width of a columnLearn how to define the minimum width which can be set for a column (Example)
Auto-width for columnsLearn how to configure auto-width for columns (Example)
Auto-height for rowsLearn how to configure auto-height for rows (Example)
Row heightLearn 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.

TopicDescription
Row context menu with custom logicThe example shows how to add a context menu with custom logic for the grid rows
Adding HTML content into cellsLearn how to add HTML content (for example, an image, an icon) into data of Grid cells (Example)
Adding a template to cellsLearn how to customize the content of cells (Example)
Handling events in templateLearn how to assign event handlers to HTML elements of a custom template of Grid cells (Example)
Styling GridLearn how to customize a grid (Example)
Styling cellsLearn how to style the necessary cells (Example)
Marking cells with colorsLearn how to apply conditional formatting and mark cells in the grid (Example 1, Example 2)
Styling rowsLearn how to style the necessary rows (Example 1, Example 2)
Styling selectionThe example shows how to style the selection in the grid
List of CSS classesA set of CSS classes provided by the DHTMLX library

How to work with columns and rows

In this section you will know 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

TopicDescription
Adding / removing columnsLearn how to add/remove columns
Adding / removing rowsLearn how to add/remove rows (Example)

Getting configuration of a cell/column

TopicDescription
Getting configuration of a columnLearn how to get an object with configuration of the specified column
Getting configuration of a cellLearn how to get the current coordinates and size of a cell

Showing/hiding columns and rows

TopicDescription
Showing / hiding a rowLearn how to show and hide a row in Grid (Example)
Checking visibility of a rowLearn how to check whether a row is hidden
Hiding columnsLearn how to make a column hidden on Grid initialization (Example)
Showing / hiding a columnLearn how to show and hide a column in Grid (Example)
Checking visibility of a columnLearn how to check whether a column is hidden (Example)

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.

TopicDescription
Enabling/disabling editingRead how to enable/disable editing of the whole Grid or its separate columns
Editing with different editorsLearn how to specify the type of the editor for editing the cells (Example), (Example 2), (Example 3)
Editing with a colorpicker editorThe example shows how to implement a colorpicker editor for editing cells
Inline editingThe example allows you to try out inline editing in Grid
Editing data using the right panelThe example shows how to implement editing in Grid via the right panel
Editing data using a modal windowThe example shows how to implement editing in Grid via the modal window
Editing of a specific cellLearn how to enable editing of a cell (Example)
Grid and Chart. Edit Grid to see the changes in ChartCheck the example to see how the chart changes after you edit data in the grid
Keyboard navigationLearn 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.

TopicDescription
Sorting dataLearn how to sort data in the grid (Example)
Sortable columnsLearn how to define whether a column should be sortable (Example)
Getting sorting stateLearn 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.

TopicDescription
Setting the type of a filter in the header/footerLearn how to specify the type of the filter in the header/footer of a Grid column (Example)
Filtering dataLearn how to filter grid data by the specified criteria (Example 1, Example 2)
Customizing filters in the header/footerLearn how to add a custom function with your own logic for filtering data in a Grid column (Example)
Getting the header filterLearn how to get and use an object of the header filter (Example)

How to work with selection

In this section you will find the ways of work with selection functionality.

TopicDescription
Configuring selectionLearn how to configure the mode of selection of Grid elements (Example)
Enabling multiselectionLearn how to enable multi-row/multi-cell selection in Grid (Example)
Working with selectionLearn how to enable/disable selection, set selection to cells, remove selection, and get the object of a selected cell (Example)
Selection APILearn how to use the API of Selection to manage the selection of Grid cells
Keyboard navigationLearn how to enable key navigation that allows moving the selection between cells (Example)

How to scroll Grid

In this section you will learn how to scroll Grid to the necessary position.

TopicDescription
Controlling scroll behaviorLearn how to scroll the grid content to exact position (Example)
Keyboard navigationLearn how to enable key navigation in Grid (Example)

How to export Grid

In this section you will know how to export Grid to different formats.

TopicDescription
Exporting Grid to XLSX, CSV, PNG. or PDF formatLearn how to export Grid to the necessary format (Example 1, Example 2)

How to work with Grid events

This section explains how to work with Grid events.

TopicDescription
Event basic rulesLearn basic rules on how to work with events
Event handlingLearn how to attach, detach, or call the Grid events (Example)

API reference

In this section you can find out corresponding references of Grid API.

TopicDescription
Grid methodsCheck the list of Grid methods
Grid eventsCheck the list of Grid events
Grid propertiesCheck the list of Grid properties
Grid column propertiesCheck the list of properties of a Grid column
DataCollection APICheck the API of DataCollection to work with Grid data
Selection APICheck 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.

TopicDescription
Touch supportLearn how to work with touch support
TypeScript supportLearn how to work with TypeScript
Custom scrollLearn how to enable custom scroll in Grid
AwaitRedrawLearn how to perform the code after the component’s rendering

Any questions left?


info

Do you need more functionality? Feel free to share your suggestions in the comments below!