Data Grid has become the most used and consulted component since the Release of the Extensions component library. At the beginning, the design of Data Grid is very simple. After some reconstruction, the quality of components has been improved.

Extensions component library: github.com/ng-matero/e…

Data Grid example: ng – matero. Making. IO/extensions /…

It has been more than two months since the Extensions Data Grid reconstruction, and I have been too busy to introduce the details of Data Grid. These days, I have reconstructed the example of the official website. The current API document has been put on Gitbook, which has not been integrated with the official website for the time being, so the domestic access will be slow. This article will introduce the use of the Extensions Data Grid and some of the better functions. As an aside, the biggest difficulty in developing a plug-in is not the implementation of the functionality, but the design of the plug-in.

What is a Data Grid?

A Data Grid is essentially a plug-in that renders tables using Data + column definitions + configuration items. This is much cleaner than writing a bunch of DOM constructs, and is one of the biggest killers in CRUD business. At present, the most fully functional Data Grid on the market is ag-Grid, and many component libraries have their own Data Grid implementations, such as Ignite UI and Kendo UI. However, these excellent plug-ins on the market are basically charged. In addition, it is difficult to customize third-party plug-ins when abnormal demands are met, which is also the original intention of my research on Data Grid.

Angular Material is flexible enough to wrap tables, but templates are still cumbersome and lack much needed functionality. The Extensions Data Grid incorporates almost all the functionality of Angular Material tables and adds many utility features.

Extensions Data Grid introduction

The Extensions Data Grid function is implemented with reference to ag-Grid and other plug-ins, and the variable and parameter names are carefully studied during the reconstruction. Currently the Extensions Data Grid has implemented the following functions:

  • Paging = Paging = Paging = Paging
  • Sorting (currently only supports single-value Sorting)
  • Sticky columns
  • Column hiding
  • Column moving
  • Checkbox Selection
  • Row Selection
  • Cell Selection (Cell selection)
  • Expandable Row Expandable row
  • Data Formatting
  • Customized Cell
  • Template (various templates)

Due to the limited space, this article mainly introduces some key functions, other functions can refer to the official website examples.

Basic usage

Official website example: Basic

Defining component parameters

<mtx-grid [data] ="list" 
          [columns] ="columns">
</mtx-grid>
Copy the code

Define data and columns

export class AppComponent {
  columns: MtxGridColumn[] = [
    { header: 'Name', field: 'name' },
    { header: 'Weight', field: 'weight' },
    { header: 'Gender', field: 'gender' },
    { header: 'Mobile', field: 'mobile' },
    { header: 'City', field: 'city'},]; list = EXAMPLE_DATA; }Copy the code

In addition, there are two main ways for Data Grid to define columns in the market:

1. JS definitions such as ag-grid

var gridOptions = {
    // define 3 columns
    columnDefs: [
        { headerName: 'Athlete'.field: 'athlete' },
        { headerName: 'Sport'.field: 'sport' },
        { headerName: 'Age'.field: 'age'}].// other grid options here...
}
Copy the code

2. Template definitions, such as Ignite UI

<igx-grid igxPreventDocumentScroll #grid1 [data] ="data | async" [height] ="'500px'" width="100%" [autoGenerate] ='false' [allowFiltering] ="true">
    <igx-column [field] ="'Category'" [width] ="'120px'"></igx-column>
    <igx-column [field] ="'Type'" [width] ="'150px'" [filterable] ='false'></igx-column>
    <igx-column [field] ="'Open Price'" [width] ="'120px'" dataType="number" [formatter] ="formatCurrency">
    </igx-column>
    <igx-column [field] ="'Price'" [width] ="'120px'" dataType="number" [formatter] ="formatCurrency"></igx-column>
</igx-grid>
Copy the code

Weighing the pros and cons, Extensions Data Grid chose the first definition method, with the following interface definition:

export interface MtxGridColumn {
  field: string; header? :string; hide? :boolean; disabled? :boolean; pinned? :'left' | 'right'; left? :string; right? :string; width? :string; resizable? :boolean; sortable? :boolean | string;
  type? :'tag' | 'button' | 'link' | 'image' | 'number' | 'currency' | 'percent' | 'boolean'; tag? : MtxGridColumnTag; buttons? : MtxGridColumnButton[]; formatter? :(rowData: any, colDef? :any) = > void; cellTemplate? : TemplateRef<any> | null; showExpand? :boolean; description? :string; i18n? :string; summary? :((colData: any, colDef? :any) = >void) | string;
}
Copy the code

The template

Templates are an extremely flexible feature of Angular components. Most good third-party components have the ability to customize templates, and in the Data Grid, templates are an essential feature. Extensions Data Grid templates have been developed to include more easy-to-use methods in addition to the basic methods.

Common methods

<mtx-grid [data] ="list"
          [columns] ="columns">
</mtx-grid>

