{"id":13660695,"url":"https://github.com/mazdik/ng-mazdik","last_synced_at":"2025-04-24T23:30:38.708Z","repository":{"id":51313292,"uuid":"81359894","full_name":"mazdik/ng-mazdik","owner":"mazdik","description":"Angular UI component library","archived":false,"fork":false,"pushed_at":"2023-08-14T22:59:24.000Z","size":2120,"stargazers_count":89,"open_issues_count":15,"forks_count":34,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-10T15:44:05.631Z","etag":null,"topics":["angular","angular-crud","datatable","grid","table"],"latest_commit_sha":null,"homepage":"https://mazdik.github.io/ng-mazdik","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/mazdik.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}},"created_at":"2017-02-08T18:06:36.000Z","updated_at":"2023-09-15T08:29:18.000Z","dependencies_parsed_at":"2024-01-15T20:50:45.728Z","dependency_job_id":"88231897-67bd-430e-b348-148f537a481b","html_url":"https://github.com/mazdik/ng-mazdik","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazdik%2Fng-mazdik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazdik%2Fng-mazdik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazdik%2Fng-mazdik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazdik%2Fng-mazdik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mazdik","download_url":"https://codeload.github.com/mazdik/ng-mazdik/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250727441,"owners_count":21477316,"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","angular-crud","datatable","grid","table"],"created_at":"2024-08-02T05:01:24.682Z","updated_at":"2025-04-24T23:30:38.288Z","avatar_url":"https://github.com/mazdik.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Angular UI component library\n\n```\nnpm i ng-mazdik-lib --save\n```\n\n### Styles\nAdd global styles in angular.json\n```json\n\"styles\": [\n  \"src/styles.css\",\n  \"node_modules/ng-mazdik-lib/styles/bundled.css\"\n],\n```\n\n\u003ca target=\"_blank\" href=\"https://mazdik.github.io/ng-mazdik/\"\u003eDemos\u003c/a\u003e  \n\n### Sample crud-table\nFeature-rich data table component for Angular with CRUD operations.\n```typescript\nimport {Component}  from '@angular/core';\nimport {ColumnBase, CdtSettings, DataSource, DataManager, Validators} from 'ng-mazdik-lib';\nimport {DemoService} from './samples/services';\n\n@Component({\n  selector: 'my-app',\n  template: `\u003capp-crud-table [dataManager]=\"dataManager\"\u003e\u003c/app-crud-table\u003e\n  \u003capp-notify\u003e\u003c/app-notify\u003e`\n})\n\nexport class PlayersComponent {\n\n    dataManager: DataManager;\n    columns: ColumnBase[] = [\n        {\n            title: 'Id', \n            name: 'id', \n            sortable: false, \n            filter: false, \n            frozen: true,\n            resizeable: false,\n            formHidden: true,\n        },\n        {\n            title: 'Name', \n            name: 'name', \n            frozen: true, \n            width: 250,\n            validatorFunc: Validators.get({required: true, minLength: 2, pattern: '^[a-zA-Z ]+$'}),\n            editable: true,\n        },\n        {\n            title: 'Race',\n            name: 'race',\n            type: 'select',\n            options: [\n                { id: 'ASMODIANS', name: 'ASMODIANS' },\n                { id: 'ELYOS', name: 'ELYOS' },\n            ],\n            editable: true,\n        },\n        {\n            title: 'Cascading Select',\n            name: 'note',\n            editable: true,\n            type: 'select-dropdown',\n            options: [\n                { id: 'ASM1', name: 'ASM note 1', parentId: 'ASMODIANS' },\n                { id: 'ASM2', name: 'ASM note 2', parentId: 'ASMODIANS' },\n                { id: 'ASM3', name: 'ASM note 3', parentId: 'ASMODIANS' },\n                { id: 'ASM4', name: 'ASM note 4', parentId: 'ASMODIANS' },\n                { id: 'ELY1', name: 'ELY note 1', parentId: 'ELYOS' },\n                { id: 'ELY2', name: 'ELY note 2', parentId: 'ELYOS' },\n                { id: 'ELY3', name: 'ELY note 3', parentId: 'ELYOS' },\n            ],\n            dependsColumn: 'race',\n            multiSelectFilter: true,\n        },\n        {\n            title: 'Gender',\n            name: 'gender',\n            type: 'radio',\n            options: [\n                { id: 'MALE', name: 'MALE' },\n                { id: 'FEMALE', name: 'FEMALE' },\n            ],\n            editable: true,\n        },\n        {\n            title: 'Exp',\n            name: 'exp',\n            type: 'number',\n            validatorFunc: Validators.get({required: true, minLength: 2, maxLength: 10}),\n            editable: true,\n        },\n        {\n            title: 'Last online', \n            name: 'last_online', \n            type: 'date',\n            editable: true,\n        },\n        {\n          title: 'Account name',\n          name: 'account_name',\n          editable: true,\n          type: 'select-popup',\n          optionsUrl: 'assets/accounts.json',\n          keyColumn: 'account_id',\n        },\n        {\n          title: 'Account id',\n          name: 'account_id',\n          formHidden: true,\n          tableHidden: true,\n        }\n    ];\n    settings: CdtSettings = new CdtSettings({\n        crud: true,\n        bodyHeight: 380\n    });\n\n    constructor(private demoService: DemoService) {\n      const service = this.demoService; // your custom service\n      this.dataManager = new DataManager(this.columns, this.settings, service);\n    }\n}\n```\n### Sample data-table\n```typescript\nimport {ColumnBase, Settings, DataTable} from 'ng-mazdik-lib';\n\n@Component({\n  selector: 'app-data-table-demo',\n  template: `\u003capp-data-table [table]=\"dataTable\"\u003e\u003c/app-data-table\u003e`\n})\n\nexport class DataTableDemoComponent {\n\n  dataTable: DataTable;\n  columns: ColumnBase[];\n  settings: Settings;\n\n  constructor() {\n    this.dataTable = new DataTable(this.columns, this.settings);\n    this.dataTable.rows = data[];\n  }\n}\n```\n### Sample tree-table\n```typescript\nimport {ColumnBase, Settings, TreeTable} from 'ng-mazdik-lib';\nimport {TreeDemoService} from './tree-demo.service';\n\n@Component({\n  selector: 'app-tree-table-demo',\n  template: `\u003capp-tree-table [treeTable]=\"treeTable\"\u003e\u003c/app-tree-table\u003e`\n})\n\nexport class TreeTableDemoComponent {\n\n  treeTable: TreeTable;\n  settings: Settings;\n  columns: ColumnBase[];\n\n  constructor(private treeService: TreeDemoService) {\n    this.treeTable = new TreeTable(this.columns, this.settings, this.treeService);\n  }\n}\n```\n\n\n## Features\n* Filtering (column filters and an optional global filter)\n* Sorting (multiple columns)\n* Pagination\n* Modal (draggable and resizable)\n* Create/Update/Delete (composite primary keys)\n* Single row view (with sortable colums and values)\n* Loading indicator\n* Row selection (single, multiple, checkbox, radio)\n* Scrolling with fixed header horizontally and vertically\n* Frozen columns\n* Dynamic forms with validation\n* Modal select list (with search and pagination)\n* Editable\n* Localization\n* Column resizing\n* Cascading select (client/server side dynamic drop-down lists)\n* Tree table (flatten/unflatten tree, lazy loading)\n* Row Grouping (multiple columns)\n* Summary Row (aggregation on a column)\n* Live Updates\n* Virtual scroll with dynamic row height\n* Header and Cell Templates\n* Keyboard navigation\n* Export Data to CSV\n* No external dependencies\n\n### Custom service\n```typescript\nexport class YourService implements DataSource {\n}\n\ninterface DataSource {\n  getItems(requestMeta: RequestMetadata): Promise\u003cPagedResult\u003e;\n  getItem(row: any): Promise\u003cany\u003e;\n  post(row: any): Promise\u003cany\u003e;\n  put(row: any): Promise\u003cany\u003e;\n  delete(row: any): Promise\u003cany\u003e;\n  getOptions?(url: string, parentId: any): Promise\u003cany\u003e;\n}\nexport interface RequestMetadata {\n  pageMeta: PageMetadata;\n  sortMeta: SortMetadata[];\n  filters: FilterMetadata;\n  globalFilterValue?: string;\n}\nexport interface PagedResult {\n  items: any[];\n  _meta: PageMetadata;\n}\nexport interface PageMetadata {\n  currentPage: number;\n  perPage: number;\n  totalCount?: number;\n  pageCount?: number;\n  maxRowCount?: number;\n}\n```\n\n### Column\n\n| Attribute        | Type       | Default | Description |\n|------------------|------------|---------|-------------|\n| name             | string     | null    |             |\n| title            | string     | null    |             |\n| sortable         | boolean    | true    |             |\n| filter           | boolean    | true    |             |\n| options          | SelectItem[] | null | |\n| optionsUrl       | string     | null    |             |\n| width            | number     | null    |             |\n| frozen           | boolean    | false   |             |\n| type             | text / password / number / select / radio / checkbox / textarea / date / datetime-local / month / select-popup / select-dropdown | null | |\n| validatorFunc    | (name: string, value: any) =\u003e string[] | null | |\n| editable         | boolean    | false   |             |\n| resizeable       | boolean    | true    |             |\n| dependsColumn    | string     | null    |             |\n| cellTemplate     | TemplateRef | null   |             |\n| formTemplate     | TemplateRef | null   |             |\n| headerCellTemplate | TemplateRef | null |             |\n| formHidden       | boolean    | false   |             |\n| tableHidden      | boolean    | false   |             |\n| cellClass        | string / Function | null |         |\n| headerCellClass  | string     | null    |             |\n| keyColumn        | string     | null    |             |\n| multiSelectFilter | boolean   | false   |             |\n| minWidth         | number     | 50      |             |\n| maxWidth         | number     | 500     |             |\n| aggregation      | sum / average / max / min / count | null | |\n| filterValues     | (columnName: string) =\u003e Promise\u003cSelectItem[]\u003e / SelectItem[] / string | null | |\n| dataType         | string /number /date | null |      |\n| formDisableOnEdit | boolean   | false   |             |\n| pipe             | PipeTransform | null |             |\n\n### Settings\n\n| Attribute        | Type       | Default | Description |\n|------------------|------------|---------|-------------|\n| bodyHeight       | number     | null    |             |\n| sortable         | boolean    | true    |             |\n| filter           | boolean    | true    |             |\n| multipleSort     | boolean    | false   |             |\n| trackByProp      | string     | null    |             |\n| groupRowsBy      | string[]   | null    |             |\n| selectionMultiple | boolean   | false   |             |\n| selectionMode    | checkbox / radio | null |          |\n| virtualScroll    | boolean    | false   |             |\n| rowClass         | string / Function | false |        |\n| rowHeight        | number     | 30      | px          |\n| rowNumber        | boolean    | true    |             |\n| hoverEvents      | boolean    | false   | mouseover/mouseout |\n| contextMenu      | boolean    | false   | event       |\n| editMode         | editCellOnDblClick / editProgrammatically | editCellOnDblClick |             |\n| paginator        | boolean    | true    |              |\n| rowHeightProp    | string     | null    | row.$$height |\n| isEditableCellProp | string   | null    | row.$$editable |\n\n### CdtSettings extends Settings\n| Attribute        | Type       | Default | Description |\n|------------------|------------|---------|-------------|\n| crud             | boolean    | false   |             |\n| initLoad         | boolean    | true    |             |\n| globalFilter     | boolean    | false   |             |\n| singleRowView    | boolean    | true    |             |\n| exportAction     | boolean    | false   | csv         |\n| columnToggleAction | boolean  | false   |             |\n| clearAllFiltersAction | boolean | false |             |\n| clearAllFiltersIcon | boolean | true    |             |\n\n\n```typescript\nexport interface SelectItem {\n  id: any;\n  name: string;\n  parentId?: any;\n}\n```\n\n### Sample event subscriptions\n```typescript\nimport {Subscription} from 'rxjs';\n\nprivate subscriptions: Subscription[] = [];\n\n  ngOnInit() {\n    const subSelection = this.table.events.selectionSource$.subscribe(() =\u003e {\n      this.table.getSelection();\n    });\n    this.subscriptions.push(subSelection);\n  }\n\n  ngOnDestroy() {\n    this.subscriptions.forEach(s =\u003e s.unsubscribe());\n  }\n```\n\n### Sample translate\n```typescript\nimport {DtMessages, DtMessagesEn} from 'ng-mazdik-lib';\n\nmessages: DtMessages = new DtMessagesEn({\n  empty: 'No data to display',\n  titleDetailView: 'Item details',\n  titleCreate: 'Create a new item'\n});\nthis.dataManager = new DataManager(this.columns, this.settings, this.service, this.messages);\n```\n\n### Lib\n| Componnent                     | Description        |\n|--------------------------------|--------------------|\n| app-context-menu               |                    |\n| app-dropdown-select            |                    |\n| app-dynamic-form               |                    |\n| app-inline-edit, [inline-edit] |                    |\n| app-notify                     | with NotifyService |\n| app-modal                      |                    |\n| app-modal-edit-form            |                    |\n| app-modal-select               |                    |\n| app-pagination                 |                    |\n| app-row-view                   |                    |\n| app-scroller, [scroller]       | virtual scroll     |\n| app-select-list                |                    |\n| dt-toolbar                     |                    |\n| tree                           |                    |\n| app-tree-view                  |                    |\n| app-dual-list-box              |                    |\n| [appResizable]                 |                    |\n| [appDraggable]                 |                    |\n| [appDroppable]                 | html5              |\n| [appDropdown]                  |                    |\n\n### Templates\n```typescript\n\u003capp-data-table[table]=\"table\"\u003e\n  \u003cng-template dtHeaderTemplate\u003e\u003c/ng-template\u003e\n  \u003cng-template dtRowGroupTemplate let-row=\"row\"\u003e\u003c/ng-template\u003e\n\u003c/app-data-table\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazdik%2Fng-mazdik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmazdik%2Fng-mazdik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazdik%2Fng-mazdik/lists"}