{"id":15024636,"url":"https://github.com/bhaveshpatel200/ng-datatable","last_synced_at":"2025-04-12T06:30:57.207Z","repository":{"id":173270927,"uuid":"650103257","full_name":"bhaveshpatel200/ng-datatable","owner":"bhaveshpatel200","description":"ng-datatable is a powerful component for creating dynamic and customizable data tables. It supports large amounts of data, sorting, pagination, and filtering and highly customizable","archived":false,"fork":false,"pushed_at":"2024-06-14T11:32:43.000Z","size":277,"stargazers_count":6,"open_issues_count":5,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T00:01:38.705Z","etag":null,"topics":["angular","angular2","angularcomponent","datagrid","datatable","datatables","datatables-plugin","grid","table"],"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/bhaveshpatel200.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-06T10:47:23.000Z","updated_at":"2025-02-11T23:59:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"e060bbce-e107-4195-8538-fbcea86537b7","html_url":"https://github.com/bhaveshpatel200/ng-datatable","commit_stats":null,"previous_names":["bhaveshpatel200/ng-datatable"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fng-datatable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fng-datatable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fng-datatable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhaveshpatel200%2Fng-datatable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhaveshpatel200","download_url":"https://codeload.github.com/bhaveshpatel200/ng-datatable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248529327,"owners_count":21119490,"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","angular2","angularcomponent","datagrid","datatable","datatables","datatables-plugin","grid","table"],"created_at":"2024-09-24T20:00:40.414Z","updated_at":"2025-04-12T06:30:56.626Z","avatar_url":"https://github.com/bhaveshpatel200.png","language":"TypeScript","readme":"# @bhplugin/ng-datatable\n\n\u003cbr/\u003e\n\n## Example\n\n[Document \u0026 Demos](https://ng-datatable-document.vercel.app)\n\n## Install\n\n#### NPM\n\n```bash\nnpm install @bhplugin/ng-datatable --save\n```\n\n#### Yarn\n\n```bash\nyarn add @bhplugin/ng-datatable\n```\n\n#### Bower\n\n```bash\nbower install @bhplugin/ng-datatable --save\n```\n\n## Usage\n\n#### app.module.ts\n\n```bash\nimport { NgModule } from '@angular/core';\nimport { DataTableModule } from '@bhplugin/ng-datatable';\n\n@NgModule({\n imports: [\n ...\n DataTableModule\n ],\n})\nexport class AppModule {}\n```\n\n#### app.component.html\n\n```html\n\u003cng-datatable [rows]=\"rows\" [columns]=\"cols\"\u003e \u003c/ng-datatable\u003e\n```\n\n#### app.component.ts\n\n```html\n\nimport { Component } from '@angular/core';\nimport { colDef } from '@bhplugin/ng-datatable';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n})\n\nexport class AppComponent {\n cols: Array\u003ccolDef\u003e = [];\n rows: Array\u003cany\u003e = [];\n\n constructor() {\n this.initData();\n }\n\n initData(){\n this.cols = [\n { field: \"id\", title: \"ID\", filter: false },\n { field: \"name\", title: \"Name\" },\n { field: \"username\", title: \"Username\" },\n { field: \"email\", title: \"Email\" },\n { field: \"phone\", title: \"Phone\" },\n { field: \"date\", title: \"Date\", type: \"date\" },\n { field: \"active\", title: \"Active\", type: \"bool\" },\n { field: \"age\", title: \"Age\", type: \"number\" },\n { field: \"address.city\", title: \"Address\" },\n { field: \"company.name\", title: \"Company\" },\n ];\n\n this.rows = [\n {\n id: 1,\n name: \"Leanne Graham\",\n username: \"Bret\",\n email: \"Sincere@april.biz\",\n address: {\n street: \"Kulas Light\",\n suite: \"Apt. 556\",\n city: \"Gwenborough\",\n zipcode: \"92998-3874\",\n geo: {\n lat: \"-37.3159\",\n lng: \"81.1496\",\n },\n },\n phone: \"1-770-736-8031 x56442\",\n website: \"hildegard.org\",\n company: {\n name: \"Romaguera-Crona\",\n catchPhrase: \"Multi-layered client-server neural-net\",\n bs: \"harness real-time e-markets\",\n },\n date: \"Tue Sep 27 2022 22:19:57\",\n age: 10,\n active: true,\n },\n .......\n ];\n }\n}\n```\n\n## Props\n\n| Props | Type | Default | Description |\n| ----------------------- | :---------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **columns (required)** | array\u003ccolDef\u003e | [] | table columns |\n| **rows (required)** | array\u003cany\u003e | [] | table rows |\n| **isServerMode** | boolean | false | set **_true_** if you need server side pagination. |\n| **totalRows** | number | 0 | total number of rows. **_totalRows_** required when **_isServerMode_** is true |\n| **skin** | string | \"bh-table-striped bh-table-hover\" | custom class for skin ('**bh-table-striped**' - for stripe row, '**bh-table-hover**' - for hover row, '**bh-table-bordered**' - for bordered row, '**bh-table-compact**' - for compact table) |\n| **loading** | boolean | false | enable loader |\n| **hasCheckbox** | boolean | false | enable checkbox |\n| **search** | string | \"\" | enable global search |\n| **page** | number | 1 | current page |\n| **pageSize** | number | 10 | number of rows per page |\n| **pageSizeOptions** | array\u003cnumber\u003e | [10, 20, 30, 50, 100] | pagesize options |\n| **showPageSize** | boolean | true | enable pagesize options |\n| **rowClass** | array\u003cstring\u003e, function | \"\" | custom row class |\n| **cellClass** | array\u003cstring\u003e, function | \"\" | custom cell class |\n| **sortable** | boolean | true | enable sorting |\n| **sortColumn** | string | \"id\" | name of sort column |\n| **sortDirection** | string | \"asc\" | sort direction (asc or desc) |\n| **columnFilter** | boolean | false | enable individual column filter |\n| **pagination** | boolean | true | enable pagination |\n| **showNumbers** | boolean | true | enable numbers pagination |\n| **showNumbersCount** | number | 5 | show numbers of count in pagination |\n| **showFirstPage** | boolean | true | enable first page in pagination |\n| **showLastPage** | boolean | true | enable last page in pagination |\n| **firstArrow** | string | default arrow | custom first page arrow |\n| **lastArrow** | string | default arrow | custom last page arrow |\n| **previousArrow** | string | default arrow | custom previous page arrow |\n| **nextArrow** | string | default arrow | custom next page arrow |\n| **paginationInfo** | string | \"Showing {0} to {1} of {2} entries\" | custom pagination info |\n| **noDataContent** | string | No data available | custom no data message |\n| **stickyHeader** | boolean | false | enable fixed header |\n| **height** | string | 450px | only will be used when stickyHeader enabled |\n| **stickyFirstColumn** | boolean | false | enable fixed first column |\n| **cloneHeaderInFooter** | boolean | false | enable clone header in footer |\n| **selectRowOnClick** | boolean | false | enable to select row(checkbox) on row click |\n\n## Columns options\n\n| Props | Type | Default | Description |\n| ---------------- | :--------------- | --------- | ----------------------------------------------------- |\n| **isUnique** | boolean | false | db column is primary key or not |\n| **field** | string | \"\" | db column name |\n| **title** | string | \"\" | display column name |\n| **value** | string | \"\" | filter value if filter enabled |\n| **condition** | string | \"contain\" | default condition for column filter if filter enabled |\n| **type** | string | \"\" | column type (string, date, number, bool) |\n| **width** | string | \"\" | custom width of column |\n| **minWidth** | string | \"\" | custom minimum width of column |\n| **maxWidth** | string | \"\" | custom maximum width of column |\n| **hide** | boolean | false | show/hide column |\n| **filter** | boolean | true | enable column filter |\n| **search** | boolean | true | enabled global search |\n| **sort** | boolean | true | enable sorting |\n| **cellRenderer** | function, string | | custom cell rendering |\n| **headerClass** | string | \"\" | custom header cell class |\n| **cellClass** | string | \"\" | custom cell class |\n\n## Events\n\n| Name | Description |\n| ------------------ | --------------------------------------------- |\n| **sortChange** | will trigger when sorting changed |\n| **searchChange** | will trigger when search changed |\n| **pageChange** | will trigger when page changed |\n| **pageSizeChange** | will trigger when pagesize changed |\n| **rowSelect** | will trigger when row selected using checkbox |\n| **filterChange** | will trigger when column filter changed |\n| **rowClick** | will trigger when row clicked |\n| **rowDBClick** | will trigger when row double clicked |\n\n## Methods\n\n| Name | Description |\n| ------------------------ | ---------------------------------------------------------------------------- |\n| **reset** | will reset all options like selected rows, filter, search, currennt page etc |\n| **getSelectedRows** | will returns all selected rows |\n| **getColumnFilters** | will return all column filters |\n| **clearSelectedRows** | will unselect all selected rows |\n| **selectRow(index)** | will select row with the given index (non-existent row will be ignored) |\n| **unselectRow(index)** | will unselect row with the given index (non-existent row will be ignored) |\n| **isRowSelected(index)** | will return true if the row with given index is selected |\n\n\u003cbr\u003e\n\n## License\n\n**_@bhplugin/ng-datatable_** is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n\n\u003cbr\u003e\n\n## **Our other plugins**\n\n### Vue3 Datatable - [**@bhplugin/vue3-datatable**](https://www.npmjs.com/package/@bhplugin/vue3-datatable)\n\n\u003cbr\u003e\n\n## Support\n\n\u003ca target=\"_blank\" href=\"https://www.buymeacoffee.com/bhplugin\"\u003e\n \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"60\"\u003e\n\u003c/a\u003e\n","funding_links":["https://www.buymeacoffee.com/bhplugin"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhaveshpatel200%2Fng-datatable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhaveshpatel200%2Fng-datatable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhaveshpatel200%2Fng-datatable/lists"}