ng-dynamic-datatable 0.0.0 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +109 -34
  2. package/fesm2022/ng-dynamic-datatable.mjs +483 -0
  3. package/fesm2022/ng-dynamic-datatable.mjs.map +1 -0
  4. package/index.d.ts +5 -0
  5. package/lib/dynamic-datatable.component.d.ts +83 -0
  6. package/lib/dynamic-datatable.types.d.ts +4 -0
  7. package/lib/models.d.ts +45 -0
  8. package/package.json +35 -38
  9. package/{projects/dynamic-datatable/src/public-api.ts → public-api.d.ts} +2 -6
  10. package/.editorconfig +0 -17
  11. package/.vscode/extensions.json +0 -4
  12. package/.vscode/launch.json +0 -20
  13. package/.vscode/tasks.json +0 -42
  14. package/angular.json +0 -44
  15. package/projects/dynamic-datatable/README.md +0 -134
  16. package/projects/dynamic-datatable/ng-package.json +0 -7
  17. package/projects/dynamic-datatable/package.json +0 -24
  18. package/projects/dynamic-datatable/src/lib/dynamic-datatable.component.html +0 -137
  19. package/projects/dynamic-datatable/src/lib/dynamic-datatable.component.scss +0 -237
  20. package/projects/dynamic-datatable/src/lib/dynamic-datatable.component.spec.ts +0 -23
  21. package/projects/dynamic-datatable/src/lib/dynamic-datatable.component.ts +0 -556
  22. package/projects/dynamic-datatable/src/lib/dynamic-datatable.service.spec.ts +0 -16
  23. package/projects/dynamic-datatable/src/lib/dynamic-datatable.service.ts +0 -9
  24. package/projects/dynamic-datatable/src/lib/dynamic-datatable.types.ts +0 -4
  25. package/projects/dynamic-datatable/src/lib/models.ts +0 -52
  26. package/projects/dynamic-datatable/tsconfig.lib.json +0 -15
  27. package/projects/dynamic-datatable/tsconfig.lib.prod.json +0 -11
  28. package/projects/dynamic-datatable/tsconfig.spec.json +0 -15
  29. package/tsconfig.json +0 -32
package/README.md CHANGED
@@ -1,59 +1,134 @@
1
- # NgDynamicDatatable
1
+ # dynamic-datatable
2
2
 
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.27.
3
+ Config-driven Angular DataTable library that accepts columns, JSON data, and feature configuration.
4
4
 
5
- ## Development server
5
+ ## Features
6
6
 
7
- To start a local development server, run:
7
+ - Dynamic columns and data inputs
8
+ - Sorting (column-wise)
9
+ - Searching across visible columns
10
+ - Pagination and rows-per-page selection
11
+ - Row selection and select-all
12
+ - Row action events
13
+ - CSV and Excel export
14
+
15
+ ## Install
8
16
 
9
17
  ```bash
10
- ng serve
18
+ npm install dynamic-datatable
11
19
  ```
12
20
 
13
- Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14
-
15
- ## Code scaffolding
16
-
17
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18
-
19
- ```bash
20
- ng generate component component-name
21
+ ## Usage
22
+
23
+ Import the standalone component directly in your consuming component:
24
+
25
+ ```ts
26
+ import { Component } from '@angular/core';
27
+ import {
28
+ DynamicDatatableComponent,
29
+ DynamicDataTableConfig,
30
+ DataTableColumn
31
+ } from 'dynamic-datatable';
32
+
33
+ @Component({
34
+ selector: 'app-users',
35
+ standalone: true,
36
+ imports: [DynamicDatatableComponent],
37
+ template: `
38
+ <lib-dynamic-datatable
39
+ [config]="config"
40
+ [columns]="columns"
41
+ [data]="rows"
42
+ (actionSelected)="onAction($event)"
43
+ (selectionChange)="onSelection($event)"
44
+ />
45
+ `
46
+ })
47
+ export class UsersComponent {
48
+ rows = [
49
+ { id: 1, name: 'Aarav Sharma', email: 'aarav.sharma@company.in', salary: '19366.53', status: 'Resigned' },
50
+ { id: 2, name: 'Ananya Patel', email: 'ananya.patel@company.in', salary: '10745.32', status: 'Applied' }
51
+ ];
52
+
53
+ columns: DataTableColumn[] = [
54
+ { key: 'name', label: 'Name', sortable: true, width: '220px' },
55
+ { key: 'email', label: 'Email', sortable: true, width: '260px' },
56
+ { key: 'salary', label: 'Salary', sortable: true, width: '120px' },
57
+ {
58
+ key: 'status',
59
+ label: 'Status',
60
+ sortable: true,
61
+ render: (row) => `<span>${row['status']}</span>`
62
+ }
63
+ ];
64
+
65
+ config: DynamicDataTableConfig = {
66
+ title: 'Users',
67
+ features: {
68
+ export: true,
69
+ sorting: true,
70
+ searching: true,
71
+ pagination: true,
72
+ rowsPerPage: true,
73
+ actions: true,
74
+ checkboxSelection: true
75
+ },
76
+ rowsPerPageOptions: [5, 10, 25],
77
+ defaultRowsPerPage: 10,
78
+ exportOptions: { fileName: 'users-export', formats: ['csv', 'excel'] },
79
+ actions: [
80
+ { label: 'Details', id: 'details' },
81
+ { label: 'Delete', id: 'delete', danger: true }
82
+ ]
83
+ };
84
+
85
+ onAction(event: unknown): void {
86
+ console.log(event);
87
+ }
88
+
89
+ onSelection(rows: unknown[]): void {
90
+ console.log(rows);
91
+ }
92
+ }
21
93
  ```
22
94
 
23
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
95
+ ## Component API
24
96
 
25
- ```bash
26
- ng generate --help
27
- ```
97
+ Inputs:
28
98
 
29
- ## Building
99
+ - `config: DynamicDataTableConfig`
100
+ - `columns: DataTableColumn[]`
101
+ - `data: Record<string, unknown>[]`
30
102
 
31
- To build the project run:
103
+ Outputs:
32
104
 
33
- ```bash
34
- ng build
35
- ```
105
+ - `actionSelected`
106
+ - `selectionChange`
107
+ - `sortChange`
108
+ - `pageChange`
109
+ - `exportTriggered`
36
110
 
37
- This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
111
+ Public methods:
38
112
 
39
- ## Running unit tests
113
+ - `refresh()`
114
+ - `updateData(newData)`
115
+ - `updateConfig(newConfig)`
116
+ - `getSelectedRows()`
117
+ - `clearSelection()`
40
118
 
41
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
119
+ ## Build
42
120
 
43
121
  ```bash
44
- ng test
122
+ ng build dynamic-datatable
45
123
  ```
46
124
 
47
- ## Running end-to-end tests
125
+ Artifacts are generated in `dist/dynamic-datatable`.
48
126
 
49
- For end-to-end (e2e) testing, run:
127
+ ## Publish to npm
50
128
 
51
129
  ```bash
52
- ng e2e
130
+ cd dist/dynamic-datatable
131
+ npm publish --access public
53
132
  ```
54
133
 
55
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56
-
57
- ## Additional Resources
58
-
59
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
134
+ Before publishing, ensure the package name in `projects/dynamic-datatable/package.json` is unique on npm.