{"id":28138019,"url":"https://github.com/BePo65/mat-datatable","last_synced_at":"2025-05-14T17:05:05.135Z","repository":{"id":122982341,"uuid":"589131549","full_name":"BePo65/mat-datatable","owner":"BePo65","description":"A simple replacement for the ngx-datatable package using Angular Material","archived":false,"fork":false,"pushed_at":"2025-05-02T09:30:27.000Z","size":6726,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-02T10:36:23.827Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/BePo65.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2023-01-15T06:45:01.000Z","updated_at":"2025-05-02T09:29:13.000Z","dependencies_parsed_at":"2024-02-26T11:47:04.393Z","dependency_job_id":"082db39e-2b21-4fb3-9970-49b82aac0f94","html_url":"https://github.com/BePo65/mat-datatable","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BePo65%2Fmat-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BePo65%2Fmat-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BePo65%2Fmat-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BePo65%2Fmat-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BePo65","download_url":"https://codeload.github.com/BePo65/mat-datatable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254190396,"owners_count":22029632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-05-14T17:02:14.502Z","updated_at":"2025-05-14T17:05:05.127Z","avatar_url":"https://github.com/BePo65.png","language":"TypeScript","readme":"\u003ca name=\"top\"\u003e\u003c/a\u003e\n\n# Mat-Datatable\n\nA simple data table with virtual scrolling using Angular Material.\n\n![Version](https://img.shields.io/badge/version-17.2.8-blue.svg?cacheSeconds=2592000)\n[![License](https://img.shields.io/badge/License-MIT-yellow.svg)]\n![Angular version](https://img.shields.io/github/package-json/dependency-version/bepo65/mat-datatable/@angular/core?color=red\u0026label=Angular\u0026logo=angular\u0026logoColor=red)\n![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/bepo65/mat-datatable/@angular/material?color=red\u0026label=Angular-Material\u0026logo=angular\u0026logoColor=red)\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#embed-mat-datatable-in-your-project\"\u003eEmbed Mat-Datatable In Your Project\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#used-assets\"\u003eUsed Assets\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#mat-datatable-demo\"\u003eMat-Datatable Demo\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#api-reference\"\u003eAPI Reference\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#classes-api\"\u003eClasses\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#interfaces-api\"\u003eInterfaces\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#type-aliases-api\"\u003eType Aliases\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#api-testing-harnesses\"\u003eAPI Testing Harnesses\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#classes-api-testing\"\u003eClasses\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#interfaces-api-testing\"\u003eInterfaces\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#hints-on-possible-extensions\"\u003eHints On Possible Extensions\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#changelog\"\u003eChangelog\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#hints\"\u003eHints\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n## About The Project\n\nThis project extends 'angular material table' so that it can be used as a replacement for [ngx-datatable](https://github.com/swimlane/ngx-datatable) in one of my projects. Unluckily ngx-datatable seems to be dead as it is still on angular v12 and an update to a more recent angular version is not in sight.\n\nNat-Datatable implements a table with virtual scrolling, sorting and filtering. Only a minimal set of the functionality of ngx-datatable is implemented.\n\n![Screenshot](assets/screenshot.jpg \"Screenshot of the demo page\")\n\nTry out the [live demo](https://bepo65.github.io/mat-datatable/).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n## Getting Started\n\nTo use this package in your project just follow these simple steps.\n\n### Prerequisites\n\nThe package can be used in Angular apps with Angular Material installed.\n\n### Installation\n\nInstall the package from npmjs\n   ```sh\n   npm install @bepo65/mat-datatable\n   ```\n\n### Embed Mat-Datatable In Your Project\n\nConfigure your angular application module (e.g: app.module.ts):\n```ts\n...\nimport { MatDatatableModule } from 'mat-datatable';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    MatDatatableModule\n  ]\n})\n```\n\nAdd Mat-Datatable to your html file (e.g: app.component.html):\n```html\n\u003cdiv class=\"content-table\"\u003e\n  \u003cmat-datatable #datatable\n    [columnDefinitions]=\"columnDefinitions\"\n    [displayedColumns]=\"displayedColumns\"\n    [dataStoreProvider]=\"dataStore\"\n    [trackBy]=\"trackBy\"\u003e\n    loading...\n  \u003c/mat-datatable\u003e\n\u003c/div\u003e\n```\n\nThe height of the element containing the mat-datatable must be set explicitly (e.g: app.component.scss):\n```css\n.content-table {\n  height: 400px;\n  margin: 0 1em;\n  overflow: auto;\n}\n```\n\nSome properties of mat-datatable must be configured in the component class (e,g, app.component.ts):\n```ts\nexport class AppComponent {\n  ...\n    protected dataStore = new MyTableDataStore\u003cMyTableItem\u003e();\n    protected columnDefinitions: MatColumnDefinition\u003cMyTableItem\u003e[] = [\n      {\n        columnId: 'id',\n        header: 'ID',\n        cell: (row: DemoTableItem) =\u003e row?.userId?.toString(),\n        footer: 'id'\n      },\n      {\n        columnId: 'name',\n        sortable: true,\n        resizable: true,\n        header: 'Name',\n        cell: (row: DemoTableItem) =\u003e row?.firstName,\n        footer: 'name'\n      }\n\n    ];\n    protected displayedColumns: string[] = ['id', 'name'];\n\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USED ASSETS --\u003e\n## Used Assets\n\nThe component is based on Angular Material and uses [Google Fonts](https://fonts.google.com/specimen/Roboto) and the [Google Material Icons](https://google.github.io/material-design-icons/#icon-font-for-the-web) font.\nBoth fonts are part of the project and not fetched via https.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- MAT-DATATABLE DEMO --\u003e\n## Mat-Datatable Demo\n\nDemo project to show all features of Mat-Datatable.\n\n```\ngit clone git@github.com:BePo65/mat-datatable.git\ncd mat-datatable\nnpm start\n```\n\nNavigate to http://localhost:4200\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- API REFERENCE --\u003e\n## API Reference\n\n`import { MatDatatable } from '@bepo65/mat-datatable';`\n\n\u003ca id=\"classes-api\"\u003e\u003c/a\u003e\n\n### Classes\n\n#### **MatDatatable**\n\nComponent to create an angular material table based datatable.\nThe component is generic; the given type is used to define the object for the row data.\n\n##### **Properties**\n\n| Name | Description |\n|------|-------------|\n| `@Input() columnDefinitions: MatColumnDefinition\u003cT\u003e[]` | The definition of the columns used in the table. The order of the definitions needs not to correspond to the order of the columns in the table. Default value: `[]`. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `@Input() displayedColumns: string[]` | A list with the names of the columns in the table. The array contains the 'columnId' of the corresponding column definition. Default value: `[]`. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `@Input() rowSelectionMode: RowSelectionType` | The type of row selection. Default value: `'none'`. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `@Input() dataStoreProvider: DataStoreProvider\u003cT\u003e` | An object that connects the mat-datatable with the data source. The object must be the instance of a class implementing the DataStoreProvider interface. Default value: `new EmptyDataStoreProvider\u003cT\u003e`. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `@Input() trackBy(): TrackByFunction\u003cT\u003e` | A function that returns a value that identifies a single row. Default value: `(index: number, item: T) =\u003e JSON.stringify(item)`. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| withFooter: boolean | Whether the table has a footer row. Default value: `true`. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `@Output() rowClick: EventEmitter\u003cT\u003e` | Emitted when a row is clicked. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| @Output() rowSelectionChange: EventEmitter\u003cT[]\u003e | Emitted when the list of selected rows changes. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `@Output() sortChange: EventEmitter\u003cMatSortDefinition[]\u003e` | Emitted when the sort definition changes. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `firstVisibleIndexChanged: Observable\u003cnumber\u003e` | Emitted when the index of the first visible row changes. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `totalRowsChanged: Observable\u003cnumber\u003e` | Emitted when the total number of rows in the datastore changes (does not depend on any active filter). |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `filteredRowsChanged: Observable\u003cnumber\u003e` | Emitted when the number of filtered rows changes. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `activatedRow: T \\| undefined` | Marks a row as 'active'. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `selectedRows: T[]` | Marks rows as 'selected'. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `sortDefinitions: MatSortDefinition[]` | Gets / sets the current sort definition. |\n| | |\n\n| Name | Description |\n|------|-------------|\n| `filterDefinitions: FieldFilterDefinition\u003cT\u003e[]` | Gets / sets the current filter definition. |\n| | |\n\n##### **Methods**\n\n| | |\n|------|-------------|\n| `scrollToRow` | Scrolls to the given row. |\n| **Parameters** |\n| row: T | Row to show on the top of the current viewport. |\n| | |\n\n| | |\n|------|-------------|\n| `reloadTable` | Reloads the rows of the table. |\n| | |\n\n\u003ca id=\"interfaces-api\"\u003e\u003c/a\u003e\n\n### Interfaces\n\n#### DataStoreProvider\n\nInterface for a component that fetches data from the datastore respecting sorting and filtering.\nThe component is generic; the given type is used to define the object for the row data.\n\n##### **Methods**\n\n| | |\n|------|-------------|\n| `getPagedData` | Fetches data from the datastore respecting sorting and filtering. |\n| **Parameters** |\n| rowsRange: RequestRowsRange | The range of rows to fetch. |\n| sorts: FieldSortDefinition\u003cT\u003e[] | The sort definitions to use. |\n| filters: FieldFilterDefinition\u003cT\u003e[] | The filter definitions to use. |\n| **Returns** |\n| Observable\u003cPage\u003cT\u003e\u003e | Emitting fetched data from the datastore. |\n| | |\n\n#### MatColumnDefinition\n\nInterface for the definition of a single table column.\n\n##### **Properties**\n\n| Name | Description |\n|------|-------------|\n| `columnId: string` | The ID of the column. |\n| `sortable: boolean` | Whether this column can be used for sorting. By default a column is not sortable. |\n| `resizable: boolean` | Whether this column can be resized. By default a column is not resizable. |\n| `header: string` | The text in the header row of a column. |\n| `headerAlignment: ColumnAlignmentType` | The alignment of the header row of a column. |\n| `cell: (element: TRowData) =\u003e string` | The function to get the content of a cell. |\n| `cellAlignment: ColumnAlignmentType` | The alignment of a data row in a column. |\n| `width: string` | The width of the column. |\n| `tooltip: (element: TRowData) =\u003e string` | The function to get the tooltip for a cell. |\n| `showAsMailtoLink: boolean` | Whether this cell should be shown a 'mailto' link. By default a column is not shown as mailto link. |\n| `showAsSingleLine: boolean` | Whether this cell should be truncated to a single line. By default multiline text in a column is not shown as a single line. |\n| `footer: string` | The text in the footer row of a column. |\n| `footerAlignment: ColumnAlignmentType` | The alignment of the footer row of a column. |\n| `footerColumnSpan: number` | The number of columns a footer should span. By default a footer spans 1 column. |\n| | |\n\n#### MatSortDefinition\n\nInterface for the definition of the sorting of 1 table column.\n\n##### **Properties**\n\n| Name | Description |\n|------|-------------|\n| `columnId: string` | The 'columnId' of the column to use for sorting. |\n| `direction: SortDirection` | The direction used to sort the column. |\n| | |\n\n#### RequestRowsRange\n\nInterface defining the properties of a requests for a range of rows.\n\n##### **Properties**\n\n| Name | Description |\n|------|-------------|\n| `startRowIndex: number` | The index of the first row to return. |\n| `numberOfRows: number` | The number of rows to return. |\n| | |\n\n#### Page\n\nInterface defining the properties of a page of rows returned from the datastore.\n\n##### **Properties**\n\n| Name | Description |\n|------|-------------|\n| `content:T[]` | The array of the requested rows. |\n| `startRowIndex` | The index of the first row returned. |\n| `returnedElements` | The number of rows in 'content'. |\n| `totalElements` | The number of rows in the unfiltered data store. |\n| `totalFilteredElements` | The number of rows after filtering. |\n| | |\n\n\u003ca id=\"type-aliases-api\"\u003e\u003c/a\u003e\n\n### Type Aliases\n\n#### ColumnAlignmentType\n\nThe alignment of the content of a column\n\n| |\n|------|\n| type ColumnAlignmentType = \"left\" \\| \"center\" \\| \"right\"; |\n| |\n\n#### FieldFilterDefinition\n\nThe definition of a parameter filtering for the column identified by the given 'fieldName'.\n\n| |\n|------|\n| type FieldFilterDefinition\u003cT\u003e = StrictUnion\\\u003c(FieldFilterDefinitionSimple\\\u003cT\u003e \\| FieldFilterDefinitionRange\\\u003cT\u003e)\u003e; |\n| |\n\n#### FieldFilterDefinitionRange\n\nThe definition of a parameter filtering for a range of values.\n\n| |\n|------|\n| type FieldFilterDefinitionSimple\u003cT\u003e = {\u003cbr\u003e\u0026nbsp;\u0026nbsp;fieldName: keyof T\u003cbr\u003e\u0026nbsp;\u0026nbsp;valueFrom: string \\| number \\| Date\u003cbr\u003e\u0026nbsp;\u0026nbsp;valueTo: string \\| number \\| Date\u003cbr\u003e}; |\n| |\n\n#### FieldFilterDefinitionSimple\n\nThe definition of a parameter filtering for a single value.\n\n| |\n|------|\n| type FieldFilterDefinitionSimple\u003cT\u003e = {\u003cbr\u003e\u0026nbsp;\u0026nbsp;fieldName: keyof T\u003cbr\u003e\u0026nbsp;\u0026nbsp;value: string \\| number \\| Date\u003cbr\u003e}; |\n| |\n\n#### FieldSortDefinition\n\nThe definition of a single sort parameter.\n\n| |\n|------|\n| type FieldSortDefinition\u003cT\u003e = {\u003cbr\u003e\u0026nbsp;\u0026nbsp;fieldName: keyof T\u003cbr\u003e\u0026nbsp;\u0026nbsp;sortDirection: SortDirectionAscDesc\u003cbr\u003e}; |\n| |\n\n#### RowSelectionType\n\nHow many rows can be selected.\n\n| |\n|------|\n| type RowSelectionType = 'none' \\| 'single' \\| 'multi'; |\n| |\n\n#### SortDirectionAscDesc\n\nThe direction of a sort.\n\n| |\n|------|\n| type SortDirection = 'asc' \\| 'desc'; |\n| |\n\n\u003c!-- API TESTING REFERENCE --\u003e\n## API Testing Harnesses\n\n`import { MatDatatableHarness } from '@bepo65/mat-datatable/testing';`\n\n\u003ca id=\"classes-api-testing\"\u003e\u003c/a\u003e\n\n### Classes\n\n\u003ca id=\"_matrowcellharnessbase\"\u003e\u003c/a\u003e\n\n#### **_MatRowCellHarnessBase** extends [ContentContainerComponentHarness\\\u003cstring\u003e](https://material.angular.io/cdk/test-harnesses/api#ContentContainerComponentHarness)\n\n##### **Methods**\n\n| | |\n|------|-------------|\n| `static async booleanMatches` | Checks if the specified nullable boolean value matches the given value. |\n| **Parameters**|\n| value: boolean \\| null \\| Promise\\\u003cboolean \\| null\u003e | The nullable boolean value to check, or a Promise resolving to the nullable boolean value. |\n| pattern: boolean \\| null | The boolean the value is expected to match. If 'pattern' is 'null', the value is expected to be 'null'. |\n| **Returns** |\n| Promise\\\u003cboolean\u003e | Whether the value matches the pattern. |\n| | |\n\n| | |\n|------|-------------|\n| `async getColumnName` | Gets the name of the column that the cell belongs to. |\n| **Returns** |\n| Promise\\\u003cstring\u003e | The name of the column that the cell belongs to. |\n| | |\n\n| | |\n|------|-------------|\n| `async getColumnWidth` | Gets the cell's width in 'px' (with padding). |\n| **Returns** |\n| Promise\\\u003cnumber\u003e | The cell's width. |\n| | |\n\n| | |\n|------|-------------|\n| `async getText` | Gets the cell's text. |\n| **Returns** |\n| Promise\\\u003cstring\u003e | The cell's text. |\n| | |\n\n\u003ca id=\"_matrowharnessbase\"\u003e\u003c/a\u003e\n\n#### **_MatRowHarnessBase** extends [ComponentHarness](https://material.angular.io/cdk/test-harnesses/api#ComponentHarness)\n\nAbstract class used as base for harnesses that interact with a mat-datatable row.\n\n##### **Methods**\n\n| | |\n|------|-------------|\n| `async getCells` | Gets a list of 'MatRowCellHarness', 'MatHeaderCellHarness' or 'MatFooterCellHarness' for all cells in the row. |\n| filter: CellHarnessFilters = {} | A set of criteria that can be used to filter a list of cell harness instances. |\n  **Returns** |\n| Promise\\\u003cCell[]\u003e | A filtered list of MatRowCellHarness for the cells in the row. |\n| | |\n\n| | |\n|------|-------------|\n| `async getCellTextByColumnName` | Gets the text inside the row organized by columns. |\n  **Returns** |\n| Promise\\\u003cMatRowHarnessColumnsText\u003e | The text inside the row organized by columns. |\n| | |\n\n| | |\n|------|-------------|\n| `async getCellTextByIndex` | Gets the text of the cells in the row. |\n| **Parameters**|\n| filter: CellHarnessFilters = {} | A set of criteria that can be used to filter a list of cell harness instances. |\n| **Returns** |\n| Promise\\\u003cstring[]\u003e | The text of the cells in the row. |\n| | |\n\n| | |\n|------|-------------|\n| `static async rowCellsContentMatch` | Checks if the values of the table row columns given in the 'value' parameter, match the given column values. Only columns defined in the pattern are inspected. |\n| **Parameters**|\n| value: MatRowHarnessColumnsText \\| Promise\u003cMatRowHarnessColumnsText\u003e \\| null | The nullable object defining all columns of a row and their values used for the checks. Alternatively a Promise resolving to the nullable object. |\n| pattern: Record\u003cstring, string \\| RegExp\u003e \\| null | Object defining the columns and the values or RegExp expected to match. If 'pattern' is 'null', the value is expected to be 'null'. |\n| **Returns** |\n| Promise\\\u003cboolean\u003e | Whether the value matches the pattern. |\n| | |\n\n\u003ca id=\"matdatatableharness\"\u003e\u003c/a\u003e\n\n#### **MatDatatableHarness** extends [ContentContainerComponentHarness\\\u003cstring\u003e](https://material.angular.io/cdk/test-harnesses/api#ContentContainerComponentHarness)\n\nHarness for interacting with a mat-datatable in tests.\n\n##### **Properties**\n\n| Name | Description |\n|------|-------------|\n| `static hostSelector: '.mat-datatable'` | The selector for the host element of a 'MatDatatableHarness'. |\n| | |\n\n##### **Methods**\n\n| | |\n|------|-------------|\n| `async getAllChildLoaders` | Gets an array of HarnessLoader instances. |\n| **Parameters** |\n| selector: string | A string used for selecting the instances. |\n| **Returns** |\n| Promise\\\u003cHarnessLoader[]\u003e | An array of HarnessLoader instances. |\n| | |\n\n| | |\n|------|-------------|\n| `async getAllHarnesses` | Gets an array of harness instances. |\n| **Parameters** |\n| query: HarnessQuery\u003cT\u003e | A query for a ComponentHarness used to filter the instances, which is expressed as either a ComponentHarnessConstructor or a HarnessPredicate. |\n| **Returns** |\n| Promise\\\u003cT[]\u003e | An array of harness instances. |\n| | |\n\n| | |\n|------|-------------|\n| `async getCellTextByColumnName` | Gets the text inside the entire table organized by columns. |\n| **Returns** |\n| Promise\\\u003cMatDatatableHarnessColumnsText\u003e | The text inside the entire table organized by columns. |\n| | |\n\n| | |\n|------|-------------|\n| `async getCellTextByIndex` | Gets the text inside the entire table organized by rows. |\n| **Returns** |\n| Promise\\\u003cstring[][]\u003e | Array for all rows containing the content of a row as an array. |\n| | |\n\n| | |\n|------|-------------|\n| `async getChildLoader`| Searches for an element matching the given selector below the root element of this HarnessLoader. |\n| **Parameters** |\n| selector: string | A string used for selecting the HarnessLoader. |\n| **Returns** |\n| Promise\\\u003cHarnessLoader\u003e | A new HarnessLoader rooted at the first matching element. |\n| | |\n\n| | |\n|------|-------------|\n| `async getFooterRows` | Gets a list of the footer rows in a mat-datatable. |\n| **Returns** |\n| Promise\\\u003cMatHeaderRowHarness[]\u003e | A list of the footer rows. |\n| | |\n\n| | |\n|------|-------------|\n| `async getHarness` | Searches for an instance of the given ComponentHarness class or HarnessPredicate below the root element of this HarnessLoader. |\n| **Parameters** |\n| query: HarnessQuery\u003cT\u003e | A query for a ComponentHarness used to filter the instances, which is expressed as either a ComponentHarnessConstructor or a HarnessPredicate. |\n| **Returns** |\n| Promise\\\u003cT\u003e | An instance of the harness corresponding to the first matching element. |\n| | |\n\n| | |\n|------|-------------|\n| `async getHarnessOrNull` | Gets an instance of the given ComponentHarness class or HarnessPredicate below the root element of this HarnessLoader. |\n| **Parameters** |\n| query HarnessQuery\u003cT\u003e | A query for a ComponentHarness used to filter the instances, which is expressed as either a ComponentHarnessConstructor or a HarnessPredicate. |\n| **Returns** |\n| Promise\\\u003cT \\| null\u003e | An instance of the harness corresponding to the first matching element. |\n| | |\n\n| | |\n|------|-------------|\n| `async getHeaderRows` | Gets a list of the header rows in a mat-datatable. |\n| **Returns** |\n| Promise\\\u003cMatHeaderRowHarness[]\u003e | A list of the header rows. |\n| | |\n\n| | |\n|------|-------------|\n| `async getRows` | Gets a list of the regular data rows in a mat-datatable. |\n| **Parameters** |\n| filter: RowHarnessFilters = {} | A set of criteria that can be used to filter a list of row harness instances. |\n| **Returns** |\n| Promise\\\u003cMatRowHarness[]\u003e | A filtered list of the regular data rows. |\n| | |\n\n| | |\n|------|-------------|\n| `async hasHarness` | Check, if the harness contains the instances defined by 'query'. |\n| **Parameters** |\n| query HarnessQuery\u003cT\u003e | A query for a ComponentHarness used to filter the instances, which is expressed as either a ComponentHarnessConstructor or a HarnessPredicate. |\n| **Returns** |\n| Promise\\\u003cboolean\u003e | 'True', if the instances is part of the harness. |\n| | |\n\n| | |\n|------|-------------|\n| `async host` | Gets a Promise for the 'TestElement' representing the host element of the component. |\n| **Returns** |\n| Promise\\\u003cTestElement\u003e | The 'TestElement' representing the host element of the component. |\n| | |\n\n| | |\n|------|-------------|\n| `static with` | Gets a 'HarnessPredicate' that can be used to search for a mat-datatable with specific attributes. |\n| **Parameters** |\n| options: TableHarnessFilters = {} | Options for narrowing the search. |\n| **Returns** |\n| HarnessPredicate\u003cT\u003e | A 'HarnessPredicate' configured with the given options. |\n| | |\n\n\u003ca id=\"matfootercellharness\"\u003e\u003c/a\u003e\n\n#### **MatFooterCellHarness** extends [_MatRowCellHarnessBase](#MatRowCellHarnessBase)\n\nHarness for interacting with an MDC-based Angular Material table footer cell.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| `static hostSelector: '.mat-mdc-footer-cell'` | The selector for the host element of a 'MatFooterCellHarness' instance. |\n\n\u003ca id=\"matfooterrowharness\"\u003e\u003c/a\u003e\n\n#### **MatFooterRowHarness** extends [_MatRowHarnessBase](#MatRowHarnessBase)\n\nHarness for interacting with a mat-datatable footer row.\n\n##### Properties\n\n| | |\n|------|-------------|\n| `static hostSelector: '.mat-mdc-footer-row'` | Used to identify the host element of a 'MatFooterRowHarness' instance. |\n| | |\n\n\u003ca id=\"matheadercellharness\"\u003e\u003c/a\u003e\n\n#### **MatHeaderCellHarness** extends [_MatRowCellHarnessBase](#MatRowCellHarnessBase)\n\nHarness for interacting with an MDC-based Angular Material table header cell.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| `static hostSelector: '.mat-mdc-header-cell'` | The selector for the host element of a 'MatHeaderCellHarness' instance. |\n\n##### **Methods**\n\n| | |\n|------|-------------|\n| `async getText` | Gets the header cell's text. |\n| **Return** |\n| Promise\\\u003cstring\u003e | The header cell's text. |\n| | |\n\n| | |\n|------|-------------|\n| `async isResizable` | Check, if the cell is defined as 'resizable'. |\n| **Returns** |\n| Promise\\\u003cboolean\u003e | The cell is resizable. |\n| | |\n\n| | |\n|------|-------------|\n| `async resize` | Resize the cell to a new width (if 'resizable'). |\n| **Parameters** |\n| newWidth: number | The new width of the cell in 'px'. |\n| **Returns** |\n| Promise\\\u003cvoid\u003e | The cell got resized. |\n| | |\n\n\u003ca id=\"matheaderrowharness\"\u003e\u003c/a\u003e\n\n#### **MatHeaderRowHarness** extends [_MatRowHarnessBase](#MatRowHarnessBase)\n\nHarness for interacting with a mat-datatable header row.\n\n##### Properties\n\n| | |\n|------|-------------|\n| `static hostSelector: '.mat-mdc-header-row'` | Used to identify the host element of a 'MatHeaderRowHarness' instance. |\n| | |\n\n##### Methods\n\n| | |\n|------|-------------|\n| `async getCells` | Gets a list of 'MatRowCellHarness' for all cells in the row. |\n| **Parameters** |\n| filter: HeaderCellHarnessFilters = {} | A set of criteria that can be used to filter a list of cell harness instances. |\n| **Returns** |\n| Promise\\\u003cMatHeaderCellHarness[]\u003e | A filtered list of MatRowCellHarness for the cells in the header row. |\n| | |\n\n\u003ca id=\"matmultisortharness\"\u003e\u003c/a\u003e\n\n#### **MatMultiSortHarness** extends [ComponentHarness](https://material.angular.io/cdk/test-harnesses/api#ComponentHarness)\n\nHarness for interacting with a mat-multi-sort element in tests.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| `static hostSelector: '.mat-multi-sort'` | Used to identify the elements in the DOM. |\n| | |\n\n##### **Methods**\n\n| | |\n|---|---|\n| `async getActiveHeaders` | Gets all headers used for sorting in the 'mat-multi-sort'. |\n| **Returns** |\n| Promise\\\u003cMatMultiSortHeaderHarness[]\u003e | All headers used for sorting. |\n| | |\n\n| | |\n|---|---|\n| `async getActiveSortData` | Gets the sorting data for all headers used for sorting in the 'mat-multi-sort'. |\n| **Returns** |\n| Promise\\\u003cDomSortingDefinition[]\u003e | Sorting data of all headers used for sorting. |\n| | |\n\n| | |\n|---|---|\n| `async getSortHeaders` | Gets the headers used for sorting in the 'mat-multi-sort' reduced by the given 'filter'. |\n| **Parameters** |\n| filter: MultiSortHeaderHarnessFilters = {} | |\n| **Returns** |\n| Promise\\\u003cMatMultiSortHeaderHarness[]\u003e | The filtered sort headers. |\n| | |\n\n| | |\n|---|---|\n| `async host` | Gets a Promise for the 'TestElement' representing the host element of the component. |\n| **Returns** |\n| Promise\\\u003cTestElement\u003e | The 'TestElement' representing the host element of the component. |\n| | |\n\n| | |\n|---|---|\n| `static with` | Gets a 'HarnessPredicate' that can be used to search for a 'mat-multi-sort' with specific attributes. |\n| **Parameters** |\n| options: MultiSortHarnessFilters = {} | Options for narrowing the search. |\n| **Returns** |\n| HarnessPredicate\\\u003cMatMultiSortHarness\u003e | A 'HarnessPredicate' configured with the given options. |\n| | |\n\n\u003ca id=\"matmultisortheaderharness\"\u003e\u003c/a\u003e\n\n#### **MatMultiSortHeaderHarness** extends [ComponentHarness](https://material.angular.io/cdk/test-harnesses/api#ComponentHarness)\n\nHarness for interacting with a `mat-multi-sort header` element in tests.\n\n##### **Properties**\n\n| | |\n|---|---|\n| `static hostSelector` | Used to identify the elements in the DOM (value: '.mat-multi-sort-header'). |\n| | |\n\n##### **Methods**\n\n| | |\n|---|---|\n| `async click` | Clicks the header to change its sorting direction. Only works if the header is enabled. |\n| **Returns** |\n| Promise\\\u003cvoid\u003e | Promise that resolves when the click action completes. |\n| | |\n\n| | |\n|---|---|\n| `async getAllSortData` | Gets an object with the sorting data of the header. |\n| **Returns** |\n| Promise\\\u003cMatMultiSortHeaderHarnessSortDefinition\u003e | The sorting data of the header. |\n| | |\n\n| | |\n|---|---|\n| `async getId` | Gets the id of the sort header. |\n| **Returns** |\n| Promise\\\u003cstring\u003e | The id of the sort header. |\n| | |\n\n| | |\n|---|---|\n| `async getLabel` | Gets the label of the sort header. |\n| **Returns** |\n| Promise\\\u003cstring\u003e | The label of the sort header. |\n| | |\n\n| | |\n|---|---|\n| `async getSortDirection` | Gets the sorting direction of the header. |\n| **Returns** |\n| Promise\\\u003cSortDirection\u003e | The sorting direction of the header. |\n| | |\n\n| | |\n|---|---|\n| `async getSortPosition` | Gets the sorting position of the header. |\n| **Returns** |\n| Promise\\\u003cSortDirection\u003e | The sorting position of the header (1..n). |\n| | |\n\n| | |\n|---|---|\n| `async host` | Gets a Promise for the 'TestElement' representing the host element of the component. |\n| **Returns** |\n| Promise\u003cTestElement\u003e | The 'Promise' for the 'TestElement'. |\n| | |\n\n| | |\n|---|---|\n| `async isActive` | Gets whether the sort header is currently being used for sorting. |\n| **Returns** |\n| Promise\u003cboolean\u003e | `True`, if the sort header is currently being used for sorting. |\n| | |\n\n| | |\n|---|---|\n| `async isDisabled` | Whether the sort header is disabled. |\n| **Returns** |\n| Promise\u003cboolean\u003e | `True`, if the sort header is disabled. |\n| | |\n\n| | |\n|---|---|\n| `static with` | Gets a 'HarnessPredicate' that can be used to search for a sort header with specific attributes. |\n| **Parameters** |\n| options: MultiSortHeaderHarnessFilters = {} | Options for narrowing the search. |\n| **Returns** |\n| HarnessPredicate\\\u003cMatMultiSortHeaderHarness\u003e | A 'HarnessPredicate' configured with the given options. |\n| | |\n\n\u003ca id=\"matrowcellharness\"\u003e\u003c/a\u003e\n\n#### **MatRowCellHarness** extends [_MatRowCellHarnessBase](#MatRowCellHarnessBase)\n\nHarness for interacting with a mat-datatable cell in a row.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| `static hostSelector: '.mat-mdc-cell'` | Used to identify the host element of a 'MatRowCellHarness' instance. |\n\n##### **Methods**\n\n| | |\n|------|-------------|\n| `async isSingleLine` | Check, if the cell is defined as 'showAsSingleLine'. |\n| **Returns** |\n| Promise\\\u003cboolean\u003e | The cell is shown as single line. |\n| | |\n\n\u003ca id=\"matrowharness\"\u003e\u003c/a\u003e\n\n#### **MatRowHarness** extends [_MatRowHarnessBase](#MatRowHarnessBase)\n\nHarness for interacting with a mat-datatable row.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| `static hostSelector: '.mat-mdc-row'` | Used to identify the elements in the DOM. |\n\n##### **Methods**\n\n| | |\n|---|---|\n| `async click` | Clicks the row (e.g. to select a row). |\n| **Returns** |\n| Promise\\\u003cvoid\u003e | Promise that resolves when the click action completes. |\n| | |\n\n| | |\n|------|-------------|\n| `static with` | Gets a `HarnessPredicate` that can be used to search for a mat-datatable row with specific attributes. |\n| **Parameters** |\n| options: RowHarnessFilters = {} | Options for narrowing the search. |\n| **Returns** |\n| HarnessPredicate\u003cT\u003e | A 'HarnessPredicate' configured with the given options. |\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003ca id=\"interfaces-api-testing\"\u003e\u003c/a\u003e\n\n### **Interfaces**\n\n#### **CellHarnessFilters**\n\nA set of criteria that can be used to filter a list of cell harness instances.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| columnName: string \\| RegExp | Only find instances whose column name matches the given value. |\n| text: string \\| RegExp | Only find instances whose text matches the given value. |\n| | |\n\n#### **DomSortingDefinition**\n\n##### **Properties**\n\n| | |\n|---|---|\n| `id: string` | ID of the header element. |\n| `label: string` | Label of the header. |\n| `sortDirection: SortDirection` | Sort direction of the header. |\n| `sortPosition: number` | Sort position of the header (1..n). |\n| | |\n\n#### **MatDatatableHarnessColumnsText**\n\nText extracted from a table organized by columns.\n\nThis interface describes an object, whose keys are the names of the columns and whose values are an object with the following properties:\n\n##### **Properties of a value**\n\n| | |\n|------|-------------|\n| text: string[] | Array with content of the rows of this column. |\n| headerText: string | Content of the header row of this column. |\n| footerText: string \\| undefined | Content of the footer row of this column. |\n| | |\n\n#### **MatDatatableHarnessFilters**\n\nA set of criteria that can be used to filter a list of table harness instances.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| - | |\n| | |\n\n#### **MatRowHarnessColumnsText**\n\nText extracted from a table row organized by columns.\n\nThis interface describes an object, whose keys are the names of the columns and whose values are the corresponding cell content.\n\n#### **MultiSortHarnessFilters**\n\n##### **Properties**\n\n| | |\n|---|---|\n| - | |\n| | |\n\n#### **MultiSortHeaderHarnessFilters**\n\n##### **Properties**\n\n| | |\n|---|---|\n| `label: string \\| RegExp` | Label of the header. |\n| `id: string \\| RegExp` | ID of the header element. |\n| `sortDirection: SortDirection` | Sort direction of the header. |\n| `sortPosition: number` | Sort position of the header (1..n). |\n| | |\n\n#### **RowHarnessFilters**\n\nA set of criteria that can be used to filter a list of row harness instances.\n\n##### **Properties**\n\n| | |\n|------|-------------|\n| - | |\n| | |\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\nSee the [open issues](https://github.com/BePo65/mat-datatable/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- HINTS ON POSSIBLE EXTENSIONS --\u003e\n## Hints On Possible Extensions\n\n+ to make footer turn on / off dynamically it is not sufficient to wrap the footer cell and row definitions in ng-container. Details see [stackoverflow](https://stackoverflow.com/questions/63644938/angular-material-mat-table-dynamic-footer-header-rowdef/63648914#63648914). The demo uses [ngx-rerender](https://www.npmjs.com/package/ngx-rerender).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n### Changelog\nThe project uses 'standard-version' to create the changelog. To enable this system, commit messages are linted before commits are executed by git.\n\nTo enable this system you have to run the following scripts in your local repository home directory:\n```\nnpx husky install\nnpx husky add .husky/commit-msg \"npx --no -- commitlint --edit $1\"\n```\n\n**The structure of commit messages is**:\n```\n  \u003cheader\u003e\n  \u003cBLANK LINE\u003e\n  \u003cbody\u003e\n  \u003cBLANK LINE\u003e\n  \u003cfooter\u003e\n```\n\n**header**\n```\n  \u003ctype\u003e(\u003cscope\u003e): \u003cshort summary\u003e\n```\n  \ntype and scope\n  - build: Changes that affect the build system or external dependencies (example scope: npm)\n  - docs: Documentation only changes\n  - feat: A new feature\n  - fix: A bug fix\n  - perf: A code change that improves performance\n  - refactor: A code change that neither fixes a bug nor adds a feature\n  - test: Adding missing tests or correcting existing tests (example scopes: demo, lib, e2e)\n\n**footer**\n```\n  BREAKING CHANGE: ... (requires MAJOR in Semantic Versioning)\n```\n\nFor details of the commit messages format see [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).\n\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n## License\n\nCopyright © 2024 [Bernhard Pottler](https://github.com/BePo65).\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\nThis project uses the fonts '[Roboto](https://fonts.google.com/specimen/Roboto/about)' and '[Material Icons](https://github.com/google/material-design-icons)' from the [Google Fonts Library](https://fonts.google.com/) that are licensed under the [Apache License Version 2.0](https://www.apache.org/licenses/LICENSE-2.0.txt).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- HINTS --\u003e\n## Hints\nAs `eslint` V9 requires a fundamental change to the configuration files, the update will be done in a later version.\n\nAs a consequence the package `eslint-plugin-cypress` cannot be updated to a version 4.x (as this version has a peerDependency of eslint \u003e= 9).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Data Grids"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBePo65%2Fmat-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBePo65%2Fmat-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBePo65%2Fmat-datatable/lists"}