{"id":14973304,"url":"https://github.com/hjalmers/angular-generic-table","last_synced_at":"2025-05-16T09:03:08.246Z","repository":{"id":12465157,"uuid":"68919374","full_name":"hjalmers/angular-generic-table","owner":"hjalmers","description":"A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.","archived":false,"fork":false,"pushed_at":"2024-10-22T05:37:47.000Z","size":38423,"stargazers_count":104,"open_issues_count":90,"forks_count":55,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-10T18:48:21.396Z","etag":null,"topics":["angular","angular2","angular4","bootstrap4","grid","responsive","table"],"latest_commit_sha":null,"homepage":"https://hjalmers.github.io/angular-generic-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/hjalmers.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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-09-22T12:33:03.000Z","updated_at":"2024-11-22T00:02:33.000Z","dependencies_parsed_at":"2024-11-15T05:36:00.619Z","dependency_job_id":null,"html_url":"https://github.com/hjalmers/angular-generic-table","commit_stats":{"total_commits":412,"total_committers":14,"mean_commits":"29.428571428571427","dds":"0.26941747572815533","last_synced_commit":"03a1a15d73b919018035cc48d2345db32533e66d"},"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-generic-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-generic-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-generic-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjalmers%2Fangular-generic-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hjalmers","download_url":"https://codeload.github.com/hjalmers/angular-generic-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501555,"owners_count":22081528,"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","angular4","bootstrap4","grid","responsive","table"],"created_at":"2024-09-24T13:48:31.711Z","updated_at":"2025-05-16T09:03:08.227Z","avatar_url":"https://github.com/hjalmers.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-generic-table\n\n[![Build Status](https://travis-ci.org/hjalmers/angular-generic-table.svg?branch=master)](https://travis-ci.org/hjalmers/angular-generic-table)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![Cypress.io Dashboard](https://img.shields.io/badge/cypress-dashboard-brightgreen.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/d5k4ex/runs)\n\nA generic table for Angular 2+. This project is a re-write of [this](https://github.com/hjalmers/angularjs-generic-table) project for AngularJS, the idea is to have support for the same features and that the configuration should be the same. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values. [View demo](https://hjalmers.github.io/angular-generic-table/)\n\n## Features\n\n* Uses standard HTML tables (no divs etc.)\n* Markup uses Twitter bootstrap class names\n* Client and server-side pagination, sorting and filtering\n* Lazy-loading of data from server\n* Expanding rows with custom component\n* Use custom functions for sorting, exporting and rendering of data\n* Configure table using json object (add columns etc.)\n* Toggle column visibility\n* Export to CSV\n\n## Installation and usage\n\nRun `npm install @angular-generic-table/core --save`\n\nInclude generic table module in your project, for example if you want to add it to your app module:\n\n**App Module**\n\n```TypeScript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app.component';\nimport { GenericTableModule } from '@angular-generic-table/core';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    GenericTableModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nConfigure the table in your component, in this case we're adding a basic example with static data to a component called StaticComponent.\n\n**Static Component**\n\n```TypeScript\nimport { Component } from '@angular/core';\nimport { GtConfig } from '@angular-generic-table/core';\n\n@Component({\n  selector: 'app-static',\n  templateUrl: './static.component.html'\n})\nexport class StaticComponent {\n\n  public configObject: GtConfig\u003cany\u003e;\n\n  public data:Array\u003c{\n    id:number,\n    name:string,\n    lucky_number:number\n  }\u003e = [];\n\n  constructor() {\n\n    this.configObject = {\n      settings:[{\n        objectKey:'id',\n        sort:'desc',\n        columnOrder:0\n      },{\n        objectKey:'name',\n        sort:'enable',\n        columnOrder:1\n      },{\n        objectKey:'lucky_number',\n        sort:'enable',\n        columnOrder:2\n      }],\n      fields:[{\n        name:'Id',\n        objectKey:'id'\n      },{\n        name:'Name',\n        objectKey:'name'\n      },{\n        name:'Lucky number',\n        objectKey:'lucky_number'\n      }],\n      data:[{\n        \"id\": 1,\n        \"name\": \"Anna\",\n        \"lucky_number\": 63\n      }, {\n        \"id\": 2,\n        \"name\": \"Julie\",\n        \"lucky_number\": 8\n      }, {\n        \"id\": 3,\n        \"name\": \"Lillian\",\n        \"lucky_number\": 30\n      }, {\n        \"id\": 4,\n        \"name\": \"Norma\",\n        \"lucky_number\": 13\n      }, {\n        \"id\": 5,\n        \"name\": \"Ralph\",\n        \"lucky_number\": 28\n      }, {\n        \"id\": 6,\n        \"name\": \"Benjamin\",\n        \"lucky_number\": 66\n      }, {\n        \"id\": 7,\n        \"name\": \"George\",\n        \"lucky_number\": 66\n      }, {\n        \"id\": 8,\n        \"name\": \"Ryan\",\n        \"lucky_number\": 65\n      }, {\n        \"id\": 9,\n        \"name\": \"Martha\",\n        \"lucky_number\": 57\n      }, {\n        \"id\": 10,\n        \"name\": \"Todd\",\n        \"lucky_number\": 65\n      }]\n    };\n  }\n}\n```\n\n**Usage**\n\n```Html\n\u003cgeneric-table [gtSettings]=\"configObject.settings\" [gtFields]=\"configObject.fields\" [gtData]=\"configObject.data\"\u003e\u003c/generic-table\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjalmers%2Fangular-generic-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhjalmers%2Fangular-generic-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjalmers%2Fangular-generic-table/lists"}