What is DataGrid Control?

A DataGrid is a class component that extends from the TableRepeater control. A TableRepeater control simply represents the table structure that consists of the table, the header, the body, and the footer. This control also extends from AtomRepeater control.

A DataGrid user interface control helps display the information or data in a grid-like format of rows and columns. In this UI control, you can define customized columns and sort orders for each header. A headerSort property can be used to specify the order in which columns load. We can add the desc order query by using headerSortDescending.

What are the properties of DataGrid control?

orderBy - This is the two-way data binding, to load any specific column in default order, we can set this property before the top node.

selectedItems - Gets the DataGrid's selected items as a collection.

items- Gets the items displayed in the DataGrid.

columns- This property is bound to the array which defines the header, headerSort, headerSortDescending, and labelPath as properties for const variable of type IDataGridColumn.

SelectAllColumn - Checkboxes are added to all columns in the control with this property.

One great benefit is that AtomRepeater properties can also be used here. Other than columns, all properties are bindable properties.

Code snippet of DataGrid Control?

 <DataGrid
       for="table"
       style-width="100%"
       allowMultipleSelection={true}
       items={Bind.oneWay(() => this.ViewModel.ProductList)}
       columns={columns}
                />

How to define the columns?

In the code, we define the array of objects of type IDataGridColumn.

  const columns: IDataGridColumn[] = [
            SelectAllColumn,
            {
                header: "Title",
                labelPath: (item: IProduct) => item.title
            },
            {
                header: "Brand",
                labelPath: (item: IProduct) => item.brand
            },
            {
                header: "Category",
                labelPath: (item: IProduct) => item.category
            },

        ];

We have set the columns property of DataGrid to this const property which is the type of IDataGridColumn. It provides us to select all columns if we mention the SelectAllColumn value inside the array. Adding a checkbox to each row in the "DataGrid" will let you perform single or multiple operations.

Header means the heading of the column labelPath is used to display the text headerSortDescending will sort the column in descending order.

Advantages of DataGrid Control?

• In addition to auto-generating columns, it also provides sorting properties (by default ASC) and allows setting the order in desc.
• It is easier to understand this control due to its less code approach, and the order definition and column definition are separated.
• The separation of concerns approach makes maintenance easy. -We can use the repeater control properties since this control extends TableRepeater.
• Since this control is very lightweight and is based on the latest technology, it doesn't require the installation of any additional npm packages.