{"id":30569914,"url":"https://github.com/rinturaj/ngx-simple-datatables","last_synced_at":"2025-08-28T20:07:14.964Z","repository":{"id":310173333,"uuid":"1037969544","full_name":"rinturaj/ngx-simple-datatables","owner":"rinturaj","description":"A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.","archived":false,"fork":false,"pushed_at":"2025-08-24T02:03:29.000Z","size":635,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-24T11:28:28.619Z","etag":null,"topics":["angular","datatable","datatables","ngx-datatable"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-simple-datatables","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/rinturaj.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,"zenodo":null}},"created_at":"2025-08-14T12:09:11.000Z","updated_at":"2025-08-18T01:53:31.000Z","dependencies_parsed_at":"2025-08-16T09:27:09.937Z","dependency_job_id":null,"html_url":"https://github.com/rinturaj/ngx-simple-datatables","commit_stats":null,"previous_names":["rinturaj/ngx-simple-datatable","rinturaj/ngx-simple-datatables"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/rinturaj/ngx-simple-datatables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rinturaj%2Fngx-simple-datatables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rinturaj%2Fngx-simple-datatables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rinturaj%2Fngx-simple-datatables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rinturaj%2Fngx-simple-datatables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rinturaj","download_url":"https://codeload.github.com/rinturaj/ngx-simple-datatables/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rinturaj%2Fngx-simple-datatables/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272547271,"owners_count":24953436,"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","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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","datatable","datatables","ngx-datatable"],"created_at":"2025-08-28T20:02:41.236Z","updated_at":"2025-08-28T20:07:14.929Z","avatar_url":"https://github.com/rinturaj.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Data Grids"],"readme":"# NgxSimpleDatatable\n\nA lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.\n\n\n\n![NgxSimpleDatatable Screenshot](projects/ngx-simple-datatable/assets/image.png)\n\n## Features\n\n- 📊 Virtual scrolling for smooth performance with large datasets\n- ❄️ Freeze columns (left/right) for better data comparison\n- 🔍 Sortable columns with custom sort functions\n- 🎨 Customizable templates for headers and cells\n- 📏 Resizable columns\n- 🎨 Theming support with CSS custom properties\n- ♿ Built with accessibility in mind\n\n## Installation\n\n```bash\nnpm install ngx-simple-datatables --save\n```\n\n## Basic Usage\n\n1. Import the module in your `app.module.ts`:\n\n```typescript\nimport { NgxSimpleDatatableModule } from \"ngx-simple-datatables\";\n\n@NgModule({\n  imports: [\n    // ... other imports\n    NgxSimpleDatatableModule,\n  ],\n})\nexport class AppModule {}\n```\n\n2. Use the component in your template:\n\n```html\n\u003cngx-simple-datatable\n  [columns]=\"columns\"\n  [data]=\"data\"\n  [rowHeight]=\"40\"\n  [headerHeight]=\"50\"\n\u003e\n\u003c/ngx-simple-datatable\u003e\n```\n\n3. Define your columns and data in your component:\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { ColumnConfig } from \"ngx-simple-datatables\";\n\ninterface UserData {\n  id: number;\n  name: string;\n  email: string;\n  status: string;\n}\n\n@Component({\n  selector: \"app-root\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent {\n  columns: ColumnConfig[] = [\n    { field: \"id\", header: \"ID\", width: \"80px\", freeze: \"left\" },\n    { field: \"name\", header: \"Name\", width: \"200px\", sortable: true },\n    { field: \"email\", header: \"Email\", width: \"250px\" },\n    { field: \"status\", header: \"Status\", width: \"120px\" },\n  ];\n\n  data: UserData[] = [\n    { id: 1, name: \"John Doe\", email: \"john@example.com\", status: \"Active\" },\n    {\n      id: 2,\n      name: \"Jane Smith\",\n      email: \"jane@example.com\",\n      status: \"Inactive\",\n    },\n    // ... more data\n  ];\n}\n```\n\n4. add styles in your `styles.css`:\n\n```css\n:root {\n  --ngx-simple-dt-bg: #efefef;\n  --ngx-simple-dt-border: 1px solid #e0e0e0;\n  --ngx-simple-dt-border-radius: 8px;\n  --ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  --ngx-simple-dt-transition: all 0.2s ease-in-out;\n\n  --ngx-simple-dt-header-bg: #98ccff;\n  --ngx-simple-dt-header-hover-bg: #e9ecef;\n  --ngx-simple-dt-header-border: 1px solid #e0e0e0;\n  --ngx-simple-dt-header-text: #495057;\n  --ngx-simple-dt-header-height: 48px;\n  --ngx-simple-dt-header-font-weight: 600;\n  --ngx-simple-dt-header-padding: 0 16px;\n\n  --ngx-simple-dt-cell-padding: 0 16px;\n  --ngx-simple-dt-cell-border: 1px solid #e9ecef;\n  --ngx-simple-dt-cell-hover-bg: #f1f3f5;\n  --ngx-simple-dt-cell-active-bg: #e9ecef;\n  --ngx-simple-dt-cell-font-size: 0.875rem;\n  --ngx-simple-dt-cell-line-height: 1.5;\n}\n```\n\n## Advanced Features\n\n### Column Freezing\n\nFreeze columns to the left or right for better data comparison:\n\n```typescript\ncolumns: ColumnConfig[] = [\n  { field: 'id', header: 'ID', width: '80px', freeze: 'left' },\n  { field: 'name', header: 'Name', width: '200px' },\n  { field: 'email', header: 'Email', width: '250px' },\n  { field: 'actions', header: 'Actions', width: '150px', freeze: 'right' }\n];\n```\n\n### Custom Cell Templates\n\nUse Angular templates to customize cell content:\n\n```html\n\u003cngx-simple-datatable [columns]=\"columns\" [data]=\"data\"\u003e\n  \u003cng-template #cellTemplate let-row=\"row\" let-column=\"column\"\u003e\n    \u003cng-container [ngSwitch]=\"column.field\"\u003e\n      \u003cng-container *ngSwitchCase=\"'status'\"\u003e\n        \u003cspan\n          [ngClass]=\"{\n          'status-active': row[column.field] === 'Active',\n          'status-inactive': row[column.field] !== 'Active'\n        }\"\n        \u003e\n          {{ row[column.field] }}\n        \u003c/span\u003e\n      \u003c/ng-container\u003e\n      \u003cng-container *ngSwitchDefault\u003e {{ row[column.field] }} \u003c/ng-container\u003e\n    \u003c/ng-container\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-simple-datatable\u003e\n```\n\n### Custom Header Templates\n\nCustomize header appearance and behavior:\n\n```html\n\u003cngx-simple-datatable [columns]=\"columns\" [data]=\"data\"\u003e\n  \u003cng-template #headerTemplate let-column=\"column\"\u003e\n    \u003cdiv class=\"custom-header\"\u003e\n      \u003ci class=\"fas fa-info-circle\" [title]=\"column.header\"\u003e\u003c/i\u003e\n      \u003cspan\u003e{{ column.header }}\u003c/span\u003e\n      \u003ci class=\"fas fa-sort\" *ngIf=\"column.sortable\"\u003e\u003c/i\u003e\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n\u003c/ngx-simple-datatable\u003e\n```\n\n### Theming\n\nCustomize the table appearance using CSS custom properties:\n\n```css\n/* styles.css */\n:root {\n  --ngx-simple-dt-bg: #efefef;\n  --ngx-simple-dt-border: 1px solid #e0e0e0;\n  --ngx-simple-dt-border-radius: 8px;\n  --ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  --ngx-simple-dt-transition: all 0.2s ease-in-out;\n\n  --ngx-simple-dt-header-bg: #98ccff;\n  --ngx-simple-dt-header-hover-bg: #e9ecef;\n  --ngx-simple-dt-header-border: 1px solid #e0e0e0;\n  --ngx-simple-dt-header-text: #495057;\n  --ngx-simple-dt-header-height: 48px;\n  --ngx-simple-dt-header-font-weight: 600;\n  --ngx-simple-dt-header-padding: 0 16px;\n\n  --ngx-simple-dt-cell-padding: 0 16px;\n  --ngx-simple-dt-cell-border: 1px solid #e9ecef;\n  --ngx-simple-dt-cell-hover-bg: #f1f3f5;\n  --ngx-simple-dt-cell-active-bg: #e9ecef;\n  --ngx-simple-dt-cell-font-size: 0.875rem;\n  --ngx-simple-dt-cell-line-height: 1.5;\n\n  --ngx-simple-dt-row-height: 48px;\n  --ngx-simple-dt-row-hover-bg: #f8f9fa;\n  --ngx-simple-dt-row-stripe-bg: #f8f9fa;\n  --ngx-simple-dt-row-active-bg: #e9ecef;\n  --ngx-simple-dt-cell-padding: 0 16px;\n  --ngx-simple-dt-cell-border: 1px solid #e9ecef;\n  --ngx-simple-dt-cell-font-size: 0.875rem;\n  --ngx-simple-dt-cell-line-height: 1.5;\n\n  --ngx-simple-dt-row-bg: #ffffff;\n  --ngx-simple-dt-row-hover-bg: #f8f9fa;\n  --ngx-simple-dt-row-stripe-bg: #f8f9fa;\n  --ngx-simple-dt-row-active-bg: #e9ecef;\n  --ngx-simple-dt-row-border: 1px solid #e9ecef;\n}\n```\n\n## API Reference\n\n### Inputs\n\n| Input            | Type             | Description                                                    |\n| ---------------- | ---------------- | -------------------------------------------------------------- |\n| `[columns]`      | `ColumnConfig[]` | Array of column configurations                                 |\n| `[data]`         | `any[]`          | Array of data to display                                       |\n| `[rowHeight]`    | `number`         | Height of each row in pixels                                   |\n| `[headerHeight]` | `number`         | Height of the header row in pixels                             |\n| `[bufferSize]`   | `number`         | Number of rows to render outside viewport for smooth scrolling |\n\n### Column Configuration\n\n| Property   | Type                         | Description                      |\n| ---------- | ---------------------------- | -------------------------------- | ---------------------- |\n| `field`    | `string`                     | Property name in the data object |\n| `header`   | `string`                     | Column header text               |\n| `width`    | `string                      | number`                          | Column width (px or %) |\n| `freeze`   | `'left'                      | 'right'`                         | Freeze column position |\n| `sortable` | `boolean`                    | Whether the column is sortable   |\n| `sortFn`   | `(a: any, b: any) =\u003e number` | Custom sort function             |\n\n## Styling\n\nYou can customize the table appearance by overriding the following CSS custom properties:\n\n```css\n.dynamic-table-container {\n  --ngx-simple-dt-bg: #ffffff;\n  --ngx-simple-dt-border: 1px solid #e0e0e0;\n  --ngx-simple-dt-border-radius: 8px;\n  --ngx-simple-dt-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n  --ngx-simple-dt-transition: all 0.2s ease-in-out;\n}\n\n.table-header {\n  --ngx-simple-dt-header-bg: #f8f9fa;\n  --ngx-simple-dt-header-hover-bg: #e9ecef;\n  --ngx-simple-dt-header-border: 1px solid #e0e0e0;\n  --ngx-simple-dt-header-text: #495057;\n  --ngx-simple-dt-header-height: 48px;\n  --ngx-simple-dt-header-font-weight: 600;\n  --ngx-simple-dt-header-padding: 0 16px;\n}\n```\n\n## Development\n\nRun `ng build ngx-simple-datatable` to build the library. The build artifacts will be stored in the `dist/` directory.\n\n## Publishing\n\nAfter building your library with `ng build ngx-simple-datatable`, go to the dist folder `cd dist/ngx-simple-datatable` and run `npm publish`.\n\nAfter building your library with `ng build ngx-simple-datatable`, go to the dist folder `cd dist/ngx-simple-datatable` and run `npm publish`.\n\n## Running unit tests\n\nRun `ng test ngx-simple-datatable` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frinturaj%2Fngx-simple-datatables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frinturaj%2Fngx-simple-datatables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frinturaj%2Fngx-simple-datatables/lists"}