{"id":28683663,"url":"https://github.com/Maxl94/ngx-multi-sort-table","last_synced_at":"2025-06-14T03:03:52.010Z","repository":{"id":37445347,"uuid":"224596111","full_name":"Maxl94/ngx-multi-sort-table","owner":"Maxl94","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-26T10:54:26.000Z","size":5556,"stargazers_count":40,"open_issues_count":1,"forks_count":21,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-29T10:09:02.903Z","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/Maxl94.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":"2019-11-28T07:37:54.000Z","updated_at":"2025-05-27T17:39:17.000Z","dependencies_parsed_at":"2024-01-10T19:48:05.858Z","dependency_job_id":"f2970e3b-601c-43a6-b64c-8e9dce917326","html_url":"https://github.com/Maxl94/ngx-multi-sort-table","commit_stats":{"total_commits":191,"total_committers":22,"mean_commits":8.681818181818182,"dds":0.7277486910994764,"last_synced_commit":"e6629dcb36afac94ec8eb0d80c301d1f4a05fa57"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/Maxl94/ngx-multi-sort-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxl94%2Fngx-multi-sort-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxl94%2Fngx-multi-sort-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxl94%2Fngx-multi-sort-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxl94%2Fngx-multi-sort-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Maxl94","download_url":"https://codeload.github.com/Maxl94/ngx-multi-sort-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Maxl94%2Fngx-multi-sort-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259334256,"owners_count":22842446,"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-06-14T03:01:10.483Z","updated_at":"2025-06-14T03:03:52.005Z","avatar_url":"https://github.com/Maxl94.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Data Grids"],"readme":"# NgxMultiSortTable\n\nThis is the implementation for a multiple sortable table based on the Angular Material Design. The focus is on server-side loaded and sorted data. Next to that, the library provides some useful classes to reduce the duplicated code when using the material `paginator`.\nThe code is based on [Francisco Arantes Rodrigues](https://github.com/farantesrodrigues) repository [repo](https://github.com/farantesrodrigues/ng-mat-multi-sort), so thanks for your great work.\n\n---\n**Warning:**\n\n- Older versions might have known security issues. So keep up-to-date!\n- Older versions of this library lack some features.\n\n---\n\n\n## Demo\nVisit the [GitHub pages demo](https://maxl94.github.io/ngx-multi-sort-table/) or clone and run it locally.\n\nTo run the demo:\n\n1. `clone` the repository\n2. `npm install`\n3. `ng build mat-multi-sort`\n\n![demo gif](demo.gif)\n\n## Changelog\n\nSee the [GitHub release notes](https://github.com/Maxl94/ngx-multi-sort-table/releases).\n\n## Documentation\n\n### TableData\n\nThe `TableData` a useful class, which handles a lot of work for your app, such as page events (`next`, `previous`, `sizeChange`) and sorting events. Next to that, it keeps the current state of the table, again sorting and pagination.\n\n#### Properties\n\n| Name               | Description                                                                                                                                           | default                          | Example                                      |\n| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------- |\n| columns            | An array of the displayed columns of the table with `id`: name of the attribute and `name`: Name to display in the header                             | `none`                           | `[{ id: 'first_name', name: 'First Name' }]` |\n| displayedColumns   | An array of the currently displayed columns (`id`) and their order                                                                                    | `all columns`                    |                                              |\n| dataSource         | A `MatMultiSortTableDataSource`, which is special `DataSource` for sorting. Only accesable via getter and setter                                      | `none`                           |                                              |\n| data               | The table data of the dataSource                                                                                                                      | `Array\u003cT\u003e`                       |\n| pageSize           | The current selected pageSize                                                                                                                         | first entry of `pageSizeOptions` |                                              |\n| pageSizeOptions    | The options for the pageSize, which the user can see in the menu                                                                                      | `[10, 20, 50, 100]`              |                                              |\n| pageIndex          | The index of the page                                                                                                                                 | `0`                              |                                              |\n| totalElements      | The total number of elements of the table, must be set from your component                                                                            | `none`                           |                                              |\n| sortParams         | An Array of the columns (`id`), which the user had chosen to sort. The order of the sorting is represented by the order of the `id`s in the parameter | `[]`                             | `['first_name', 'last_name']`                |\n| sortDirs           | An Array of the column's sort-directions, which the user had chosen to sort. The order is the same like `sortParams`                                  | `[]`                             | `['asc', 'desc']`                            |\n| nextObservable     | An `Observable` that fires, when the user clicks the `next` button                                                                                    |                                  |                                              |\n| previousObservable | An `Observable` that fires, when the user clicks the `previous` button                                                                                |                                  |                                              |\n| sizeObservable     | An `Observable` that fires, when the user changes the `pageSize`                                                                                      |                                  |                                              |\n| sortObservable     | An `Observable` that fires, when the user changes the sorted columns or direction                                                                     |                                  |                                              |\n\n#### Methods\n\n| Name              | Description                                                                                                                                                                                                                                                                                                                                             | Parameter                                                                                                                                                                            |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| constructor       | The constructor for the for the class, where you initialize your `columns`. Optionally, you can add the default `id`s of the default sort colum and direction. If `defaultSortParams` are provided, but not the directions `asc` will be default                                                                                                        | `columns`: Array\u003c{ id: string, name: string }\u003e, `options`: { `defaultSortParams?`: string[], `defaultSortDirs?`: string[], `pageSizeOptions?`: number[],  `totalElements?`: number } |\n| onSortEvent       | The method to bind to the `matSortChange` output of the table                                                                                                                                                                                                                                                                                           | none                                                                                                                                                                                 |\n| onPaginationEvent | The method to bin to the `page` output of the `mat-paginator`                                                                                                                                                                                                                                                                                           | `$event`: PageEvent                                                                                                                                                                  |\n| updateSortHeaders | The method triggers a rerendering of the headers to show the sorting directions correctly. The functions forces a complete new render of the data, what is not optimal, but only working solution right now.                                                                                                                                            | none                                                                                                                                                                                 |\n| updateColumnNames | The method allows you to change the displayed name of the columns                                                                                                                                                                                                                                                                                       | { `id:` string, `name:` string }[]                                                                                                                                                   |\n| localStorageKey   | A key to store the table settings, like selected columns, order of the columns, sorting directions in the local storage. If no key is passed the settings are not stored. **Do not set the same key for different tables, this might lead to unexpected behavior. There is an validation of the loaded settings, if that fails, the defaults are used** | string                                                                                                                                                                               |\n\n### MatMultiSortHeaderComponent\n\nThis component manages the sorting of the table. To use the multi-sort add `matMultiSort` to your table and pass the `mat-multi-sort-header=\"\u003cyour-column-id\u003e\"` to the `\u003cth mat-header-cell\u003e`.\n\n### MatMultiSortTableSettingsComponent\n\nThis component display some settings for your table. The user can select the columns he wants to see in his table, next to that he can change the order of the columns. Additionally, the component shows the current chosen sorting columns as chips above the table.\nThe user can easyly change the sorting order by drag and drop the chips and also change the sorting direction of each column.\n\n| Name                | Description                                                                                                                                                                                                                              | Parameter              |\n|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------|\n| tableData           | An input of `tableData` object which holds the complete table state                                                                                                                                                                      | @Input: TableData      |\n| sortToolTip         | A input test for the tooltip to show up over the sorting chips                                                                                                                                                                           | @Input: string         |\n| closeDialogOnChoice | A input to control the behavior of the settings menu. If set to `true` the dialog closes after the user has selected a column, if `false` it stays open, so the user can select/deselect multiple columns with out reopening the dialog. | @Input: boolean        |\n| scrollStrategy      | An input of ScrollStrategy for the CDK overlay. Sets the behavior for scrolling when the dialog is opened. Possible options are the predefined strategies: Noop, Close, Block or Reposition, with Block being the default value.         | @Input: ScrollStrategy |\n| disableSortIndicators| Disable the sorting chips                                                                                                                                                                                                               | @Input: boolean        |\n\n### MatMultiSortTableDataSource\n\nThis is the datasource of the MultiSortTable, it works like the `MatTableDataSource`´.\n\n| Name        | Description                  | Parameter                                                  |\n| ----------- | ---------------------------- | ---------------------------------------------------------- |\n| constructor | The constructor of the class | `sort:` MatMultiSort, `clientSideSorting:` boolean = false |\n\n## Example code for the template\n\n```html\n\u003cmat-multi-sort-table-settings [tableData]=\"table\" sortToolTip=\"Sortierreihenfole ändern\"  [closeDialogOnChoice]=\"false\"\u003e\n  \u003cbutton mat-stroked-button\u003e\n    Spalten bearbeiten \u0026nbsp;\n    \u003cmat-icon\u003emenu\u003c/mat-icon\u003e\n  \u003c/button\u003e\n  \u003c!-- Optional custom content for the sort indicator chip (here column name with icons)  --\u003e \n  \u003cng-template #sortIndicator let-direction='direction' let-columnName='columnName'\u003e\n    {{columnName}}\n    \u003cmat-icon *ngIf=\"direction\"\u003e{{direction === 'asc' ? 'arrow_upward' : 'arrow_downward'}}\u003c/mat-icon\u003e\n  \u003c/ng-template\u003e\n\u003c/mat-multi-sort-table-settings\u003e\n\u003ctable mat-table [dataSource]=\"table.dataSource\" matMultiSort (matSortChange)=\"table.onSortEvent()\"\u003e\n\n    \u003c!-- Create all your columns with *ngfor, this is the lazy way out and only works if the display of the data does not differ --\u003e\n    \u003cng-container *ngFor=\"let column of table.columns\" [matColumnDef]=\"column.id\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef [mat-multi-sort-header]=\"column.id\"\u003e {{column.name}} \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let row\"\u003e {{row[column.id]}} \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n    \u003c!-- Or define your in a normal, more individuell way --\u003e\n    \u003cng-container matColumnDef=\"id\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef mat-multi-sort-header=\"id\"\u003e ID \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let row\"\u003e {{row.id}} \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n    \u003cng-container matColumnDef=\"progress\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef mat-multi-sort-header=\"progress\"\u003e Progress \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let row\"\u003e {{row.progress}} % \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n    \u003cng-container matColumnDef=\"name\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef mat-multi-sort-header=\"name\"\u003e Name \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let row\"\u003e {{row.name}} \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n  \u003ctr mat-header-row *matHeaderRowDef=\"table.displayedColumns\"\u003e\u003c/tr\u003e\n  \u003ctr mat-row *matRowDef=\"let row; columns: table.displayedColumns;\"\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\u003cmat-paginator [pageSize]=\"table.pageSize\" [pageIndex]=\"table.pageIndex\" [pageSizeOptions]=\"table.pageSizeOptions\"\n  [length]=\"table.totalElements ? table.totalElements : 0\" (page)=\"table.onPaginationEvent($event)\" [disabled]=\"CLIENT_SIDE\"\u003e\n\u003c/mat-paginator\u003e\n```\n\n## Example code for the component.ts\n\n```typescript\nexport class AppComponent implements OnInit {\n  CLIENT_SIDE = true;\n\n  table: TableData\u003cUserData\u003e;\n  @ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;\n\n  constructor(\n    private dummyService: DummyService\n  ) {\n    this.table = new TableData\u003cUserData\u003e(\n      [\n        { id: 'id', name: 'ID' },\n        { id: 'name', name: 'Name' },\n        { id: 'progress', name: 'Progess' }\n      ], { localStorageKey: 'settings' }\n    );\n  }\n\n  ngOnInit() {\n    this.table.nextObservable.subscribe(() =\u003e { this.getData(); });\n    this.table.sortObservable.subscribe(() =\u003e { this.getData(); });\n    this.table.previousObservable.subscribe(() =\u003e { this.getData(); });\n    this.table.sizeObservable.subscribe(() =\u003e { this.getData(); });\n\n    setTimeout(() =\u003e {\n      this.initData();\n    }, 0);\n  }\n\n  initData() {\n    this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);\n    if (this.CLIENT_SIDE) {\n      this.getOfflineData();\n    } else {\n      this.table.pageSize = 10;\n      this.getData();\n    }\n  }\n\n  getData() {\n    if (!this.CLIENT_SIDE) {\n      const res = this.dummyService.list(this.table.sortParams, this.table.sortDirs, this.table.pageIndex, this.table.pageSize);\n      this.table.totalElements = res.totalElements;\n      this.table.pageIndex = res.page;\n      this.table.pageSize = res.pagesize;\n      this.table.data = res.users;\n    }\n  }\n\n  getOfflineData() {\n    const res = this.dummyService.list([], [], 0, 25);\n    this.table.totalElements = 25;\n    this.table.pageIndex = res.page;\n    this.table.pageSize = res.pagesize;\n    this.table.data = res.users;\n  }\n}\n```\n\n## Contributing\n\n### How should I write my commits?\n\nRelease Please assume you are using [Conventional Commit messages](https://www.conventionalcommits.org/).\n\nThe most important prefixes you should have in mind are:\n\n- `fix:` which represents bug fixes, and correlates to a [SemVer](https://semver.org/)\n  patch.\n- `feat:` which represents a new feature, and correlates to a SemVer minor.\n- `feat!:`, or `fix!:`, `refactor!:`, etc., which represent a breaking change\n  (indicated by the `!`) and will result in a SemVer major.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMaxl94%2Fngx-multi-sort-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMaxl94%2Fngx-multi-sort-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMaxl94%2Fngx-multi-sort-table/lists"}