DataGrid Column Presets

Overview

JavaScript Gantt chart consists of two parts: TimeLine, that contains visualized information, and DataGrid, that displays strings' numbers and names along with additional information. In this article we will describe how information in the dataGrid columns can be formatted using presets and how to create a custom column formatter.

Column Formatting

DataGrid columns can contain different types of information. You can format each column according to your needs and preferences. Use setColumnFormat() to define an information field in your dataset or a preset for data formatting.

The object for column customization can contain three parameters: "width", "textStyle" and "formatter". The "width" parameter sets custom column width, "textStyle" adjusts visual appearance of the text in the column and "formatter" is a function for adjusting the data in each cell of the column.

Note: If you want to use same formatter for several columns you can create custom function beyond the chart dataGrid scope and use it wherever you want.