<ng-template #statusTpl let-row let-index="index" let-col="colDef">
  <mat-slide-toggle [checked] ="row.status">Slide me!</mat-slide-toggle>
</ng-template>
Copy the code
export class AppComponent implements OnInit {
  @ViewChild('statusTpl', { static: true }) statusTpl: TemplateRef<any>;

  columns: MtxGridColumn[] = [];

  list = EXAMPLE_DATA;

  ngOnInit() {
    this.columns = [
      { header: 'Name', field: 'name' },
      { header: 'Weight', field: 'weight' },
      { header: 'Gender', field: 'gender' },
      { header: 'Mobile', field: 'mobile' },
      { header: 'City', field: 'city' },
      { header: 'Status', field: 'status', cellTemplate: this.statusTpl }, ]; }}Copy the code

Official website example: Custom Cell Template

Referring to a template instance is a common idea, but the downside is that you must write the column definition in ngOnInit and reference the custom template instance used first. It’s not very flexible.

Upgrade package

<mtx-grid [data] ="list"
          [columns] ="columns"
          [cellTemplate] ="{ city: cityTpl }">
</mtx-grid>

<ng-template #cityTpl let-row let-index="index" let-col="colDef">
  <button mat-raised-button color="primary">{{row.city}}</button>
</ng-template>
Copy the code

Example: Custom Cell Template 2

This method defines the template instance [cellTemplate]=”{city: cityTpl}” directly in the component parameter, where city is the field in the column definition. There is no more code to write.

In addition to cell templates, there are headerTemplate, summaryTemplate, toolbarTemplate, and more that can meet most of your personalized needs.

select

Official website example: Row selectable

Table row selection is a very common requirement for a wide range of purposes. Cell selection is enabled by default. [cellSelectable]=”false” can be set to disable cell selection.

[rowSelectable]=”true” enables row selection.

<mtx-grid [data] ="list"
          [columns] ="columns"
          [rowSelectable] ="rowSelectable"
          (rowSelectionChange) ="log($event)"
          (cellSelectionChange) ="log($event)">
</mtx-grid>
Copy the code

[multiSelectable]=”true” enables multiple rows. There is a detail here. You can select multiple options by holding Down CTRL and clicking, or by clicking checkBox directly. To hide checkbox, set [hideRowSelectionCheckbox]=”true”.

If you want to select rows by default when initializing the table, you simply define [rowSelected]=[…] .

Do not select

You can set checkbox to disabled or hide checkbox in either of two ways. The configuration is very simple, just filtering the data through the rowSelectionFormatter.

<mtx-grid [data] ="list"
          [columns] ="columns"
          [rowSelectable] ="true"
          [rowSelectionFormatter] ="rowSelectionFormatter">
</mtx-grid>
Copy the code
export class AppComponent {
  columns: MtxGridColumn[] = [
    { header: 'Name', field: 'name' },
    { header: 'Weight', field: 'weight' },
    { header: 'Gender', field: 'gender' },
    { header: 'Mobile', field: 'mobile' },
    { header: 'City', field: 'city'},]; list = EXAMPLE_DATA; rowSelectionFormatter: MtxGridRowSelectionFormatter = { disabled:(data) = > data.name === 'Boron',
    hideCheckbox: (data) = > data.name === 'Helium'}; }Copy the code

row

Expandable Row

Row expansion is implemented using the Angular Material table’s multiTemplateDataRows parameter, which is detailed. The Data Grid code is as follows:

Set Expandable and expansionTemplate

<mtx-grid [data] ="list"
          [columns] ="columns"
          [expandable] ="true"
          [expansionTemplate] ="expansionTpl">
</mtx-grid>

<ng-template #expansionTpl let-row>
  {{row.name}}
</ng-template>
Copy the code

Set showExpand in the column definition to determine which column to display the expansion symbol.

export class AppComponent {
  columns: MtxGridColumn[] = [
    { header: 'Name', field: 'name', showExpand: true },
    { header: 'Weight', field: 'weight' },
    { header: 'Gender', field: 'gender' },
    { header: 'Mobile', field: 'mobile' },
    { header: 'City', field: 'city'},]; list = EXAMPLE_DATA; }Copy the code

The column operation

Column Hiding & Moving

Show, hide, and sort columns are very common requirements that have been tormented countless times by product managers. Currently, the column operation UI only has the menu mode, and the sidebar UI will be added later. Horizontal column drag and drop is not supported for the time being.

Columns can be moved out of the component entirely by setting up columns, not necessarily with Data Grid integrated functionality.

conclusion

Due to space constraints, many of the Extensions Data Grid features are not covered in detail. According to the requirements I have met, the current Data Grid can cover 90% of the requirements, and there are many advanced functions under development, welcome your constructive comments. If you have problems using the component, you can submit issues on GitHub or join a discussion group to ask questions.