> For the complete documentation index, see [llms.txt](https://nzbin.gitbook.io/material-extensions/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nzbin.gitbook.io/material-extensions/data-grid.md). # 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; } ```