{"id":20161954,"url":"https://github.com/i-cell-mobilsoft-open-source/icell-data-table","last_synced_at":"2025-04-10T00:32:22.677Z","repository":{"id":41816086,"uuid":"303932502","full_name":"i-Cell-Mobilsoft-Open-Source/icell-data-table","owner":"i-Cell-Mobilsoft-Open-Source","description":"Data Table Component","archived":false,"fork":false,"pushed_at":"2024-10-01T07:53:42.000Z","size":4805,"stargazers_count":7,"open_issues_count":24,"forks_count":0,"subscribers_count":12,"default_branch":"main","last_synced_at":"2024-10-01T11:53:46.286Z","etag":null,"topics":["angular","datatables","table","typescript"],"latest_commit_sha":null,"homepage":"","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/i-Cell-Mobilsoft-Open-Source.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":"CONTRIBUTING.md","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":"2020-10-14T07:11:38.000Z","updated_at":"2024-07-25T12:16:43.000Z","dependencies_parsed_at":"2024-07-25T09:27:44.267Z","dependency_job_id":"16923d99-9b5d-4d16-850d-474d96f76416","html_url":"https://github.com/i-Cell-Mobilsoft-Open-Source/icell-data-table","commit_stats":{"total_commits":199,"total_committers":14,"mean_commits":"14.214285714285714","dds":0.8140703517587939,"last_synced_commit":"bc4304620c55da05045f5e43496c0238b9b3edd8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-Cell-Mobilsoft-Open-Source%2Ficell-data-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-Cell-Mobilsoft-Open-Source%2Ficell-data-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-Cell-Mobilsoft-Open-Source%2Ficell-data-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i-Cell-Mobilsoft-Open-Source%2Ficell-data-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i-Cell-Mobilsoft-Open-Source","download_url":"https://codeload.github.com/i-Cell-Mobilsoft-Open-Source/icell-data-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224544167,"owners_count":17328859,"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":["angular","datatables","table","typescript"],"created_at":"2024-11-14T00:22:05.880Z","updated_at":"2024-11-14T00:22:06.395Z","avatar_url":"https://github.com/i-Cell-Mobilsoft-Open-Source.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":":source-highlighter: highlightjs\n:highlightjs-languages: javascript, xml, css, bash, typescript\n:icons: font\n\n# ICELL-DATA-TABLE\n\nimage:https://img.shields.io/github/license/i-Cell-Mobilsoft-Open-Source/icell-data-table[link=\"https://github.com/i-Cell-Mobilsoft-Open-Source/icell-data-table/blob/main/LICENSE\", License] image:https://img.shields.io/npm/v/@i-cell/data-table[link=\"https://www.npmjs.com/package/@i-cell/data-table\", npm] image:https://img.shields.io/npm/dt/@i-cell/data-table[npm] image:https://github.com/i-Cell-Mobilsoft-Open-Source/icell-data-table/workflows/CI/badge.svg[Build]\n\n## Installation\n\n[source, bash, subs=\"verbatim,quotes\"]\n----\nnpm i _@i-cell/data-table_\n----\n\n## Requirements\n\nThe table supports `Angular v13.1.3` currently.\n\nIn order to use the table, you need to install these dependencies:\n\n|===\n| Package | Command to install | Current version\n\n| Angular material * |  `npm i @angular/material` |   13.1.3\n| Angular CDK | `npm i @angular/cdk`  | 13.1.3\n| ngx-translate | `npm i ngx-translate` | 14.0.0\n| ngx-webstorage | `npm i ngx-webstorage` | 9.0.0\n|===\n\n*if you need to add Angular Material to an existing project, make sure to load the required material palettes in your `styles.scss` for the Material theme as well. For example:\n```\n@import '~@angular/material/theming';\n\n@include mat-core();\n$candy-app-primary: mat-palette($mat-deep-purple);\n$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);\n$candy-app-warn: mat-palette($mat-red);\n\n$candy-app-theme: mat-light-theme(\n    $candy-app-primary,\n    $candy-app-accent,\n    $candy-app-warn\n);\n\n@include angular-material-theme($candy-app-theme);\n```\n\n== Usage\n\n=== Configuration\n\nIMPORTANT: The table uses `materialdesignicons` svg icon, you will need to download the latest `mdi.svg` from https://materialdesignicons.com/api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B[here]. Place the downloaded svg inside the `assets/` folder of your application.\n\nNOTE: If you structure your `assets/` folder in a specific way, you have the option to set the path of the svg, while you import the module.\n\n[source, typescript, subs=\"verbatim,quotes\"]\n----\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { DataTableModule } from '@icell/widget-data-table';\nimport { MatTableModule } from '@angular/material/table';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { NgxWebstorageModule } from 'ngx-webstorage';\n...\n\nconst pathToSvg: string = 'assets/path-to-svg/mdi.svg';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    BrowserAnimationsModule\n    *DataTableModule.forRoot(pathToSvg),*\n    MatTableModule,\n    TranslateModule.forRoot(),\n    NgxWebstorageModule.forRoot(),\n    ...\n  ],\n  ...\n})\nexport class Module {\n  ...\n}\n----\n\n=== General\n\n==== Column settings\n\n|===\n| Property | Type | Optional | Default | Description\n\n| field | `string` | \u0026#10060; |  | Path to field that should be rendered.\n| orderName | `string` | \u0026#10004;\u0026#65039; |  | Custom ordering parameter.\n| valueFormatter | `function` | \u0026#10004;\u0026#65039; |  | Callback to transform the cell's data.\n| valueGetter | `function` | \u0026#10004;\u0026#65039; |  | Callback to transform the row model.\n| label | `string` |\u0026#10004;\u0026#65039; | '' | Column label; can be a localization key.\n| hideable | `boolean` | \u0026#10004;\u0026#65039; | false | Defines if the column is hideable.\n| visible | `boolean` | \u0026#10004;\u0026#65039; | true | Defines if the column is visible. If used with hideable, the column will be in the column menu unchecked.\n| actionColumn | `boolean` | \u0026#10004;\u0026#65039; |  | Defines if the column is for actions.\n| sortable | `boolean` | \u0026#10004;\u0026#65039; | true | Defines if the column should be sortable.\n| sticky | `boolean` | \u0026#10004;\u0026#65039; |  | Defines if the column should be sticky at the begining of the table.\n| stickyEnd | `boolean` | \u0026#10004;\u0026#65039; |  | Defines if the column should be sticky at the end of the table.\n| template | `string` | \u0026#10004;\u0026#65039; | `'labelTemplate'` | Defines how the cell should be rendered.\n\nIf `componentTemplate` is used you must define the `component` property as well.\n| component | any | \u0026#10004;\u0026#65039; |  | Defines what component to use to render the cell.\n\nUse with `template = 'componentTemplate'`.\n| componentOptions | ComponentOptions | \u0026#10004;\u0026#65039; |  | Provide input, output bindings for the component rendered in the cell.\n\nUse with `template = 'componentTemplate'`.\n| parent | any | \u0026#10004;\u0026#65039; |  | Defines what component to use to render the cell.\n\nUse with `template = 'componentTemplate'`.\n| identifier | boolean | \u0026#10004;\u0026#65039; |  | Defines if the cell should render as header for a11y reasons.\n| columnClasses | boolean | \u0026#10004;\u0026#65039; |  | Defines custom `CSS` class for the column it self.\n| cellClasses | boolean | \u0026#10004;\u0026#65039; |  | Defines custom `CSS` class for the column cells.\n| sortButtonAriaLabel | string | \u0026#10004;\u0026#65039; |  | Custom aria label for sort button.\n|===\n\n[NOTE]\n====\nThe `template` field can have the following values:\n\n* `'labelTemplate'`\n* `'labelBoldTemplate'`\n* `'numericTemplate'`\n* `'iconTemplate'`\n* `'componentTemplate'`\n====\n\n[source, javascript]\n.some.ts\n----\n...\nthis.columnSettings: DataTableColumnDefinition[] = [\n  {\n    field: 'atomicNumber',\n    label: 'position',\n    sortable: true,\n    hideable: true,\n    visible: true,\n    columnClass: 'table__atomic-numbers_bold',\n  },\n  {\n    field: 'type',\n    label: 'Item type',\n    valueFormatter: (type) =\u003e ('ITEM_TYPES.' + type)\n    sortable: true,\n    hideable: true,\n    visible: true,\n  },\n  {\n    label: 'name',\n    sortable: true,\n    template: 'labelBoldTemplate',\n    hideable: true,\n    visible: true,\n    identifier: true,\n  },\n  {\n    label: 'weight',\n    valueGetter: (item) =\u003e (item.type === 'NET' ? item.netWeight : item.grossWeight)\n    template: 'numericTemplate',\n    sortable: true,\n    hideable: true,\n    visible: true,\n  },\n  {\n    field: 'symbol',\n    label: 'symbol',\n    sortable: true,\n    hideable: true,\n    visible: true,\n  },\n  {\n    field: 'actions',\n    label: 'actions',\n    sortable: false,\n    hideable: false,\n    visible: true,\n    stickyEnd: true,\n    template: 'componentTemplate',\n    component: RowActionComponent,\n    componentOptions: {\n      inputs: {\n        // In RowActionComponent: `@Input() icon: string;`\n        icon: 'details'\n      },\n      outputs: {\n        // In RowActionComponent: `@Output() clicked = new EventEmitter\u003cRowDataType\u003e();`\n        clicked: (rowData: RowDataType) =\u003e {\n          // Do something\n        }\n      }\n    }\n  },\n];\n...\n----\n\n==== Table settings\n\n|===\n| Attribute | Binding | Type | Optional | Default | Description\n\n| name | `@Input` | `string` | \u0026#10004;\u0026#65039; | `''` | Name of the table.\n| caption | `@Input` | `string` | \u0026#10004;\u0026#65039; | `''` | Caption of the table.\n| dataSource | `@Input` | `any[] \\| ServerSideDataSource \\| MatTableDataSource` | \u0026#10060; | `[]` | DataSource.\n| columnSettings | `@Input` | `DataTableColumnDefinition[]` | \u0026#10060; |  | Column settings.\n| detailTemplate | `@Input` | `ngTemplateRef` | \u0026#10004;\u0026#65039; | `#defaultTemplate` | Custom user defined *detail* view\n| showDetails |`@Input`  | `boolean` | \u0026#10004;\u0026#65039; | `false` | Flag indicating to render with *detail* rows.\n| hasNoRowsToShowOverlayNoBelow |`@Input`  | `boolean` | \u0026#10004;\u0026#65039; | `false` | Flag indicating to render no data row in the table or below the table.\n| useSelection | `@Input` | `boolean` | \u0026#10004;\u0026#65039; | `false` | Flag to render with checkboxes for multiselect rows.\n| hideSelectParameter | `@Input` | `string` | \u0026#10004;\u0026#65039; |  | Parameter name, a row[hideSelectParameter] value will hide / enable the select checkbox on the given row, if used with useSelection.\n| color | `@Input` | `ThemePalette` | \u0026#10004;\u0026#65039; | `primary` | Use this palette for mat elements.\n| showColumnMenu | `@Input` | `boolean` | \u0026#10004;\u0026#65039; | `false` | Flag to render column menu.\n| hasSorting | `@Input` | `boolean` | \u0026#10004;\u0026#65039; | `false` | Flag to enable sorting.\n| fixedHeader | `@Input` | `boolean` | \u0026#10004;\u0026#65039; | `false` | Flag to have sticky header.\n| hasExtColMenu | `@Input` | `boolean` | \u0026#10004;\u0026#65039; | `false` | Flag to use external column menu.\n| detailClosedIcon | `@Input` | `string` | \u0026#10004;\u0026#65039; | `chevron-right` | Icon to use for closed details.\n| detailOpenIcon | `@Input` | `string` | \u0026#10004;\u0026#65039; | `chevron-down` | Icon to use for opened details.\n| sortingNoSort | `@Input` | `string` | \u0026#10004;\u0026#65039; | `sort` | Icon to use for no sort active.\n| sortingAsc | `@Input` | `string` | \u0026#10004;\u0026#65039; | `sort-ascending` | Icon to use for sort ascending.\n| sortingDesc | `@Input` | `string` | \u0026#10004;\u0026#65039; | `sort-descending` | Icon to use for sort descending.\n| rowClass | `@Input` | `function` | \u0026#10004;\u0026#65039; | `() =\u003e ''` | Dynamically set per-row CSS class.\n| evenRowClass | `@Input` | `string` | \u0026#10004;\u0026#65039; |  | Dynamically set even row CSS class.\n| oddRowClass | `@Input` | `string` | \u0026#10004;\u0026#65039; |  | Dynamically set odd row CSS class.\n| headerClass | `@Input` | `srting` | \u0026#10004;\u0026#65039; |  | Defines the class used by `thead \u003e tr`.\n| detailStickyColumns | `@Input` | `boolean` | \u0026#10004;\u0026#65039; |  | If set true the detail row will reflect the same sticky column structure.\n| rowClick | `@Output` | `RowClickEvent` | \u0026#10004;\u0026#65039; |  | Emitted row click event.\n| cellClick | `@Output` | `CellClickEvent` | \u0026#10004;\u0026#65039; |  | Emitted cell click event.\n| rowKeyDown | `@Output` | `RowKeyDownEvent` | \u0026#10004;\u0026#65039; |  | Emitted row onkeydown event.\n| columnSelectionChange | `@Output` | `ColumnSelectionEvent` | \u0026#10004;\u0026#65039; |  | Emitted column selection event.\n|===\n\n\n\nImportant: since Ivy, the order of the properties matter.\nTry to set up flags first, and more complex parameters later.\n(e.g. `showDetails` before `dataSource`)\n\n[source, xml]\n.some.html\n----\n\u003cic-data-table\n  [name]=\"'table'\"\n  [columnSettings]=\"columnSettings\"\n  [detailTemplate]=\"detailTemplate\"\n  [showDetails]=\"showDetails\"\n  [useSelection]=\"useSelection\"\n  [showColumnMenu]=\"showColumnMenu\"\n  [hasSorting]=\"hasSorting\"\n  [fixedHeader]=\"fixedHeader\"\n  [dataSource]=\"dataSource\"\n  (rowClick)=\"rowClick($event)\"\n  (cellClick)=\"cellClick($event)\"\n  (columnSelectionChange)=\"columnSelectionChange($event)\"\n\u003e\u003c/ic-data-table\u003e\n----\n\n==== Table functions\nYou can call the following functions directly after selecting the table with `@ViewChild(DataTableComponent, { static: true })`:\n\n* `expandAll()` : Opens up all details, if provided\n* `collapseAll()`: Closes every opened detail view\n\n===== Custom Sorting\nThe table contains a built-in, custom, MatSort-based sorting for client- and serverside as well.\nIt's plugged in onto the `datasource` of the table (which you can provide).\nIf you wish to overwrite it (for instance, use your own `DataSource` and a query-based sorting), you can use the\nfollowing code to modify or remove the default sorting mechanism:\n\n```\nthis.yourCustomDatasource.sortData = (data: any[], sort: MatSort) =\u003e {\n      console.log(\"sort information: \", sort);\n      // implement your sort logic here\n    };\n```\n\n==== DataSource configuration\n\n[source, javascript]\n.some.server-side-datasource.ts\n----\n...\nthis.data = new ServerSideDataSource(\n  this.getStaticData.bind(this),\n  'list',\n  this.paginationParams,\n  this.table.sort,\n  this.table.rowSelection,\n  this.paginatorIntl,\n  this.cdRef,\n  this.withDetail,\n  false\n);\n...\n----\n\n[source, javascript]\n.some.client-side-datasource.ts\n----\n...\nthis.data = new MatTableDataSource([]);\n...\n----\n\n=== Localization\n\nFor translation we utilize `@ngx-translate`.\n\n* `ICELL_DATA_TABLE.SORT_BUTTON_LABEL` used for localizing\n  ** uses 2 input properties:\n    *** `id` represents the columns locale_key\n    *** `direction`:\n      **** `ICELL_DATA_TABLE.SORT_NONE` used if no sort is set\n      **** `ICELL_DATA_TABLE.SORT_ASC` used if sort is ascending\n      **** `ICELL_DATA_TABLE.SORT_DESC` used if sort is descending\n\n[source, json]\n----\n{\n  ...\n  \"ICELL_DATA_TABLE\": {\n    \"SORT_BUTTON_LABEL\": \"Change sorting for {{id}}, {{direction}}.\",\n    \"SORT_NONE\": \"no sorting\",\n    \"SORT_ASC\": \"sorting ascending\",\n    \"SORT_DESC\": \"sorting descending\",\n    \"NOROWSTOSHOW\": \"No data present.\",\n    \"EMPTY_CELL\": \"-\"\n  }\n  ...\n}\n----\n\n=== Examples\n\n=== Live StackBlitz example\n\nhttps://stackblitz.com/edit/icell-datatable-demo-angular11[StackBlitz reference implementation can be found here.]\n\n==== Run example project\n\nDelete the one line (`//registry.npmjs.org/:_authToken=${NPM_TOKEN}`) from `.npmrc` file in your project, if you want to build on a local environment.\n\n[source, bash]\n----\n# Build and pack a local version\nnpm run pack\n# Switch directories\ncd ./examples/icell-data-table-example/\n# Edit the package.json to have the proper path to the tgz\n#   \"@i-cell/data-table\": \"file:../../i-cell-data-table-\u003cversion\u003e.tgz\",\n# Install dependencies\nnpm i\n# Start up the example\nnpm start\n----\n\nIf no issues emerge the application should up and running, so you can start to experiment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi-cell-mobilsoft-open-source%2Ficell-data-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi-cell-mobilsoft-open-source%2Ficell-data-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi-cell-mobilsoft-open-source%2Ficell-data-table/lists"}