# Data Grid ## API reference for Material Extensions Data Grid `import { MtxGridModule } from '@ng-matero/extensions/data-grid';` ### Directives #### `MtxGrid` Selector: `[mtx-grid]` Exported as: `mtxGrid` **Properties** **Basic** | Name | Description | | ---------------------------------------- | ----------------------------------------------------------------------------- | | @Input() `columns: MtxGridColumn[]` | The grid columns defination. | | @Input() `data: any[]` | The grid data source. | | @Input() `length: number` | The length of the total number of data. Defaulted to **`0`**. | | @Input() `loading: boolean` | Whether the table loading is ended. Defaulted to **`false`**. | | @Input() `trackBy: TrackByFunction` | Tracking function that will be used to check the differences in data changes. | | @Input() `columnResizable: boolean` | Whether the column can be resized. Defaulted to **`false`**. | **Page** | Name | Description | | ----------------------------------------------- | --------------------------------------------------------------------------------------------------- | | @Input() `pageOnFront: boolean` | Whether paging the data just on front end. Defaulted to **`true`**. | | @Input() `showPaginator: boolean` | Whether show the paginator. Defaulted to **`true`**. | | @Input() `pageDisabled: boolean` | Whether the paginator is disabled. Defaulted to **`false`**. | | @Input() `showFirstLastButtons: boolean` | Whether to show the first/last buttons UI to the user. Defaulted to **`true`**. | | @Input() `pageIndex: number` | The zero-based page index of the displayed list of items. Defaulted to **`0`**. | | @Input() `pageSize: number` | Number of items to display on a page. By default set to **`10`**. | | @Input() `pageSizeOptions: number[]` | The set of provided page size options to display to the user. By default set to **`[10, 50, 100]`** | | @Input() `hidePageSize: boolean` | Whether hide the pagesize. Defaulted to **`false`**. | | @Output() `page: EventEmitter` | Event emitted when the paginator changes the page size or page index. | | @Input() `paginationTemplate: TemplateRef` | The pagination template. | **Sort** | Name | Description | | | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | @Input() `sortOnFront: boolean` | Whether sort data just on front end. Defaulted to **`true`**. | | | @Input() `sortActive: string` | The id of the most recently sorted MatSortable. | | | @Input() `sortDirection: SortDirection` | The sort direction of the currently active MatSortable. | | | @Input() `sortDisableClear: boolean` | Whether to disable the user from clearing the sort by finishing the sort direction cycle. May be overriden by the column's disable clear definition. Defaulted to **`false`**. | | | @Input() `sortDisabled: boolean` | Whether the grid sort is disabled. Defaulted to **`false`**. | | | @Input() \`sortStart: 'asc' \\ | 'desc'\` | The direction to set when an MatSortable is initially sorted. May be overriden by the column's sort definition. Defaulted to **`asc`**. | | @Output() `sortChange: EventEmitter` | Event emitted when the user changes either the active sort or sort direction. | | **Expansion** | Name | Description | | ---------------------------------------------- | ---------------------------------------------------------- | | @Input() `expandable: boolean` | Whether the row can be expanded. Defaulted to **`false`**. | | @Input() `expansionTemplate: TemplateRef` | The template of expandable row. | | @Output() `expansionChange: EventEmitter` | Event emitted when the user toggle the expandable row. | **Selection** | Name | Description | | -------------------------------------------------------------- | --------------------------------------------------------------------------- | | @Input() `multiSelectable: boolean` | Whether the user can selecte multiple row or cell. Defaulted to **`true`**. | | @Input() `rowSelectable: boolean` | Whether the row can be selectable. Defaulted to **`false`**. | | @Input() `rowSelected: any[]` | The row selected items default. Defaulted to **`[]`**. | | @Input() `hideRowSelectionCheckbox: boolean` | Whether hide the row selection checkbox. Defaulted to **`false`**. | | @Input() `rowSelectionFormatter: MtxGridRowSelectionFormatter` | The row selection formatter to set disabled and checkbox hiding. | | @Output()`rowClassFormatter: MtxGridRowClassFormatter` | The row class formatter to set class. | | @Output()`rowSelectionChange: EventEmitter` | Event emitted when the row be selected. | | @Input() `cellSelectable: boolean` | Whether the cell can be selectable. Defaulted to **`true`**. | | @Output() `cellSelectionChange: EventEmitter` | Event emitted when the cell be selected. | **Toolbar** | Name | Description | | -------------------------------------------- | -------------------------------------------------------- | | @Input() `showToolbar: boolean` | Whether show the grid toolbar. Defaulted to **`false`**. | | @Input() `toolbarTitle: string` | The toolbar title. Defaulted to **`''`**. | | @Input() `toolbarTemplate: TemplateRef` | The toolbar template. | **Column menu** | Name | Description | | | | | | | | ----------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------- | -------- | ------------- | ---- | ---------------------------------------------------------- | | @Input() `columnHideable: boolean` | Whether the column can be hiding. Defaulted to **`true`**. | | | | | | | | @Input() \`columnHideableChecked: 'show' \\ | 'hide'\` | Hide or show when column hiding checkbox be checked. Defaulted to **`'show'`**. | | | | | | | @Input() `columnMovable: boolean` | Whether the column can be moving. Defaulted to **`true`**. | | | | | | | | @Input() `columnPinnable: boolean` | Whether the column can be fixed. Defaulted to **`true`**. | | | | | | | | @Output() `columnChange: EventEmitter` | Event emitted when the column be hided or be resorted. | | | | | | | | @Input() `showColumnMenuHeader: boolean` | Whether show header of column menu. Defaulted to **`false`**. | | | | | | | | @Input() `columnMenuHeaderText: string` | The header text of column menu. Defaulted to **`'Columns Header'`** | | | | | | | | @Input() `columnMenuHeaderTemplate: TemplateRef` | The header template of column menu. | | | | | | | | @Input() `showColumnMenuFooter: boolean` | Whether show footer of column menu. Defaulted to **`false`** | | | | | | | | @Input() `columnMenuFooterText: string` | The header text of column menu. Defaulted to **`'Columns Footer'`** | | | | | | | | @Input() `columnMenuFooterTemplate: TemplateRef` | The footer template of column menu. | | | | | | | | @Input() `showColumnMenuButton: boolean` | Whether show column menu button. Defaulted to **`true`**. | | | | | | | | @Input() `columnMenuButtonText: string` | The column menu button text. Defaulted to **`''`**. | | | | | | | | @Input() \`columnMenuButtonType: 'raised' \\ | 'stroked' \\ | 'flat' \\ | 'icon' \\ | 'fab' \\ | 'mini-fab' \\ | ''\` | The column menu button type. Defaulted to **`'stroked'`**. | | @Input() `columnMenuButtonColor: string` | The column menu button color. Defaulted to **`''`**. | | | | | | | | @Input() `columnMenuButtonClass: string` | The column menu button class. Defaulted to **`''`**. | | | | | | | | @Input() `columnMenuButtonIcon: string` | The column menu button icon. Defaulted to **`''`**. | | | | | | | **Row** | Name | Description | | ---------------------------------------- | --------------------------------------------------- | | @Input() `rowHover: boolean` | Whether use hover style. Defaulted to **`false`** | | @Input() `rowStriped: boolean` | Whether use striped style. Defaulted to **`false`** | | @Output() `rowClick: EventEmitter;` | Row click event. | **Templates** | Name | Description | | | --------------------------------------------------- | --------------------- | ------------------------------------------- | | @Input() \`headerTemplate: TemplateRef \\ | MtxGridCellTemplate\` | The grid header cell template. | | @Input() \`headerExtraTemplate: TemplateRef \\ | MtxGridCellTemplate\` | The grid header cell template exclude sort. | | @Input() \`cellTemplate: TemplateRef \\ | MtxGridCellTemplate\` | The grid body cell template. | **Summary** | Name | Description | | | ----------------------------------------------- | ---------------------------------------------- | --------------------- | | @Input() `showSummary: boolean` | Whether show summary. Defaulted to **`false`** | | | @Input() \`summaryTemplate: TemplateRef \\ | MtxGridCellTemplate\` | The summary template. | **No result** | Name | Description | | --------------------------------------------- | ---------------------------------------------------------- | | @Input() `noResultText: string` | The no result text. Defaulted to **`'No records found'`**. | | @Input() `noResultTemplate: TemplateRef` | The no result template. | **Sidebar** | Name | Description | | -------------------------------------------- | ---------------------------------------------- | | @Input() `showSidebar: boolean` | Whether show sidebar. Defaulted to **`false`** | | @Input() `sidebarTemplate: TemplateRef` | The sidebar template. | **Status bar** | Name | Description | | ---------------------------------------------- | ------------------------------------------------- | | @Input() `showStatusbar: boolean` | Whether show status bar. Defaulted to **`false`** | | @Input() `statusbarTemplate: TemplateRef` | The status bar template. | ### Interfaces #### Column ```typescript 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; sortProp?: MtxGridColumnSortProp; type?: MtxGridColumnType; typeParameter?: MtxGridColumnTypeParameter; tag?: MtxGridColumnTag; buttons?: MtxGridColumnButton[]; formatter?: (rowData: any, colDef?: MtxGridColumn) => void; cellTemplate?: TemplateRef | null; showExpand?: boolean; description?: string; summary?: ((colData: any, colDef?: MtxGridColumn) => void) | string; } ``` #### Column Type ```typescript export declare type MtxGridColumnType = | 'tag' | 'button' | 'link' | 'image' | 'boolean' | 'number' | 'currency' | 'percent' | 'date'; ``` #### Column Type Parameter ```typescript export interface MtxGridColumnTypeParameter { currencyCode?: string; display?: string | boolean; digitsInfo?: string; format?: string; locale?: string; timezone?: string; } ``` #### Column Sort Properties ```typescript export interface MtxGridColumnSortProp { arrowPosition?: 'before' | 'after'; disableClear?: boolean; id?: string; start?: 'asc' | 'desc'; } ``` #### Column Button ```typescript export interface MtxGridColumnButton { type?: 'basic' | 'icon'; text?: string | Observable; icon?: string; color?: 'primary' | 'accent' | 'warn'; class?: string; click?: (record: any) => void; pop?: boolean; popTitle?: string | Observable; popDescription?: string | Observable; popOkColor?: '' | 'primary' | 'accent' | 'warn'; popOkText?: string | Observable; popCloseColor?: '' | 'primary' | 'accent' | 'warn'; popCloseText?: string | Observable; children?: MtxGridColumnButton[]; iif?: (record: any) => boolean; tooltip?: string | Observable; disabled?: boolean; } ``` #### Column Tag ```typescript export interface MtxGridColumnTag { } export interface MtxGridColumnTagValue { text?: string; color?: string; } ``` #### Row Selection Formatter ```typescript export interface MtxGridRowSelectionFormatter { disabled?: (rowData: any) => boolean; hideCheckbox?: (rowData: any) => boolean; } ``` #### Row class formatter ```typescript export interface MtxGridRowClassFormatter { [className: string]: (rowData: any, index?: number) => boolean; } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://nzbin.gitbook.io/material-extensions/data-grid.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.