{"id":25472968,"url":"https://github.com/holographic-blockchain/ngx-simple-material-table","last_synced_at":"2026-01-16T09:52:33.419Z","repository":{"id":75011711,"uuid":"592926200","full_name":"holographic-blockchain/ngx-simple-material-table","owner":"holographic-blockchain","description":"Angular library to simplify usage of the Angular Material table component.","archived":false,"fork":false,"pushed_at":"2025-01-14T23:53:47.000Z","size":1413,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-27T15:44:04.685Z","etag":null,"topics":["angular","material","table"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/holographic-blockchain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-24T20:39:43.000Z","updated_at":"2025-07-24T14:36:58.000Z","dependencies_parsed_at":"2024-06-16T20:28:02.547Z","dependency_job_id":"24113047-2469-4b93-aa67-6df35f2f4b73","html_url":"https://github.com/holographic-blockchain/ngx-simple-material-table","commit_stats":{"total_commits":48,"total_committers":1,"mean_commits":48.0,"dds":0.0,"last_synced_commit":"18a15a6062e6c77501c372fcf8fcc819d7e78b86"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/holographic-blockchain/ngx-simple-material-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holographic-blockchain%2Fngx-simple-material-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holographic-blockchain%2Fngx-simple-material-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holographic-blockchain%2Fngx-simple-material-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holographic-blockchain%2Fngx-simple-material-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/holographic-blockchain","download_url":"https://codeload.github.com/holographic-blockchain/ngx-simple-material-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/holographic-blockchain%2Fngx-simple-material-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","material","table"],"created_at":"2025-02-18T10:02:05.964Z","updated_at":"2026-01-16T09:52:33.408Z","avatar_url":"https://github.com/holographic-blockchain.png","language":"HTML","funding_links":[],"categories":["Recently Updated","Table of contents"],"sub_categories":["[Feb 16, 2025](/content/2025/02/16/README.md)","Third Party Components"],"readme":"# ngx-simple-material-table\n\nAn Angular library which wraps the Angular Material table component in an easier to use syntax. This is designed to be used\nin place of the Material table, so it supports many of the underlying Material objects for functionality instead of\ncreating its own. However, it is not intended as a 100% functional replacement, so more complex cases may still need to\nuse the Material table component. See \n[https://material.angular.io/components/table/overview](https://material.angular.io/components/table/overview) for more info.\n\n## Usage Overview\n\nFor a basic table, the following markup will render the four columns:\n\n    \u003chb-mat-table [tableData]=\"yourData\"\u003e\n        \u003chb-mat-table-column name=\"firstName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003c/hb-mat-table\u003e\n\nIf your data source is a MatTableDataSource (or a compatible DataSource implementation) then the table will automatically\nhave sorting enabled. Additionally, pagination and row selection are also available using the existing Material\ncomponents.\n\nFor additional and more detailed examples than those below, download this repository and run the \nworkspaces/examples application. This readme only contains more common examples.\n\n- [Setup](#setup)\n- [Column Options](#column-options)\n- [Table Options](#table-options)\n- [Styling](#styling)\n- [API](#api)\n\n## Release Notes\n\n### Release 18.x\n\n- Support Angular 18.\n\n### Release 17.x\n\n- Added support for an initial sort definition.\n\n### Release 16.x\n\n- Added support for 'percent' column data type\n- Added support for 'tableClass' and 'columnClass' properties to add CSS classes directly to the table or cell elements\n\n### Release 15.x\n\nThe initial release.\n\n## Setup\n\nYour application will need to include the following packages in its package.json file:\n\n- @angular/animations\n- @angular/cdk\n- @angular/common\n- @angular/core\n- @angular/material\n- ngx-simple-material-table\n\nIn your module, you will need to import the following modules:\n\n- import { MatPaginatorModule } from '@angular/material/paginator';\n- import { MatTableModule } from '@angular/material/table';\n- import { MatSortModule } from '@angular/material/sort'; \n- import { NgxSimpleMaterialTableModule } from 'ngx-simple-material-table';\n\n## Column Options\n\nThe 'hb-mat-table-column' element will define a column for the table. A basic use looks like this:\n\n    \u003chb-mat-table-column name=\"firstName\"\u003e\u003c/hb-mat-table-column\u003e\n\nThis will create a column with header text of 'First Name' and simply output the value of the associated property\n('firstName' in this case) from your table data.\n\n### DataType and DataFormat\n\nA column can have a 'dataType'. The options are: 'string' | 'number' | 'date' | 'percent'. The default is 'string', which does\nnothing extra. The other data types will have their output sent to the appropriate Angular pipe - the DecimalPipe\nfor 'number', the DatePipe for 'date', and the PercentPipe for 'percent'. If you are setting the Angular LOCALE_ID globally, \nit will automatically be applied. \n\nWhen using one of the non-string data types, you can also specify a 'dataFormat' value. This will get passed to\nthe pipe. For a number, this is the 'digitsInfo' parameter of the DecimalPipe. For a date, this is the 'format'\nparameter of the DatePipe. For a percent, this is the 'digitsInfo' parameter of the PercentPipe. The 'dataFormat' property is optional.\n\n| DataType | Corresponding Pipe | Pipe Parameter for 'dataFormat' | Pipe Reference |\n| --- | --- | --- | --- |\n| string | none | | |\n| number | DecimalPipe | digitsInfo | [https://angular.io/api/common/DecimalPipe](https://angular.io/api/common/DecimalPipe) |\n| date | DatePipe | format | [https://angular.io/api/common/DatePipe](https://angular.io/api/common/DatePipe) |\n| percent | PercentPipe | digitsInfo | [https://angular.io/api/common/PercentPipe](https://angular.io/api/common/PercentPipe) |\n\n    \u003chb-mat-table-column name=\"myNumber\" dataType=\"number\" dataFormat=\"1.1-1\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003chb-mat-table-column name=\"myDefaultNumber\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003chb-mat-table-column name=\"myDate\" dataType=\"date\" dataFormat=\"medium\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003chb-mat-table-column name=\"myDefaultDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003chb-mat-table-column name=\"myDecimalNumber\" dataType=\"percent\" dataFormat=\"1.1-1\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003chb-mat-table-column name=\"myDefaultDecimalNumber\" dataType=\"percent\"\u003e\u003c/hb-mat-table-column\u003e\n\n### Captions\n\nBy default, the name of the column will be used for the column header caption. The first letter will be\ncapitalized, and every subsequent capital letter will start a new word. So a column name of 'firstName' will\nhave a header of 'First Name'. To override this behavior, add the 'caption' attribute with the desired text.\n\n    \u003chb-mat-table-column name=\"firstName\" caption=\"Friendly Name\"\u003e\u003c/hb-mat-table-column\u003e\n\n### Custom Cell Content\n\nIf the cell should display something other than a single property in your object, you can supply a custom\ntemplate.\n\n    \u003chb-mat-table-column name=\"derived\"\u003e\n        \u003cdiv *hbMatTableColumnTemplate=\"let data\"\u003e\n            {{ data.myString }} :: {{ data.myNumber | number }}\n        \u003c/div\u003e\n    \u003c/hb-mat-table-column\u003e\n\nThe 'data' variable will be the row's data instance, so you have access to all the properties of the specific row.\nNote that the column's name, 'derived' in this example, does not need to correspond to an actual property on the\ndata object.\n\n### Sorting\n\nSorting is enabled by default. To disable sorting on a specific column, set the 'canSort' property to false.\n\n    \u003chb-mat-table-column name=\"firstName\" [canSort]=\"false\"\u003e\u003c/hb-mat-table-column\u003e\n\n### Fixed Columns\n\nTo make a column sticky, add the 'isStickyStart' or 'isStickyEnd' property to the column.\n\n        \u003chb-mat-table-column name=\"firstName\" [isStickyStart]=\"true\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\" [isStickyEnd]=\"true\"\u003e\u003c/hb-mat-table-column\u003e\n\n### Footer Row\n\nA footer row can be defined in a similar manner to the custom cell content. A footer template can be added\nto each column. Note the table option 'showFooter' which also needs to be set to display a footer row.\n\n    \u003chb-mat-table [tableData]=\"yourData\"\n                  [showFooter]=\"true\u003e\n        \u003chb-mat-table-column name=\"firstName\"\u003e\n            \u003cdiv *hbMatTableFooterTemplate\u003eAverage ::\u003c/div\u003e\n        \u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\n            \u003cdiv *hbMatTableFooterTemplate\u003e{{ avgAge | number }}\u003c/div\u003e\n        \u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003c/hb-mat-table\u003e\n\nThe footer template does not have access to any specific table data through a variable. You will need to defined\nyour own variable or method in the consuming component.\n\n## Table Options\n\nThe table-level element is 'hb-mat-table'. The following are the available table-level options.\n\n### Sticky Header Row\n\nTo make the header row sticky, add the 'isHeaderSticky' property to the table.\n\n    \u003chb-mat-table [tableData]=\"yourData\"\n                  [isHeaderSticky]=\"true\u003e\n\n### Row Selection\n\nSingle- and multi-row selection is supported. In both cases, a column is automatically added named 'select' and\nwill display a Material checkbox. There are four properties dealing with row selection:\n\n- selectionMode - 'none' | 'single' | 'multiple'\n- selectionColor - 'primary' | 'accent' | 'warn' - These are the Material themes. When not set it will take your default.\n- rowKey - By default, the entire row's data will be the key. If you want the key to be more specific, you\ncan specify one or more column names as the row key.\n- selection - This gives you access to the SelectionModel to see what is selected. This is accessible through\nTypeScript.\n\nThis is an example using all three of the inputs:\n\n    \u003chb-mat-table #myTable\n                  [tableData]=\"yourData\"\n                  [selectionMode]=\"single\"\n                  [selectionColor]=\"primary\"\n                  [rowKey]=\"['userId']\"\u003e\n        \u003chb-mat-table-column name=\"firstName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003c/hb-mat-table\u003e\n\nTo access the selection(s), define a view child:\n\n    @ViewChild('myTable') myTable: HbMatTable;\n\nYou can then access the selection property:\n\n    myTable.selection.selected\n\nNote that the selected value will be an array of row keys which have been stringified. If you wish to access \nthe properties, you will first need to parse it into an object:\n\n    JSON.parse(myTable.selection.selected)[0].userId\n\nFor more details on the SelectionModel, view [https://material.angular.io/cdk/collections/overview](https://material.angular.io/cdk/collections/overview).\n\n### Pagination\n\nThe Materials paginator component is integrated into this. You can include the paginator element as part of the table\nelement, or place it outside if you need more control over the layout. Note that this will only work if you are using a\nMatTableDataSource or other compatible object.\n\n    \u003chb-mat-table [tableData]=\"yourData\"\u003e\n        \u003chb-mat-table-column name=\"firstName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003cmat-paginator [pageSizeOptions]=\"[5, 10, 25]\"\u003e\u003c/mat-paginator\u003e\n    \u003c/hb-mat-table\u003e\n\nWhen the paginator is placed outside the table element, you will also need to manually attached the paginator to\nthe data source.\n\n    \u003chb-mat-table [tableData]=\"yourData\"\u003e\n        \u003chb-mat-table-column name=\"firstName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003c/hb-mat-table\u003e\n    \u003cmat-paginator #paginator [pageSizeOptions]=\"[5, 10, 25]\"\u003e\u003c/mat-paginator\u003e\n\n    @ViewChild('paginator') matPaginator!: MatPaginator;\n\n    ngAfterViewInit(): void {\n        this.yourData.paginator = this.matPaginator;\n    }\n\nFor more information on the Material paginator, see [https://material.angular.io/components/paginator/overview](https://material.angular.io/components/paginator/overview).\n\n### Column Display\n\nBy default, all columns defined will be displayed, and be displayed in the same order. If you want to only display some columns,\nor change the order of the columns, set the 'displayedColumns' properties. This is an array of strings of column names.\n\n    \u003chb-mat-table [tableData]=\"yourData\"\n                  [displayedColumns]=\"yourColumns\"\u003e\n        \u003chb-mat-table-column name=\"firstName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003c/hb-mat-table\u003e\n\nIn the TypeScript:\n\n    yourColumns: string[] = ['lastName', 'firstName', 'birthDate'];\n\nThis example will not render the 'age' column, and will display the 'lastName' column before the 'firstName' column.\n\n### Filtering\n\nData filtering isn't built-in, but you can use the same template as given by the Material docs. Like other functionality, this\nassumes you are using a MatTableDataSource (or other compatible DataSource).\n\nIn this example we are simply putting a text box above the table. A user can type into the text box to filter all columns.\n\n    \u003cmat-form-field\u003e\n        \u003cmat-label\u003eFilter Data\u003c/mat-label\u003e\n        \u003cinput matInput type=\"text\" [(ngModel)]=\"filterText\" /\u003e\n    \u003c/mat-form-field\u003e\n    \u003chb-mat-table [tableData]=\"yourData\"\u003e\n        \u003chb-mat-table-column name=\"firstName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"lastName\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"age\" dataType=\"number\"\u003e\u003c/hb-mat-table-column\u003e\n        \u003chb-mat-table-column name=\"birthDate\" dataType=\"date\"\u003e\u003c/hb-mat-table-column\u003e\n    \u003c/hb-mat-table\u003e\n\nIn the TypeScript, hook up the filter text to the data source:\n\n    private _filterText: string = '';\n    get filterText(): string {\n        return this._filterText;\n    }\n    set filterText(value: string) {\n        this._filterText = value;\n        this.yourData.filter = value;\n    }\n\n### Sorting\n\nSorting is enabled by default. To disable sorting on all columns, set the 'canSort' property to false.\n\n    \u003chb-mat-table [tableData]=\"yourData\"\n                  [canSort]=\"false\"\u003e\n        ...\n    \u003c/hb-mat-table\u003e\n\nTo apply an initial sort to the table's data add an hb-mat-table-sort element to the table.\n\n    \u003chb-mat-table [tableData]=\"yourData\"\u003e\n        ...\n        \u003chb-mat-table-sort\u003e\n            \u003chb-mat-table-sort-column name=\"theColumnName\" /\u003e\n        \u003c/hb-mat-table-sort\u003e\n    \u003c/hb-mat-table\u003e\n\nAn optional 'direction' attribute can also be specified ('asc' or 'desc').\n\n## Stying\n\nThe Material table will add many of its own CSS classes to the various table elements. These can be used to define a global\nstyle for all your tables. If you need your tables to have different looks, or be themeable, you have two options:\n\n- Adding a class directly to the hb-mat-table element\n- Using the tableClass and columnClass properties\n\nIn both cases, if you define your styles in your component, you will need to set the encapsulation to None.\n\n    @Component({\n        ...\n        encapsulation: ViewEncapsulation.None,\n    })\n\nIf you do this, it is strongly recommended to have a more specific selector so that your styles will only apply to that\none component. \n\nIf you define your styles in your global stylesheet(s), then you will not need to modify your component's encapsulation.\n\n\n### Adding a class directly to the hb-mat-table element\n\nWhen setting the class attribute on the hb-mat-table element, it will be included in the rendered HTML. The table itself\nwill be directly underneath the component. If you add a 'my-class' class to the component, this selector will not work:\n\n    table.my-class\n\nIt should instead be defined like this:\n\n    .my-class table\n\n### Using the tableClass and columnClass properties\n\nIf you are mixing this component with direct usage of the Material table, you may want to add the classes directly to the tables\nor columns so your global styles are easier to maintain. To do this, use the 'tableClass' property on the hb-mat-table component\nor the 'columnClass' property on the hb-mat-table-column component. The 'tableClass' property value will be added to the table's\n'class' attribute, and the 'columnClass' property value will be added to that column's th and td (both body and footer) elements.\n\n## API\n\nThe following defines the objects available.\n\n### HbMatTable\n\nThe primary element when defining a table.\n\n#### Input Parameters\n\n| Name | Data Type | Description |\n| --- | --- | --- |\n| canSort | boolean | Table-level flag to enable/disable sorting. Both this property and the column's canSort must be true to enable sorting on a column. Default is true. |\n| displayedColumns | string[] | Which columns should be rendered. These should correspond to the names in the hb-mat-table-column tags. When not defined, will render all columns. |\n| isHeaderSticky | boolean | Indicates if the header row is sticky. Default is false. |\n| rowKey | string[] | The data's property names; when undefined, uses the entire row value as the key. |\n| selectionColor | HbMatTableSelectionColor | The color of the row selection checkbox. When not set will simply use the default material checkbox color set by the application. |\n| selectionMode | HbMatTableSelectionMode | The table's selection mode: none, single or multiple. Default is 'none'. |\n| showFooter | boolean | Indicates if the footer row will be rendered. Default is false. |\n| tableClass | string | The CSS class value which should be applied directly to the table element. |\n| tableData | any | The data used to populate the table. |\n\n#### Properties\n\n| Name | Data Type | Description |\n| --- | --- | --- |\n| table | MatTable | The MatTable instance associated with this table. Available starting in the AfterViewInit lifecycle method. |\n| sort | MatSort | The MatSort instance associated with this table. This will only be set if canSort is true. Available starting in the AfterViewInit lifecycle method. |\n| selection | SelectionModel | The selection model used with row selection. Use to get or set the currently selected row(s). See [https://material.angular.io/cdk/collections/overview#selectionmodel](https://material.angular.io/cdk/collections/overview#selectionmodel). |\n\n#### Types\n\n| Name | Description | Values |\n| --- | --- | --- |\n| HbMatTableSelectionMode | Defines the selection mode of the table. | 'none' \u0026#124; 'single' \u0026#124; 'multiple' |\n| HbMatTableSelectionColor | Defines the theme of the selection checkbox. | 'primary' \u0026#124; 'accent' \u0026#124; 'warn' |\n\n### HbMatTableColumn\n\nDefines a single column.\n\n#### Input Parameters\n\n| Name | Data Type | Description |\n| --- | --- | --- |\n| canSort | boolean | Indicates if this column can be sorted. The table-level canSort property must also be true. Default is true. |\n| caption | string | A custom caption for the column. Otherwise will create the caption from the name property. |\n| columnClass | string | The CSS class value which should be applied directly to the cell elements. Will be applied to header, body and footer. |\n| dataFormat | string | The custom format to display the data. For 'number' data types, this is the 'digitsInfo' parameter passed to the DecimalPipe. For 'date' data types, this is the 'format' parameter for the DatePipe. |\n| dataType | HbMatTableColumnDataType | The general type of data contained by the column. Default is 'string'. |\n| isStickyEnd | boolean | Indicates if this column should be sticky and located at the end of the columns. |\n| isStickyStart | boolean | Indicates if this column should be sticky and located at the start of the columns. Default is false. |\n| name | string | The name of the column. By default, the table data property with the same name will be displayed. |\n\n#### Types\n\n| Name | Description | Values |\n| --- | --- | --- |\n| HbMatTableColumnDataType | The data type of column. | 'string' \u0026#124; 'number' \u0026#124; 'date' \u0026#124; 'percent' |\n\n### HbMatTableSort\n\nAn object containing a collection of HbMatTableSortColumns. As the Material sort components only allow for a single-column sort,\nonly the first column defined will be processed.\n\n### HbMatTableSortColumn\n\nDefines a single column's initial sort definition.\n\n#### Input Parameters\n\n| Name | Data Type | Description |\n| --- | --- | --- |\n| name | string | The name of the column. This should match the name property of the HbMatTableColumn element. |\n| direction | HbMatTableSortColumnDirection | Which direction to sort, asc or desc. Defaults to asc. |\n\n#### Types\n\n| Name | Description | Values |\n| --- | --- | --- |\n| HbMatTableSortColumnDirection | Defines the sort direction to be applied. | 'asc' \u0026#124; 'desc' |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholographic-blockchain%2Fngx-simple-material-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fholographic-blockchain%2Fngx-simple-material-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fholographic-blockchain%2Fngx-simple-material-table/lists"}