{"id":13480783,"url":"https://github.com/akveo/ng2-smart-table","last_synced_at":"2025-05-14T15:02:30.142Z","repository":{"id":10330115,"uuid":"65373403","full_name":"akveo/ng2-smart-table","owner":"akveo","description":"Angular Smart Data Table component","archived":false,"fork":false,"pushed_at":"2024-08-12T16:52:31.000Z","size":66499,"stargazers_count":1631,"open_issues_count":959,"forks_count":884,"subscribers_count":82,"default_branch":"master","last_synced_at":"2025-05-10T11:43:58.137Z","etag":null,"topics":["angular-2","angular2","angular4","aot","aot-compatible","aot-compilation","editable-table","filter","grid-component","ng2","smart-table","smarttable","sort","table"],"latest_commit_sha":null,"homepage":"https://akveo.github.io/ng2-smart-table/","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/akveo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","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-08-10T10:25:51.000Z","updated_at":"2025-04-30T13:40:05.000Z","dependencies_parsed_at":"2024-07-06T05:43:15.453Z","dependency_job_id":"ad432204-f5fb-44bd-ac22-351cc687ccdb","html_url":"https://github.com/akveo/ng2-smart-table","commit_stats":{"total_commits":307,"total_committers":36,"mean_commits":8.527777777777779,"dds":0.5342019543973942,"last_synced_commit":"72c4a3a9dce3dd2ba3b92c26089e5a6e987caa8c"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akveo%2Fng2-smart-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akveo%2Fng2-smart-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akveo%2Fng2-smart-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akveo%2Fng2-smart-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akveo","download_url":"https://codeload.github.com/akveo/ng2-smart-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254168657,"owners_count":22026206,"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-2","angular2","angular4","aot","aot-compatible","aot-compilation","editable-table","filter","grid-component","ng2","smart-table","smarttable","sort","table"],"created_at":"2024-07-31T17:00:44.955Z","updated_at":"2025-05-14T15:02:30.057Z","avatar_url":"https://github.com/akveo.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","UI","TypeScript","Components","Complete projects","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","UI Components"],"sub_categories":["Uncategorized","Lists/Table","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Table"],"readme":"[![Build Status](https://travis-ci.org/akveo/ng2-smart-table.svg?branch=master)](https://travis-ci.org/akveo/ng2-smart-table)\n\n# Angular Smart Table Component\n\nng2-smart-table component made with :heart:  by [Akveo team](http://akveo.com/). Follow us on [Twitter](https://twitter.com/akveo_inc) to get latest news about this component first!\n\n## ⚠ Low Maintenance\nDue to project priority and resource constraints, this project is currently on low maintenance. We recognize that there are a lot of activities around this package. However, we are unable to accommodate the maintenance this project requires.\n\n### Demo\n\n\u003ca target=\"_blank\" href=\"https://akveo.github.io/ng2-smart-table/\"\u003eLive Demo\u003c/a\u003e\n\n![alt tag](projects/demo/src/assets/demo.gif)\n\n## Installation\n\nThe library is available as npm package, so all you need to do is to run the following command:\n\n```\nnpm install --save ng2-smart-table\n```\n\nThis command will create a record in your `package.json` file and install the package into the npm modules folder.\n\n## Minimal Setup Example\n\nFirst thing you need to do is to import the ng2-smart-table directives into your component.\n\n```\n\nimport { Ng2SmartTableModule } from 'ng2-smart-table';\n\n```\n\nThen register it by adding to the list of directives of your module:\n\n```\n// ...\n\n@NgModule({\n  imports: [\n    // ...\n    \n    Ng2SmartTableModule,\n    \n    // ...\n  ],\n  declarations: [ ... ]\n})\n// ...\n```\n\nNow, we need to configure the table and add it into the template. The only \u003cstrong\u003erequired\u003c/strong\u003e setting for the component to start working is a columns configuration.\nLet's register \u003ci\u003esettings\u003c/i\u003e property inside of the component where we want to have the table and configure some columns [Settings documentation](https://akveo.github.io/ng2-smart-table/#/documentation):\n    \n```\nsettings = {\n  columns: {\n    id: {\n      title: 'ID'\n    },\n    name: {\n      title: 'Full Name'\n    },\n    username: {\n      title: 'User Name'\n    },\n    email: {\n      title: 'Email'\n    }\n  }\n};\n```\n\nFinally let's put the ng2-smart-table component inside of the template:\n\n```\n// ...\n\n@Component({\n  template: `\n    \u003cng2-smart-table [settings]=\"settings\"\u003e\u003c/ng2-smart-table\u003e\n  `\n})\n// ...\n```\nAt this step you will have a minimal configured table. All functions are available by default and you don't need to configure them anyhow, so now you can add/edit/delete rows, sort or filter the table, etc.\n \nStill it seems like something is missing... Right, there is no data in the table by default. To add some, let's create an array property with a list of objects in the component. Please note that object keys are the same as in the columns configuration.\n\n```\ndata = [\n  {\n    id: 1,\n    name: \"Leanne Graham\",\n    username: \"Bret\",\n    email: \"Sincere@april.biz\"\n  },\n  {\n    id: 2,\n    name: \"Ervin Howell\",\n    username: \"Antonette\",\n    email: \"Shanna@melissa.tv\"\n  },\n  \n  // ... list of items\n  \n  {\n    id: 11,\n    name: \"Nicholas DuBuque\",\n    username: \"Nicholas.Stanton\",\n    email: \"Rey.Padberg@rosamond.biz\"\n  }\n];\n```\n\nAnd pass the data to the table:\n\n```\n// ...\n\n@Component({\n  template: `\n    \u003cng2-smart-table [settings]=\"settings\" [source]=\"data\"\u003e\u003c/ng2-smart-table\u003e\n  `\n})\n// ...\n```\n\nNow you have some data in the table.\n \n## Further Documentation\nInstallation, customization and other useful articles: https://akveo.github.io/ng2-smart-table/\n\n## UI Bakery\nTry low-code internal tool builder for free\n\u003ca href=\"https://uibakery.io/?utm_source=github\u0026utm_medium=clicks\u0026utm_campaign=banner\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/6151971/125071660-41f84900-e0c2-11eb-882a-0c675eb1e5e3.png\"\u003e\u003c/a\u003e\n\n## How can I support developers?\n- Star our GitHub repo :star:\n- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:\n- Follow us on [Twitter](https://twitter.com/akveo_inc) :feet:\n- Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:\n\n## Can I hire you guys?\nYes!  Visit [our homepage](http://akveo.com/) or simply leave us a note to [contact@akveo.com](mailto:contact@akveo.com). We will be happy to work with you!\n\n## Features\n* Local data source (Server/API DataSource is on its way)\n* Filtering\n* Sorting\n* Pagination\n* Inline Add/Edit/Delete\n* Flexible event model\n\n## License\n[MIT](LICENSE.txt) license.\n\n## Special thanks to our awesome contributors!\n\n[\u003cimg alt=\"nnixaa\" src=\"https://avatars0.githubusercontent.com/u/230527?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/nnixaa)[\u003cimg alt=\"lexzhukov\" src=\"https://avatars0.githubusercontent.com/u/12192373?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/lexzhukov)[\u003cimg alt=\"damnko\" src=\"https://avatars2.githubusercontent.com/u/680205?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/damnko)[\u003cimg alt=\"Tibing\" src=\"https://avatars2.githubusercontent.com/u/17410089?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/Tibing)[\u003cimg alt=\"Ezeon\" src=\"https://avatars0.githubusercontent.com/u/21973741?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/Ezeon)[\u003cimg alt=\"Deilan\" src=\"https://avatars1.githubusercontent.com/u/4777512?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/Deilan)[\u003cimg alt=\"hoswey\" src=\"https://avatars0.githubusercontent.com/u/3689445?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/hoswey)[\u003cimg alt=\"stacyakveo\" src=\"https://avatars2.githubusercontent.com/u/27723447?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/stacyakveo)[\u003cimg alt=\"Akshaymisal5\" src=\"https://avatars3.githubusercontent.com/u/15906551?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/Akshaymisal5)[\u003cimg alt=\"geneeblack\" src=\"https://avatars0.githubusercontent.com/u/282525?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/geneeblack)[\u003cimg alt=\"vvandoorne\" src=\"https://avatars2.githubusercontent.com/u/26658175?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/vvandoorne)[\u003cimg alt=\"ananthhh\" src=\"https://avatars1.githubusercontent.com/u/3583234?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/ananthhh)[\u003cimg alt=\"bis-sb\" src=\"https://avatars1.githubusercontent.com/u/22668001?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/bis-sb)[\u003cimg alt=\"tadashi-aikawa\" src=\"https://avatars1.githubusercontent.com/u/9500018?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/tadashi-aikawa)\n\n[\u003cimg alt=\"nureha\" src=\"https://avatars2.githubusercontent.com/u/7064537?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/nureha)[\u003cimg alt=\"vlupu10\" src=\"https://avatars1.githubusercontent.com/u/3597512?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/vlupu10)[\u003cimg alt=\"zhouhao27\" src=\"https://avatars1.githubusercontent.com/u/8099731?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/zhouhao27)[\u003cimg alt=\"hkb1990\" src=\"https://avatars1.githubusercontent.com/u/2637138?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/hkb1990)[\u003cimg alt=\"liaosong\" src=\"https://avatars0.githubusercontent.com/u/3927282?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/liaosong)[\u003cimg alt=\"ktriek\" src=\"https://avatars2.githubusercontent.com/u/4461059?v=3\u0026s=60\" width=\"60\"\u003e](https://github.com/ktriek)\n\n### From akveo\n\nEnjoy :metal:\nWe're always happy to hear your feedback!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakveo%2Fng2-smart-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakveo%2Fng2-smart-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakveo%2Fng2-smart-table/lists"}