@jbeche/ng-datatable 0.2.1
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.
- package/LICENSE +21 -0
- package/README.md +222 -0
- package/fesm2022/jbeche-ng-datatable.mjs +1422 -0
- package/fesm2022/jbeche-ng-datatable.mjs.map +1 -0
- package/index.d.ts +272 -0
- package/lib/style.css +1 -0
- package/package.json +63 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Bhavesh Patel
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
# @jbeche/ng-datatable
|
|
2
|
+
|
|
3
|
+
<br/>
|
|
4
|
+
|
|
5
|
+
## Example
|
|
6
|
+
|
|
7
|
+
[Document & Demos](https://ng-datatable-document.vercel.app)
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
#### NPM
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @jbeche/ng-datatable --save
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
#### Yarn
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
yarn add @jbeche/ng-datatable
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
#### Bower
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
bower install @jbeche/ng-datatable --save
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
#### app.module.ts
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
import { NgModule } from '@angular/core';
|
|
35
|
+
import { DataTableModule } from '@jbeche/ng-datatable';
|
|
36
|
+
|
|
37
|
+
@NgModule({
|
|
38
|
+
imports: [
|
|
39
|
+
...
|
|
40
|
+
DataTableModule
|
|
41
|
+
],
|
|
42
|
+
})
|
|
43
|
+
export class AppModule {}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
#### app.component.html
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<ng-datatable [rows]="rows" [columns]="cols"> </ng-datatable>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
#### app.component.ts
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
|
|
56
|
+
import { Component } from '@angular/core';
|
|
57
|
+
import { colDef } from '@jbeche/ng-datatable';
|
|
58
|
+
|
|
59
|
+
@Component({
|
|
60
|
+
selector: 'app-root',
|
|
61
|
+
templateUrl: './app.component.html',
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
export class AppComponent {
|
|
65
|
+
cols: Array<colDef> = [];
|
|
66
|
+
rows: Array<any> = [];
|
|
67
|
+
|
|
68
|
+
constructor() {
|
|
69
|
+
this.initData();
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
initData(){
|
|
73
|
+
this.cols = [
|
|
74
|
+
{ field: "id", title: "ID", filter: false },
|
|
75
|
+
{ field: "name", title: "Name" },
|
|
76
|
+
{ field: "username", title: "Username" },
|
|
77
|
+
{ field: "email", title: "Email" },
|
|
78
|
+
{ field: "phone", title: "Phone" },
|
|
79
|
+
{ field: "date", title: "Date", type: "date" },
|
|
80
|
+
{ field: "active", title: "Active", type: "bool" },
|
|
81
|
+
{ field: "age", title: "Age", type: "number" },
|
|
82
|
+
{ field: "address.city", title: "Address" },
|
|
83
|
+
{ field: "company.name", title: "Company" },
|
|
84
|
+
];
|
|
85
|
+
|
|
86
|
+
this.rows = [
|
|
87
|
+
{
|
|
88
|
+
id: 1,
|
|
89
|
+
name: "Leanne Graham",
|
|
90
|
+
username: "Bret",
|
|
91
|
+
email: "Sincere@april.biz",
|
|
92
|
+
address: {
|
|
93
|
+
street: "Kulas Light",
|
|
94
|
+
suite: "Apt. 556",
|
|
95
|
+
city: "Gwenborough",
|
|
96
|
+
zipcode: "92998-3874",
|
|
97
|
+
geo: {
|
|
98
|
+
lat: "-37.3159",
|
|
99
|
+
lng: "81.1496",
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
phone: "1-770-736-8031 x56442",
|
|
103
|
+
website: "hildegard.org",
|
|
104
|
+
company: {
|
|
105
|
+
name: "Romaguera-Crona",
|
|
106
|
+
catchPhrase: "Multi-layered client-server neural-net",
|
|
107
|
+
bs: "harness real-time e-markets",
|
|
108
|
+
},
|
|
109
|
+
date: "Tue Sep 27 2022 22:19:57",
|
|
110
|
+
age: 10,
|
|
111
|
+
active: true,
|
|
112
|
+
},
|
|
113
|
+
.......
|
|
114
|
+
];
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Props
|
|
120
|
+
|
|
121
|
+
| Props | Type | Default | Description |
|
|
122
|
+
| ----------------------- | :---------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
123
|
+
| **columns (required)** | array<colDef> | [] | table columns |
|
|
124
|
+
| **rows (required)** | array<any> | [] | table rows |
|
|
125
|
+
| **isServerMode** | boolean | false | set **_true_** if you need server side pagination. |
|
|
126
|
+
| **totalRows** | number | 0 | total number of rows. **_totalRows_** required when **_isServerMode_** is true |
|
|
127
|
+
| **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) |
|
|
128
|
+
| **loading** | boolean | false | enable loader |
|
|
129
|
+
| **hasCheckbox** | boolean | false | enable checkbox |
|
|
130
|
+
| **search** | string | "" | enable global search |
|
|
131
|
+
| **page** | number | 1 | current page |
|
|
132
|
+
| **pageSize** | number | 10 | number of rows per page |
|
|
133
|
+
| **pageSizeOptions** | array<number> | [10, 20, 30, 50, 100] | pagesize options |
|
|
134
|
+
| **showPageSize** | boolean | true | enable pagesize options |
|
|
135
|
+
| **rowClass** | array<string>, function | "" | custom row class |
|
|
136
|
+
| **cellClass** | array<string>, function | "" | custom cell class |
|
|
137
|
+
| **sortable** | boolean | true | enable sorting |
|
|
138
|
+
| **sortColumn** | string | "id" | name of sort column |
|
|
139
|
+
| **sortDirection** | string | "asc" | sort direction (asc or desc) |
|
|
140
|
+
| **columnFilter** | boolean | false | enable individual column filter |
|
|
141
|
+
| **pagination** | boolean | true | enable pagination |
|
|
142
|
+
| **showNumbers** | boolean | true | enable numbers pagination |
|
|
143
|
+
| **showNumbersCount** | number | 5 | show numbers of count in pagination |
|
|
144
|
+
| **showFirstPage** | boolean | true | enable first page in pagination |
|
|
145
|
+
| **showLastPage** | boolean | true | enable last page in pagination |
|
|
146
|
+
| **firstArrow** | string | default arrow | custom first page arrow |
|
|
147
|
+
| **lastArrow** | string | default arrow | custom last page arrow |
|
|
148
|
+
| **previousArrow** | string | default arrow | custom previous page arrow |
|
|
149
|
+
| **nextArrow** | string | default arrow | custom next page arrow |
|
|
150
|
+
| **paginationInfo** | string | "Showing {0} to {1} of {2} entries" | custom pagination info |
|
|
151
|
+
| **noDataContent** | string | No data available | custom no data message |
|
|
152
|
+
| **stickyHeader** | boolean | false | enable fixed header |
|
|
153
|
+
| **height** | string | 450px | only will be used when stickyHeader enabled |
|
|
154
|
+
| **stickyFirstColumn** | boolean | false | enable fixed first column |
|
|
155
|
+
| **cloneHeaderInFooter** | boolean | false | enable clone header in footer |
|
|
156
|
+
| **selectRowOnClick** | boolean | false | enable to select row(checkbox) on row click |
|
|
157
|
+
|
|
158
|
+
## Columns options
|
|
159
|
+
|
|
160
|
+
| Props | Type | Default | Description |
|
|
161
|
+
| ---------------- | :--------------- | --------- | ----------------------------------------------------- |
|
|
162
|
+
| **isUnique** | boolean | false | db column is primary key or not |
|
|
163
|
+
| **field** | string | "" | db column name |
|
|
164
|
+
| **title** | string | "" | display column name |
|
|
165
|
+
| **value** | string | "" | filter value if filter enabled |
|
|
166
|
+
| **condition** | string | "contain" | default condition for column filter if filter enabled |
|
|
167
|
+
| **type** | string | "" | column type (string, date, number, bool) |
|
|
168
|
+
| **width** | string | "" | custom width of column |
|
|
169
|
+
| **minWidth** | string | "" | custom minimum width of column |
|
|
170
|
+
| **maxWidth** | string | "" | custom maximum width of column |
|
|
171
|
+
| **hide** | boolean | false | show/hide column |
|
|
172
|
+
| **filter** | boolean | true | enable column filter |
|
|
173
|
+
| **search** | boolean | true | enabled global search |
|
|
174
|
+
| **sort** | boolean | true | enable sorting |
|
|
175
|
+
| **cellRenderer** | function, string | | custom cell rendering |
|
|
176
|
+
| **headerClass** | string | "" | custom header cell class |
|
|
177
|
+
| **cellClass** | string | "" | custom cell class |
|
|
178
|
+
|
|
179
|
+
## Events
|
|
180
|
+
|
|
181
|
+
| Name | Description |
|
|
182
|
+
| ------------------ | --------------------------------------------- |
|
|
183
|
+
| **sortChange** | will trigger when sorting changed |
|
|
184
|
+
| **searchChange** | will trigger when search changed |
|
|
185
|
+
| **pageChange** | will trigger when page changed |
|
|
186
|
+
| **pageSizeChange** | will trigger when pagesize changed |
|
|
187
|
+
| **rowSelect** | will trigger when row selected using checkbox |
|
|
188
|
+
| **filterChange** | will trigger when column filter changed |
|
|
189
|
+
| **rowClick** | will trigger when row clicked |
|
|
190
|
+
| **rowDBClick** | will trigger when row double clicked |
|
|
191
|
+
|
|
192
|
+
## Methods
|
|
193
|
+
|
|
194
|
+
| Name | Description |
|
|
195
|
+
| ------------------------ | ---------------------------------------------------------------------------- |
|
|
196
|
+
| **reset** | will reset all options like selected rows, filter, search, currennt page etc |
|
|
197
|
+
| **getSelectedRows** | will returns all selected rows |
|
|
198
|
+
| **getColumnFilters** | will return all column filters |
|
|
199
|
+
| **clearSelectedRows** | will unselect all selected rows |
|
|
200
|
+
| **selectRow(index)** | will select row with the given index (non-existent row will be ignored) |
|
|
201
|
+
| **unselectRow(index)** | will unselect row with the given index (non-existent row will be ignored) |
|
|
202
|
+
| **isRowSelected(index)** | will return true if the row with given index is selected |
|
|
203
|
+
|
|
204
|
+
<br>
|
|
205
|
+
|
|
206
|
+
## License
|
|
207
|
+
|
|
208
|
+
**_@jbeche/ng-datatable_** is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
|
|
209
|
+
|
|
210
|
+
<br>
|
|
211
|
+
|
|
212
|
+
## **Our other plugins**
|
|
213
|
+
|
|
214
|
+
### Vue3 Datatable - [**@bhplugin/vue3-datatable**](https://www.npmjs.com/package/@bhplugin/vue3-datatable)
|
|
215
|
+
|
|
216
|
+
<br>
|
|
217
|
+
|
|
218
|
+
## Support
|
|
219
|
+
|
|
220
|
+
<a target="_blank" href="https://www.buymeacoffee.com/bhplugin">
|
|
221
|
+
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="60">
|
|
222
|
+
</a>
|