@reforgium/data-grid 1.0.2 → 1.1.0

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 (6) hide show
  1. package/README.md +120 -53
  2. package/fesm2022/reforgium-data-grid.mjs +960 -76
  3. package/fesm2022/reforgium-data-grid.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/reforgium-data-grid.d.ts +840 -32
  6. package/types/reforgium-data-grid.d.ts.map +1 -1
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # @reforgium/data-grid
2
2
 
3
+ [![npm version](https://badge.fury.io/js/%40reforgium%2Fdata-grid.svg)](https://www.npmjs.com/package/@reforgium/data-grid)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+
3
6
  **High-performance data grid for Angular (20+).**
4
7
 
5
8
  `@reforgium/data-grid` provides a flexible and performant component for displaying large tabular datasets.
@@ -19,9 +22,10 @@ Designed for **real-world datasets**, not demo tables.
19
22
  - Column expanders (hidden columns via toggler)
20
23
  - Scrollable overlay scrollbar
21
24
  - Pinned rows (top and bottom)
22
- - Custom templates for headers, cells, pinned rows
25
+ - Custom templates for headers, cells, pinned rows, icons
23
26
  - Row selection (single / multi)
24
27
  - Signals-based API (`signal()` first)
28
+ - Paginator component *[NEW in 1.1.0]*
25
29
 
26
30
  ---
27
31
 
@@ -40,11 +44,12 @@ export class SomeComponent {}
40
44
 
41
45
  ```html
42
46
  <re-data-grid
47
+ mode="infinity"
43
48
  [data]="users"
44
49
  [columns]="columns"
45
50
  [pageSize]="50"
46
51
  [loading]="loading"
47
- (loadData)="loadMore($event)"
52
+ (pageChange)="loadMore($event)"
48
53
  />
49
54
  ```
50
55
 
@@ -54,19 +59,23 @@ export class SomeComponent {}
54
59
 
55
60
  ### Inputs
56
61
 
57
- | Parameter | Type | Default | Description |
58
- |-------------------|----------------------------------------------|-------------|---------------------------------|
59
- | data | `T[]` | `[]` | Data array to render |
60
- | columns | `GridColumns<T>` | `[]` | Column configuration |
61
- | pinnedRows | `GridPinnedRows<T>` | `undefined` | Top / bottom pinned rows |
62
- | mode | `'default' \| 'infinity' \| 'none'` | `'default'` | Grid operation mode |
63
- | pageSize | `number` | `20` | Page size |
64
- | pageStartFromZero | `boolean` | `false` | Start page index from 0 |
65
- | hasIndexColumn | `boolean` | `false` | Show index column |
66
- | selection | `{ mode: 'single' \| 'multi', key: string }` | `undefined` | Row selection configuration |
67
- | fillHeight | `boolean` | `false` | Fill available container height |
68
- | loading | `boolean` | `false` | Loading state |
69
- | rowKey | `(item: T) => string` | `undefined` | Unique row key resolver |
62
+ | Parameter | Type | Default | Description | |
63
+ |-------------------|-------------------------------------------------|--------------------|-------------------------------------|------------------|
64
+ | data | `T[]` | `[]` | Data array to render | |
65
+ | columns | `GridColumn<T>[]` | `[]` | Column configuration | |
66
+ | pinnedRows | `GridPinnedRow<T>[]` | `[]` | Top / bottom pinned rows | |
67
+ | mode | `'none' \| 'pagination' \| 'infinity'` | `'none'` | Grid operation mode | |
68
+ | pageSize | `number` | `20` | Page size | |
69
+ | pageStartFromZero | `boolean` | `true` | Start page index from 0 | |
70
+ | hasIndexColumn | `boolean` | `false` | Show index column | |
71
+ | selection | `GridSelection<T>` | `{ mode: 'none' }` | Row selection configuration | |
72
+ | rowHeight | `number` | `40` | Row height (px) | *[FIX in 1.1.0]* |
73
+ | virtualBuffer | `number` | `6` | Extra rows above/below viewport | |
74
+ | height | `number \| 'full' \| 'default'` | `'full'` | Grid height | |
75
+ | loading | `boolean` | `false` | Loading state | |
76
+ | rowKey | `DataKey<T> \| ((item: T) => string \| number)` | `undefined` | Unique row key resolver | |
77
+
78
+ When selection mode is `'single'` or `'multi'`, provide a `key` (data property) and optionally `defaultSelected`.
70
79
 
71
80
  ### Outputs
72
81
 
@@ -80,24 +89,29 @@ export class SomeComponent {}
80
89
 
81
90
  ### Templates
82
91
 
83
- | Directive | Parameters | Description |
84
- |--------------------|--------------------|----------------------------------------|
85
- | ssDataGridHeader | value: string | Column header template |
86
- | ssDataGridTypeCell | value: any, row: T | Cell template for specific column type |
87
- | ssDataGridEmpty | - | Empty state template |
88
- | ssDataGridLoading | - | Loading state template |
92
+ | Directive | Parameters | Description | |
93
+ |------------------------|------------------------------------|----------------------------------------|------------------|
94
+ | reDataGridHeader | key: string | Column header template | |
95
+ | reDataGridCell | key: string | Cell template for specific column key | *[NEW in 1.1.0]* |
96
+ | reDataGridTypeCell | type: string | Cell template for specific column type | |
97
+ | reDataGridEmpty | - | Empty state template | |
98
+ | reDataGridLoading | - | Loading state template | |
99
+ | reDataGridSortIcon | order: GridSortOrder \| undefined | Sort icon template | *[NEW in 1.1.0]* |
100
+ | reDataGridExpanderIcon | expanded: boolean | Expander icon template | *[NEW in 1.1.0]* |
89
101
 
90
102
 
91
103
  ### CSS Variables
92
104
 
93
105
  Layout / Appearance:
94
- - `--re-data-grid-height` — component height / max-height (`400px`).
106
+ - `--re-data-grid-min-height` — component min height (`200px`). *[NEW in 1.1.0]*
107
+ - `--re-data-grid-height` — component height (`400px`). *[UPDATED in 1.1.0]*
95
108
  - `--re-data-grid-rounded` — border radius (`var(--radius-md, 6px)`).
96
109
  - `--re-data-grid-surface` — table background (`#fff`).
97
110
  - `--re-data-grid-active` — active color (`#2a90f4`).
98
111
 
99
112
  Empty / Loading States:
100
113
  - `--re-data-grid-empty-color` — empty text color (`#777`)
114
+ - `--re-data-grid-empty-surface` — empty text background (`transparent`) *[NEW in 1.1.0]*
101
115
  - `--re-data-grid-loading-color` — loading indicator color (`#444`)
102
116
  - `--re-data-grid-loading-surface` — loading overlay (`rgba(255,255,255,0.5)`)
103
117
 
@@ -111,58 +125,104 @@ Scrollbar:
111
125
  Header:
112
126
  - `--re-data-grid-header-height` — header row height (`40px`)
113
127
  - `--re-data-grid-header-separator-color` — separator color (`#ccc`)
114
- - `--re-data-grid-header-separator` — separator line
128
+ - `--re-data-grid-header-separator` — separator line (`1px solid var(--re-data-grid-header-separator-color)`)
115
129
  - `--re-data-grid-header-surface` — header background (`#fff`)
116
130
 
117
131
  Header Cells:
118
132
 
119
- - `--re-data-grid-header-cell-font-weight` — font weight; `600`.
120
- - `--re-data-grid-header-cell-font-size` — font size; `0.8rem`.
121
- - `--re-data-grid-header-cell-color` — text color; `#000`.
122
- - `--re-data-grid-header-cell-surface` — cell background; `#fafafa`.
133
+ - `--re-data-grid-header-cell-font-weight` — font weight (`600`)
134
+ - `--re-data-grid-header-cell-font-size` — font size (`0.8rem`)
135
+ - `--re-data-grid-header-cell-color` — text color (`#000`)
136
+ - `--re-data-grid-header-cell-surface` — cell background (`#fafafa`)
123
137
 
124
138
  Footer:
125
139
 
126
- - `--re-data-grid-footer-separator-color` — separator color; `#ccc`.
127
- - `--re-data-grid-footer-separator` — separator line; `1px solid var(--re-data-grid-footer-separator-color)`.
128
- - `--re-data-grid-footer-surface` — footer background; `#fff`.
140
+ - `--re-data-grid-footer-separator-color` — separator color (`#ccc`)
141
+ - `--re-data-grid-footer-separator` — separator line (`1px solid var(--re-data-grid-footer-separator-color)`)
142
+ - `--re-data-grid-footer-surface` — footer background (`#fff`)
129
143
 
130
144
  Rows:
131
145
 
132
- - `--re-data-grid-row-separator-color` — row separator color; `#bbb`.
133
- - `--re-data-grid-row-separator` — separator line; `1px solid var(--re-data-grid-row-separator-color)`.
134
- - `--re-data-grid-row-odd-surface` — odd rows background; `var(--re-data-grid-cell-surface)`.
146
+ - `--re-data-grid-row-separator-color` — row separator color (`#bbb`)
147
+ - `--re-data-grid-row-separator` — separator line (`1px solid var(--re-data-grid-row-separator-color)`)
148
+ - `--re-data-grid-row-odd-surface` — odd rows background (`var(--re-data-grid-cell-surface)`)
135
149
 
136
150
  Columns:
137
- - `--re-data-grid-column-separator-color` — column divider color `transparent`.
138
- - `--re-data-grid-column-separator` — column divider `1px solid var(--re-data-grid-column-separator-color)`.
139
- - `--re-data-grid-column-odd-surface` — odd column background `var(--re-data-grid-cell-surface)`.
151
+ - `--re-data-grid-column-separator-color` — column divider color (`transparent`)
152
+ - `--re-data-grid-column-separator` — column divider (`1px solid var(--re-data-grid-column-separator-color)`)
153
+ - `--re-data-grid-column-odd-surface` — odd column background (`var(--re-data-grid-cell-surface)`)
140
154
 
141
155
  Cells:
142
156
 
143
- - `--re-data-grid-cell-paddings` — inner paddings; `0.4rem 0.625rem`.
144
- - `--re-data-grid-cell-font-weight` — font weight; `400`.
145
- - `--re-data-grid-cell-font-size` — font size; `0.75rem`.
146
- - `--re-data-grid-cell-color` — text color; `#000`.
147
- - `--re-data-grid-cell-surface` — cell background; `#fff`.
157
+ - `--re-data-grid-cell-paddings` — inner paddings (`0.4rem 0.625rem`)
158
+ - `--re-data-grid-cell-font-weight` — font weight (`400`)
159
+ - `--re-data-grid-cell-font-size` — font size (`0.75rem`)
160
+ - `--re-data-grid-cell-color` — text color (`#000`)
161
+ - `--re-data-grid-cell-surface` — cell background (`#fff`)
148
162
 
149
163
  Sticky Cells:
150
164
 
151
- - `--re-data-grid-sticky-cell-surface` — sticky cells background; `#fdfdfd`.
152
- - `--re-data-grid-sticky-cell-left-shadow` — left shadow; `2px 0 2px rgba(0, 0, 0, 0.03)`.
153
- - `--re-data-grid-sticky-cell-right-shadow` — right shadow; `-2px 0 2px rgba(0, 0, 0, 0.03)`.
165
+ - `--re-data-grid-sticky-cell-surface` — sticky cells background (`#fdfdfd`)
166
+ - `--re-data-grid-sticky-cell-left-shadow` — left shadow (`2px 0 2px rgba(0, 0, 0, 0.03)`)
167
+ - `--re-data-grid-sticky-cell-right-shadow` — right shadow (`-2px 0 2px rgba(0, 0, 0, 0.03)`)
154
168
 
155
169
  Pinned Sections:
156
170
 
157
- - `--re-data-grid-pinned-surface` — pinned sections background; `#fcfcfc`.
158
- - `--re-data-grid-pinned-separator-color` — separator color; `#eee`.
159
- - `--re-data-grid-pinned-separator` — separator line; `1px solid var(--re-data-grid-pinned-separator-color)`.
171
+ - `--re-data-grid-pinned-surface` — pinned sections background (`#fcfcfc`)
172
+ - `--re-data-grid-pinned-separator-color` — separator color (`#eee`)
173
+ - `--re-data-grid-pinned-separator` — separator line (`1px solid var(--re-data-grid-pinned-separator-color)`)
160
174
 
161
175
  Misc:
162
176
 
163
- - `--re-data-grid-expander-color` — expander indicator color; `var(--primary-color, currentColor)`.
177
+ - `--re-data-grid-expander-color` — expander indicator color (`var(--primary-color, currentColor)`)
178
+ - `--re-data-grid-expanded-color` — expanded column color (`var(--re-data-grid-cell-color, #000)`) *[NEW in 1.1.0]*
179
+ - `--re-data-grid-expanded-surface` — expanded column background(`var(--re-data-grid-cell-surface, #fff)`) *[NEW in 1.1.0]*
180
+
181
+ ---
182
+
183
+ ## Paginator *[NEW in 1.1.0]*
184
+ The paginator component is used to display a page selector and total count.
185
+
186
+ ### Inputs
187
+
188
+ | Parameter | Type | Default | Description |
189
+ |----------------|------------|-----------|--------------------------|
190
+ | current | `number` | 0 | Current page |
191
+ | pageSize | `number` | 0 | |
192
+ | totalElements | `number` | 0 | Total number of elements |
193
+ | maxShowPages | `number` | 7 | |
194
+
195
+ ### Outputs
196
+
197
+ | Event | Type | Description |
198
+ |--------------|-----------|-------------|
199
+ | pageChange | `number` | |
200
+
201
+ ### CSS Variables
202
+
203
+ Layout:
204
+ - `--re-data-grid-paginator-gap` — gap (`0.5rem`)
205
+
206
+ Page:
207
+ - `--re-data-grid-paginator-page-size` — (`1.75rem`)
208
+ - `--re-data-grid-paginator-page-border` — (`1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0)`)
209
+ - `--re-data-grid-paginator-page-separator-color` — (`var(--re-data-grid-separator-color, --border-color)`)
210
+ - `--re-data-grid-paginator-page-rounded` — (`var(--re-data-grid-rounded, --radius-md)`)
211
+ - `--re-data-grid-paginator-page-surface` — (`var(--re-data-grid-surface, white)`)
212
+ - `--re-data-grid-paginator-page-color` — (`var(--text-primary, #1e293b)`)
213
+ - `--re-data-grid-paginator-page-font-size` — (`0.875rem`)
164
214
 
165
- ## Theming via CSS Variables
215
+ Active Page:
216
+ - `--re-data-grid-paginator-page-active-surface` — (`var(--re-data-grid-active, #3b82f6)`)
217
+ - `--re-data-grid-paginator-page-active-color` — (`white`)
218
+
219
+ Hover Page:
220
+ - `--re-data-grid-paginator-page-hover-surface` — (`var(--re-data-grid-active, #3b82f6)`)
221
+ - `--re-data-grid-paginator-page-hover-color` — (`white`)
222
+
223
+ ---
224
+
225
+ ### Theming via CSS Variables
166
226
 
167
227
  Variables can be overridden globally (`:root`) or per grid container.
168
228
 
@@ -188,20 +248,27 @@ Compact Mode Example:
188
248
  }
189
249
  ```
190
250
 
191
- ## Custom Template Examples
251
+ ### Custom Template Examples
192
252
 
193
253
  Cell Template by Type
194
254
  ```html
195
- <ng-template ssDataGridTypeCell type="link" let-value let-row="row">
255
+ <ng-template reDataGridTypeCell="link" let-value let-row="row">
196
256
  <a [href]="value" target="_blank">{{ value }}</a>
197
257
  </ng-template>
198
258
  ```
199
259
 
260
+ Cell Template *[NEW in 1.1.0]*
261
+ ```html
262
+ <ng-template reDataGridCell="fullName" let-value let-row="row">
263
+ <span><b>{{ row.firstName }}</b> {{ row.lastName }}</span>
264
+ </ng-template>
265
+ ```
266
+
200
267
  Custom Header Template:
201
268
  ```html
202
- <ng-template ssDataGridHeader key="name" let-value>
269
+ <ng-template reDataGridHeader key="name" let-value>
203
270
  <span class="header-with-icon">
204
- <re-icon name="user"></re-icon>
271
+ <icon name="user" size="20" />
205
272
  {{ value }}
206
273
  </span>
207
274
  </ng-template>