@reforgium/data-grid 1.0.3 → 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 +116 -52
  2. package/fesm2022/reforgium-data-grid.mjs +217 -68
  3. package/fesm2022/reforgium-data-grid.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/reforgium-data-grid.d.ts +192 -71
  6. package/types/reforgium-data-grid.d.ts.map +1 -1
package/README.md CHANGED
@@ -22,9 +22,10 @@ Designed for **real-world datasets**, not demo tables.
22
22
  - Column expanders (hidden columns via toggler)
23
23
  - Scrollable overlay scrollbar
24
24
  - Pinned rows (top and bottom)
25
- - Custom templates for headers, cells, pinned rows
25
+ - Custom templates for headers, cells, pinned rows, icons
26
26
  - Row selection (single / multi)
27
27
  - Signals-based API (`signal()` first)
28
+ - Paginator component *[NEW in 1.1.0]*
28
29
 
29
30
  ---
30
31
 
@@ -43,11 +44,12 @@ export class SomeComponent {}
43
44
 
44
45
  ```html
45
46
  <re-data-grid
47
+ mode="infinity"
46
48
  [data]="users"
47
49
  [columns]="columns"
48
50
  [pageSize]="50"
49
51
  [loading]="loading"
50
- (loadData)="loadMore($event)"
52
+ (pageChange)="loadMore($event)"
51
53
  />
52
54
  ```
53
55
 
@@ -57,19 +59,23 @@ export class SomeComponent {}
57
59
 
58
60
  ### Inputs
59
61
 
60
- | Parameter | Type | Default | Description |
61
- |-------------------|----------------------------------------------|-------------|---------------------------------|
62
- | data | `T[]` | `[]` | Data array to render |
63
- | columns | `GridColumns<T>` | `[]` | Column configuration |
64
- | pinnedRows | `GridPinnedRows<T>` | `undefined` | Top / bottom pinned rows |
65
- | mode | `'default' \| 'infinity' \| 'none'` | `'default'` | Grid operation mode |
66
- | pageSize | `number` | `20` | Page size |
67
- | pageStartFromZero | `boolean` | `false` | Start page index from 0 |
68
- | hasIndexColumn | `boolean` | `false` | Show index column |
69
- | selection | `{ mode: 'single' \| 'multi', key: string }` | `undefined` | Row selection configuration |
70
- | fillHeight | `boolean` | `false` | Fill available container height |
71
- | loading | `boolean` | `false` | Loading state |
72
- | 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`.
73
79
 
74
80
  ### Outputs
75
81
 
@@ -83,24 +89,29 @@ export class SomeComponent {}
83
89
 
84
90
  ### Templates
85
91
 
86
- | Directive | Parameters | Description |
87
- |--------------------|--------------------|----------------------------------------|
88
- | reDataGridHeader | value: string | Column header template |
89
- | reDataGridTypeCell | value: any, row: T | Cell template for specific column type |
90
- | reDataGridEmpty | - | Empty state template |
91
- | reDataGridLoading | - | 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]* |
92
101
 
93
102
 
94
103
  ### CSS Variables
95
104
 
96
105
  Layout / Appearance:
97
- - `--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]*
98
108
  - `--re-data-grid-rounded` — border radius (`var(--radius-md, 6px)`).
99
109
  - `--re-data-grid-surface` — table background (`#fff`).
100
110
  - `--re-data-grid-active` — active color (`#2a90f4`).
101
111
 
102
112
  Empty / Loading States:
103
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]*
104
115
  - `--re-data-grid-loading-color` — loading indicator color (`#444`)
105
116
  - `--re-data-grid-loading-surface` — loading overlay (`rgba(255,255,255,0.5)`)
106
117
 
@@ -114,58 +125,104 @@ Scrollbar:
114
125
  Header:
115
126
  - `--re-data-grid-header-height` — header row height (`40px`)
116
127
  - `--re-data-grid-header-separator-color` — separator color (`#ccc`)
117
- - `--re-data-grid-header-separator` — separator line
128
+ - `--re-data-grid-header-separator` — separator line (`1px solid var(--re-data-grid-header-separator-color)`)
118
129
  - `--re-data-grid-header-surface` — header background (`#fff`)
119
130
 
120
131
  Header Cells:
121
132
 
122
- - `--re-data-grid-header-cell-font-weight` — font weight; `600`.
123
- - `--re-data-grid-header-cell-font-size` — font size; `0.8rem`.
124
- - `--re-data-grid-header-cell-color` — text color; `#000`.
125
- - `--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`)
126
137
 
127
138
  Footer:
128
139
 
129
- - `--re-data-grid-footer-separator-color` — separator color; `#ccc`.
130
- - `--re-data-grid-footer-separator` — separator line; `1px solid var(--re-data-grid-footer-separator-color)`.
131
- - `--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`)
132
143
 
133
144
  Rows:
134
145
 
135
- - `--re-data-grid-row-separator-color` — row separator color; `#bbb`.
136
- - `--re-data-grid-row-separator` — separator line; `1px solid var(--re-data-grid-row-separator-color)`.
137
- - `--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)`)
138
149
 
139
150
  Columns:
140
- - `--re-data-grid-column-separator-color` — column divider color `transparent`.
141
- - `--re-data-grid-column-separator` — column divider `1px solid var(--re-data-grid-column-separator-color)`.
142
- - `--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)`)
143
154
 
144
155
  Cells:
145
156
 
146
- - `--re-data-grid-cell-paddings` — inner paddings; `0.4rem 0.625rem`.
147
- - `--re-data-grid-cell-font-weight` — font weight; `400`.
148
- - `--re-data-grid-cell-font-size` — font size; `0.75rem`.
149
- - `--re-data-grid-cell-color` — text color; `#000`.
150
- - `--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`)
151
162
 
152
163
  Sticky Cells:
153
164
 
154
- - `--re-data-grid-sticky-cell-surface` — sticky cells background; `#fdfdfd`.
155
- - `--re-data-grid-sticky-cell-left-shadow` — left shadow; `2px 0 2px rgba(0, 0, 0, 0.03)`.
156
- - `--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)`)
157
168
 
158
169
  Pinned Sections:
159
170
 
160
- - `--re-data-grid-pinned-surface` — pinned sections background; `#fcfcfc`.
161
- - `--re-data-grid-pinned-separator-color` — separator color; `#eee`.
162
- - `--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)`)
163
174
 
164
175
  Misc:
165
176
 
166
- - `--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]*
167
180
 
168
- ## Theming via CSS Variables
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`)
214
+
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
169
226
 
170
227
  Variables can be overridden globally (`:root`) or per grid container.
171
228
 
@@ -191,20 +248,27 @@ Compact Mode Example:
191
248
  }
192
249
  ```
193
250
 
194
- ## Custom Template Examples
251
+ ### Custom Template Examples
195
252
 
196
253
  Cell Template by Type
197
254
  ```html
198
- <ng-template reDataGridTypeCell type="link" let-value let-row="row">
255
+ <ng-template reDataGridTypeCell="link" let-value let-row="row">
199
256
  <a [href]="value" target="_blank">{{ value }}</a>
200
257
  </ng-template>
201
258
  ```
202
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
+
203
267
  Custom Header Template:
204
268
  ```html
205
269
  <ng-template reDataGridHeader key="name" let-value>
206
270
  <span class="header-with-icon">
207
- <re-icon name="user"></re-icon>
271
+ <icon name="user" size="20" />
208
272
  {{ value }}
209
273
  </span>
210
274
  </ng-template>