{"id":16767353,"url":"https://github.com/beiduo/ng-datatable","last_synced_at":"2026-05-18T22:06:13.451Z","repository":{"id":72998405,"uuid":"77677151","full_name":"beiduo/ng-datatable","owner":"beiduo","description":"datatable component for angular 1.5+","archived":false,"fork":false,"pushed_at":"2018-09-21T06:32:52.000Z","size":1220,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-23T00:43:07.642Z","etag":null,"topics":["angular1","angularjs","datatable"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beiduo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2016-12-30T09:43:20.000Z","updated_at":"2023-03-05T05:31:22.000Z","dependencies_parsed_at":"2023-06-10T06:15:27.788Z","dependency_job_id":null,"html_url":"https://github.com/beiduo/ng-datatable","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/beiduo%2Fng-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beiduo%2Fng-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beiduo%2Fng-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beiduo%2Fng-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beiduo","download_url":"https://codeload.github.com/beiduo/ng-datatable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243871912,"owners_count":20361380,"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":["angular1","angularjs","datatable"],"created_at":"2024-10-13T06:08:57.649Z","updated_at":"2026-05-18T22:06:13.410Z","avatar_url":"https://github.com/beiduo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Datatable Component For Angular 1.5+\n\n## Description\n\nDocuments and demonstration coming soon\n\n## Usage\n\n### Import component\n\n#### Using script tag\n\n**HTML**\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;script src=\"dist/ng-datatable.min.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n**JS**\n\n```javascript\nangular.module('app', ['ng-datatable']);\n```\n\n#### Using require or Import\n\n**Require**\n\n```javascript\nvar ngDatatable = require('ng-datatable/index');\nangular.module('app', [ngDatatable]);\n```\n\n**Import**\n\n```javascript\nimport ngDatatable from 'ng-datatable/index';\nangular.module('app', [ngDatatable]);\n```\n\n### HTML\n\n```html\n\u003cng-datatable config=\"$ctrl.gridConfig\" receive=\"$ctrl.gridData\" app-scope=\"$ctrl\"\u003e\u003c/ng-datatable\u003e\n```\n\n### javascript\n\n```javascript\nfunction Controller () {\n    this.gridConfig = {\n        // the data will automatically be filtered according to config.params\n        params: {\n            pageNo: 20,\n            pageSize: 1,\n            status: 1\n        },\n        // configure the columns\n        cols: [\n            {\n                // if this column doesn't connect to a field in data, define a random one\n                field: 'title',\n                // text showing in the header\n                displayName: 'Title'\n            },\n            {\n                field: 'amount',\n                displayName: 'Amount',\n                // allow sorting\n                enableSort: true,\n                // angular text filter\n                filter: 'currency:￥',\n                // if text align right\n                alignRight: true,\n            },\n            {\n                field: 'status',\n                displayName: 'Status',\n                // enable filter\n                enableFilter: true,\n                filterOptions: [\n                    {\n                        name: 'text in the menu',\n                        value\n                    }\n                ]\n            },\n            {\n                field: 'xxx',\n                displayName: 'Operation',\n\n                // Template config\n\n                // please see the template documentation\n                \n                cellTemplate: '\u003cdiv class=\"cell\"\u003e\u003ca href=\"javascript:;\"\u003eview detail\u003c/a\u003e\u003c/div\u003e',\n            }\n        ],\n        // default sort option, the data will automatically be sorted\n        sortDefaults: {\n            // field\n            sortBy: 'amount',\n            // order:asc / desc\n            order: 'asc'\n        },\n        // grouping\n        enableGrouping: true,\n        // default value: parent\n        groupBy: 'partnerName',\n        // default value: children\n        groupIn: 'detail',\n        // selection\n        enableSelection: true,\n        // allow selecting allow\n        // if true, a checkbox will show in the first cell of table header\n        enableSelectAll: true,\n        // allow selection in group header\n        enableGroupHeaderSelection: true,\n        // classname\n        customClass: 'asset-table',\n        // Serialize data, in case the displayed text is not the value\n        // in this case, value of status is a number, use this function to transfer to a text\n        dataSerialize: function (data) {\n            return _.assign({}, data, {\n                status: _.find(_.keys(statusMap), function (key) {\n                    return statusMap[key] === data.status;\n                })\n            });\n        },\n        // if return false, this row can not be selected (when enableSelection is true)\n        isRowSelectable: function (row) {\n            return row.entity.status !== 'error';\n        },\n\n        // used in external sorting, filtering and the setParams api\n        // if onFetch is not defined, the datatable will use its internal sorting and filtering\n        onFetch: function (data) {\n            // 'data' is an object mixed config.params and config.sortOptions together\n            // config.sortOptions is a copy of config.sortDefaults when the component initialized\n            // when fetching completed, use setData api to reset the datatable\n        },\n\n        // apiRegister, register api to you own component or anything else\n        apiRegister: function (api) {\n            this.gridApi = api;\n        },\n\n        // onRowSelectionChange will be executed when selecting or unselecting a row\n        onRowSelectionChange: function (row) {\n            if (!row.isSelected) {\n                this.gridOption.allSelected = false;\n                this.dataAllAssets.selected = false;\n            }\n            this.gridUpdateSelection();\n        },\n\n        // onGroupSelectionChange will be executed when selecting or unselecting a group\n        onGroupSelectionChange: function (group) {\n            if (!group.isSelected) {\n                this.gridOption.allSelected = false;\n                this.dataAllAssets.selected = false;\n            }\n            this.gridUpdateSelection();\n        }\n    };\n\n    this.gridConfig.apiRegister = this.gridConfig.apiRegister.bind(this);\n    this.gridConfig.onRowSelectionChange = this.gridConfig.onRowSelectionChange.bind(this);\n    this.gridConfig.onGroupSelectionChange = this.gridConfig.onGroupSelectionChange.bind(this);\n\n\n    // Plain data\n\n    this.gridData = [\n        {\n            asset_no: 'LS54364559',\n            amount: 3265340980,\n            status: 1\n        },\n        {\n            asset_no: 'LS54364559',\n            amount: 6745673,\n            status: 2\n        }\n    ];\n\n    // Grouping data\n\n    this.gridData = [\n        {\n            // the group header, can be a string, or an object\n            // if it is an object, use groupHeaderTemplateUrl or groupHeaderTemplate to define a template\n            partnerName: 'ABC Company',\n            detail: [\n                {\n                    asset_no: 'LS54364559',\n                    amount: 3265340980,\n                    status: 1\n                },\n                {\n                    asset_no: 'LS54364559',\n                    amount: 6745673,\n                    status: 2\n                },\n                {\n                    asset_no: 'LS54364559',\n                    amount: 3265340980,\n                    status: 3\n                },\n                {\n                    asset_no: 'LS54364559',\n                    amount: 7696887,\n                    status: 3\n                },\n                {\n                    asset_no: 'LS54364559',\n                    amount: 14267,\n                    status: 2\n                }\n            ]\n        }\n    ];\n}\n```\n\n### Q \u0026 A\n\n1. How to access my own component/controller in ng-datatable?\n   \n   use ```app-scope``` to pass your controller to the ngDatatable component, then access it by calling ```vm.root.appScope``` in your templates.\n\n## Templating\n\n### Description\n\ntemplate is the string of template, templateUrl is the identify of template in your angular application\n\nyou can get the default templates in ```src/templates/``` directory\n\n### Valid template configuration\n\n- tableTemplateUrl / tableTemplate: ```table.html```\n- theadCellTemplateUrl / theadCellTemplate: ```th.html```\n- filterTemplateUrl / filterTemplate: ```th-filter.html```\n- groupHeaderTemplateUrl / groupHeaderTemplate: ```group-header.html```\n- cellTemplateUrl / cellTemplate: ```cell.html```\n\n### How to configure\n\ntable and groupHeader can be configured in the ```config``` property.\n\nother templates can be configured in the ```config``` property and each element of ```config.cols``` (to template one column)\n\n## Api\n\nApi documentation coming soon\n\n### Get Current States\n\n- getSelections\n- getRows\n- getRowsBy { status: 'failed', amount: 3265340980 }\n- getParams\n- getView\n\n### Set States\n\n- setData($ctrl.dataNew)\n- setParams({status: 2})\n\n### Select All From Outside\n\n- selectAllRows\n- unselectAllRows\n\n### Change Configuration of Selecting\n\n- disableSelection\n- enableSelection\n- toggleSelection\n- disableGroupHeaderSelection\n- enableGroupHeaderSelection\n- disableSelectAll\n- enableSelectAll\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeiduo%2Fng-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeiduo%2Fng-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeiduo%2Fng-datatable/lists"}