{"id":40516352,"url":"https://github.com/rapltech/ng-datatable-x","last_synced_at":"2026-01-20T20:36:10.380Z","repository":{"id":22423042,"uuid":"96176112","full_name":"rapltech/ng-datatable-x","owner":"rapltech","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-23T06:09:43.000Z","size":5997,"stargazers_count":14,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-11-23T13:01:33.286Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/rapltech.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":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-07-04T04:46:23.000Z","updated_at":"2025-10-23T06:09:47.000Z","dependencies_parsed_at":"2023-09-22T22:02:39.943Z","dependency_job_id":"ad8c1627-d264-4708-af05-ff92153c2111","html_url":"https://github.com/rapltech/ng-datatable-x","commit_stats":{"total_commits":178,"total_committers":6,"mean_commits":"29.666666666666668","dds":0.4213483146067416,"last_synced_commit":"d5439e5708fa13f86599c81f1c88d4e90b9555b5"},"previous_names":["rapltech/ng-datatable-x","linkstreet/ng-datatable-x"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rapltech/ng-datatable-x","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapltech%2Fng-datatable-x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapltech%2Fng-datatable-x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapltech%2Fng-datatable-x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapltech%2Fng-datatable-x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rapltech","download_url":"https://codeload.github.com/rapltech/ng-datatable-x/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapltech%2Fng-datatable-x/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28613117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T18:56:40.769Z","status":"ssl_error","status_checked_at":"2026-01-20T18:54:26.653Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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"],"created_at":"2026-01-20T20:36:09.736Z","updated_at":"2026-01-20T20:36:10.368Z","avatar_url":"https://github.com/rapltech.png","language":"TypeScript","readme":"# ng-datatable-x\n\n`ng-datatable-x` is an Angular component for presenting Datatable.\nIt was built for modern browsers using _TypeScript, CSS3 and HTML5_ and Angular `\u003e=19.0.0`.\n\nSee the [changelog](https://github.com/rapltech/ng-datatable-x/blob/master/CHANGELOG.md) for recent changes.\n\n### Screenshots\n\n![DataTable Users List](screenshots/users.png)\n![DataTable Users List](screenshots/users-expand.png)\n![DataTable Users List](screenshots/users-select.png)\n![DataTable Users List](screenshots/users-small.png)\n![DataTable Users List](screenshots/users-search.png)\n![DataTable Users List](screenshots/users-action.png)\n![DataTable Users List](screenshots/table-responsive.png)\n\n### Demo\n\nComing Soon\n\n### Installation\n\nThe latest release of ng-datatable-x can be installed from npm\n\n`npm install @rapltech/ng-datatable-x`\n\n### Getting started\n\nAfter Installing, include `NgDatatableX` in your application module like:\n\n```\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgDatatableX } from 'ng-datatable-x';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [NgDatatableX, BrowserModule],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nthen in your app.component.ts you define a table like:\n\n```\nimport { Component } from '@angular/core';\nimport { NgbModal } from '@ng-bootstrap/ng-bootstrap';\nimport { DataTableXComponent } from 'ng-datatable-x';\n\n@Component({\n  selector: 'app',\n  templateUrl: './app.component.html',\n  imports: [\n        DataTableXComponent,\n  ]\n})\nexport class AppComponent {\n    @ViewChild('dataTable') dt: DataTableX;\n    columns: any = [\n        {name: 'Name', sortable: true, class: 'pl-3', searchable: true, searchKey: 'name'},\n        {name: 'Email', sortable: true, class: 'hidden-md-down', searchable: true, searchKey: 'email'},\n        {name: 'Mobile No', sortable: true, class: 'hidden-md-down'},\n        {name: 'Added On', sortable: true, class: 'hidden-md-down'},\n        {name: 'Role', sortable: true, class: 'hidden-xs-down'},\n        {name: 'Status', sortable: true, class: 'hidden-xs-down'},\n        {name: 'Action', sortable: false, class: 'w75 text-center'}\n    ];\n    dataTableConfig: any = {\n        columns: this.columns,\n        route: 'http://api-url-xxx.xx/users', // Send query params page and limit with http get request\n        emptyMessage: '\u003ch5\u003eNo users available\u003c/h5\u003e\u003cp\u003ePlease add a new user\u003c/p\u003e',\n        navbarVisible: true,\n        headerVisible: true,\n        search: true,\n        selectable: true,\n        expandable: true,\n        serialNumber: 'collapse',\n        httpHeaders: ''\n    };\n}\n```\n\nthen in your app.component.html you define html like:\n\n```\n \u003cdiv class=\"card\"\u003e\n      \u003cng-datatable-x #dataTable [config]=\"dataTableConfig\"\u003e\n            \u003cng-template #rowGroups let-row\u003e\n                    \u003ctd [attr.class]=\"columns[0].class\"\u003e\n                        {{row.first_name}} {{row.last_name}}\n                    \u003c/td\u003e\n                    \u003ctd [attr.class]=\"columns[1].class\"\u003e\n                        {{row.email}}\n                    \u003c/td\u003e\n        \u003c/ng-template\u003e\n        \u003cng-template #rowDetails let-row\u003e\n            \u003cdl class=\"row\"\u003e\n                \u003cdt class=\"col-sm-3\"\u003eFull Name\u003c/dt\u003e\n                \u003cdd class=\"col-sm-9\"\u003e{{row.first_name}} {{row.last_name}}\u003c/dd\u003e\n                \u003cdt class=\"col-sm-3\"\u003eEmail\u003c/dt\u003e\n                \u003cdd class=\"col-sm-9\"\u003e{{row.email}}\u003c/dd\u003e\n                \u003cdt class=\"col-sm-3\"\u003eCreated At\u003c/dt\u003e\n                \u003cdd class=\"col-sm-9\"\u003e{{row.created_at | date: 'dd MM y'}}\u003c/dd\u003e\n            \u003c/dl\u003e\n        \u003c/ng-template\u003e\n\n      \u003c/ngx-datatable\u003e\n    \u003c/div\u003e\n```\n\n## Features\n\n- Toolbar\n- Global Search with specific columns\n- Refresh Table Data\n- Show/Hide columns on responsive view\n- Server side Pagination \u0026 Sorting\n- Cell \u0026 Row Selection ( Single, Multi, Checkbox )\n- Row Detail View (Expand Row option)\n- Uses ng-bootstrap and material2 for UI components\n- AoT Compilation Support\n\n#### Configurable Parameters\n\n| Config        | Description                                                                                                                                              |\n| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| columns       | Set of coulmn object array. In coulmn object you can specify name, sortable - true or false, class, searchable: true or false, searchKey.                |\n| route         | Rest Api end point from which you will receive the josn payload                                                                                          |\n| emptyMessage  | Message to display when there is no records available                                                                                                    |\n| navbarVisible | Show and Hide Table Navbar/Toolbar. In this tool bar you have globar search, refresh data and custom button actions that you can pass using ng-template. |\n| headerVisible | Table column header show/hide                                                                                                                            |\n| search        | Global search functionality show/hide                                                                                                                    |\n| selectable    | Tables rows selectable using checkbox. Default value is false                                                                                            |\n| expandable    | Tables rows expandable. Default value is false                                                                                                           |\n| serialNumber  | Serial Number column. You can hide this column by passing css class like- collapse, hidden-md-down to hide in responsive.                                |\n| httpHeaders   | Pass Http header information your api needs authorization.                                                                                               |\n\n## Columns Object Uses\n\n```\n{\n    name: 'Column Title', // Specify table column header title/name, you can pass custom html as well for info icon or anything.\n    sortable: true, // To make column sortable.\n    class: 'w100',  // To provide column classes. You can use this parementer for multiple use cases. To hide column use `collapse` class. To hide columns in responsive view use bootstrap responsive uitlities classess. To fix width use class like w50, w100, w200 etc or you cana create your own class and pass to set width for a column.\n    searchable: true,  // To enable search by this column field in Datatable.\n    searchKey: 'name' // I =f searchable is true then this searchKey will be used to filter data via query string alsong with search value.\n}\n```\n\n## Methods\n\n## refresh()\n\nTo use this method call this using `this.dt.refresh()` to mannulay refresh the data after adding/ modifying or deleting records from datatable. You can specify page number to navigate to any page like `this.dt.page = 1; this.dt.refresh();`\n\n## Your Get API Request:\n\nAPI Endpoint: http://domain.com/endpoint\nQuery Params: page and limit\n\n## Your Get API Response:\n\n```\n    list: [\n        {name:'xyz', email: 'xyz@pqr.com'},\n        {name:'xyz', email: 'xyz@pqr.com'},\n        {name:'xyz', email: 'xyz@pqr.com'}\n    ],\n    pagination: {\n        total: 8,\n        per_page: 15,\n        count: 8,\n        current_page: 1\n    }\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frapltech%2Fng-datatable-x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frapltech%2Fng-datatable-x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frapltech%2Fng-datatable-x/lists"}