@ni/nimble-components 18.6.2 → 18.6.4
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/dist/all-components-bundle.js +354 -80
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +581 -555
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/table/components/row/styles.js +4 -1
- package/dist/esm/table/components/row/styles.js.map +1 -1
- package/dist/esm/table/index.d.ts +24 -6
- package/dist/esm/table/index.js +101 -65
- package/dist/esm/table/index.js.map +1 -1
- package/dist/esm/table/models/table-layout-helper.d.ts +8 -0
- package/dist/esm/table/models/table-layout-helper.js +24 -0
- package/dist/esm/table/models/table-layout-helper.js.map +1 -0
- package/dist/esm/table/models/update-tracker.d.ts +26 -0
- package/dist/esm/table/models/update-tracker.js +106 -0
- package/dist/esm/table/models/update-tracker.js.map +1 -0
- package/dist/esm/table/models/virtualizer.js +1 -1
- package/dist/esm/table/styles.js +13 -3
- package/dist/esm/table/styles.js.map +1 -1
- package/dist/esm/table/template.js +11 -5
- package/dist/esm/table/template.js.map +1 -1
- package/dist/esm/table-column/base/index.d.ts +30 -0
- package/dist/esm/table-column/base/index.js +39 -1
- package/dist/esm/table-column/base/index.js.map +1 -1
- package/dist/esm/table-column/base/styles.js +6 -0
- package/dist/esm/table-column/base/styles.js.map +1 -1
- package/dist/esm/table-column/base/template.js +3 -1
- package/dist/esm/table-column/base/template.js.map +1 -1
- package/dist/esm/table-column/base/types.d.ts +2 -0
- package/dist/esm/table-column/base/types.js +2 -0
- package/dist/esm/table-column/base/types.js.map +1 -1
- package/dist/esm/table-column/mixins/fractional-width-column.d.ts +12 -0
- package/dist/esm/table-column/mixins/fractional-width-column.js +41 -0
- package/dist/esm/table-column/mixins/fractional-width-column.js.map +1 -0
- package/dist/esm/table-column/text/index.d.ts +16 -2
- package/dist/esm/table-column/text/index.js +14 -7
- package/dist/esm/table-column/text/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -5,10 +5,13 @@ export const styles = css `
|
|
|
5
5
|
${display('grid')}
|
|
6
6
|
|
|
7
7
|
:host {
|
|
8
|
-
height: ${controlHeight};
|
|
8
|
+
height: calc(${controlHeight} + 2 * ${borderWidth});
|
|
9
9
|
border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
|
|
10
10
|
grid-auto-flow: column;
|
|
11
11
|
grid-auto-columns: 1fr;
|
|
12
|
+
grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
|
|
13
|
+
width: fit-content;
|
|
14
|
+
min-width: 100%;
|
|
12
15
|
}
|
|
13
16
|
|
|
14
17
|
nimble-table-cell {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,aAAa,EACb,mBAAmB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;uBAGE,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;CAmBvE,CAAC"}
|
|
@@ -40,6 +40,14 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
|
|
|
40
40
|
* @internal
|
|
41
41
|
*/
|
|
42
42
|
canRenderRows: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* @internal
|
|
45
|
+
*/
|
|
46
|
+
scrollX: number;
|
|
47
|
+
/**
|
|
48
|
+
* @internal
|
|
49
|
+
*/
|
|
50
|
+
rowGridColumns?: string;
|
|
43
51
|
get validity(): TableValidity;
|
|
44
52
|
/**
|
|
45
53
|
* @internal
|
|
@@ -56,6 +64,7 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
|
|
|
56
64
|
private readonly table;
|
|
57
65
|
private options;
|
|
58
66
|
private readonly tableValidator;
|
|
67
|
+
private readonly updateTracker;
|
|
59
68
|
private columnNotifiers;
|
|
60
69
|
constructor();
|
|
61
70
|
setData(newData: readonly TData[]): void;
|
|
@@ -72,20 +81,29 @@ export declare class Table<TData extends TableRecord = TableRecord> extends Foun
|
|
|
72
81
|
handleChange(source: unknown, args: unknown): void;
|
|
73
82
|
onRowActionMenuBeforeToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
|
|
74
83
|
onRowActionMenuToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
|
|
75
|
-
|
|
84
|
+
/**
|
|
85
|
+
* @internal
|
|
86
|
+
*/
|
|
87
|
+
update(): void;
|
|
76
88
|
protected idFieldNameChanged(_prev: string | undefined, _next: string | undefined): void;
|
|
77
89
|
protected columnsChanged(_prev: TableColumn[] | undefined, _next: TableColumn[]): void;
|
|
90
|
+
private readonly onViewPortScroll;
|
|
78
91
|
private removeColumnObservers;
|
|
79
|
-
private
|
|
80
|
-
private validateColumnIds;
|
|
81
|
-
private validateColumnSortIndices;
|
|
92
|
+
private observeColumns;
|
|
82
93
|
private getColumnsParticipatingInSorting;
|
|
94
|
+
private childItemsChanged;
|
|
83
95
|
private updateColumnsFromChildItems;
|
|
96
|
+
private updateTanStack;
|
|
97
|
+
private updateActionMenuSlots;
|
|
98
|
+
private updateRowGridColumns;
|
|
99
|
+
private validate;
|
|
100
|
+
private validateWithData;
|
|
84
101
|
private setTableData;
|
|
85
102
|
private refreshRows;
|
|
86
103
|
private updateTableOptions;
|
|
87
|
-
private
|
|
88
|
-
private
|
|
104
|
+
private calculateTanStackSortState;
|
|
105
|
+
private calculateTanStackRowIdFunction;
|
|
106
|
+
private calculateTanStackColumns;
|
|
89
107
|
}
|
|
90
108
|
export declare const tableTag: string;
|
|
91
109
|
export {};
|
package/dist/esm/table/index.js
CHANGED
|
@@ -9,6 +9,8 @@ import { template } from './template';
|
|
|
9
9
|
import { TableColumnSortDirection } from './types';
|
|
10
10
|
import { Virtualizer } from './models/virtualizer';
|
|
11
11
|
import { getTanStackSortingFunction } from './models/sort-operations';
|
|
12
|
+
import { UpdateTracker } from './models/update-tracker';
|
|
13
|
+
import { TableLayoutHelper } from './models/table-layout-helper';
|
|
12
14
|
/**
|
|
13
15
|
* A nimble-styled table.
|
|
14
16
|
*/
|
|
@@ -35,8 +37,16 @@ export class Table extends FoundationElement {
|
|
|
35
37
|
* @internal
|
|
36
38
|
*/
|
|
37
39
|
this.canRenderRows = true;
|
|
40
|
+
/**
|
|
41
|
+
* @internal
|
|
42
|
+
*/
|
|
43
|
+
this.scrollX = 0;
|
|
38
44
|
this.tableValidator = new TableValidator();
|
|
45
|
+
this.updateTracker = new UpdateTracker(this);
|
|
39
46
|
this.columnNotifiers = [];
|
|
47
|
+
this.onViewPortScroll = (event) => {
|
|
48
|
+
this.scrollX = event.target.scrollLeft;
|
|
49
|
+
};
|
|
40
50
|
this.options = {
|
|
41
51
|
data: [],
|
|
42
52
|
onStateChange: (_) => { },
|
|
@@ -60,12 +70,17 @@ export class Table extends FoundationElement {
|
|
|
60
70
|
connectedCallback() {
|
|
61
71
|
super.connectedCallback();
|
|
62
72
|
this.virtualizer.connectedCallback();
|
|
63
|
-
this.
|
|
73
|
+
this.updateTracker.trackAllStateChanged();
|
|
74
|
+
this.observeColumns();
|
|
75
|
+
this.viewport.addEventListener('scroll', this.onViewPortScroll, {
|
|
76
|
+
passive: true
|
|
77
|
+
});
|
|
64
78
|
}
|
|
65
79
|
disconnectedCallback() {
|
|
66
80
|
super.disconnectedCallback();
|
|
67
81
|
this.virtualizer.disconnectedCallback();
|
|
68
82
|
this.removeColumnObservers();
|
|
83
|
+
this.viewport.removeEventListener('scroll', this.onViewPortScroll);
|
|
69
84
|
}
|
|
70
85
|
checkValidity() {
|
|
71
86
|
return this.tableValidator.isValid();
|
|
@@ -78,18 +93,8 @@ export class Table extends FoundationElement {
|
|
|
78
93
|
* is the string name of the property that changed on that column.
|
|
79
94
|
*/
|
|
80
95
|
handleChange(source, args) {
|
|
81
|
-
if (source instanceof TableColumn) {
|
|
82
|
-
|
|
83
|
-
this.validateColumnIds();
|
|
84
|
-
}
|
|
85
|
-
else if (args === 'operandDataRecordFieldName'
|
|
86
|
-
|| args === 'sortOperation') {
|
|
87
|
-
this.generateTanStackColumns();
|
|
88
|
-
}
|
|
89
|
-
else if (args === 'sortIndex' || args === 'sortDirection') {
|
|
90
|
-
this.validateColumnSortIndices();
|
|
91
|
-
this.setSortState();
|
|
92
|
-
}
|
|
96
|
+
if (source instanceof TableColumn && typeof args === 'string') {
|
|
97
|
+
this.updateTracker.trackColumnPropertyChanged(args);
|
|
93
98
|
}
|
|
94
99
|
}
|
|
95
100
|
onRowActionMenuBeforeToggle(event) {
|
|
@@ -99,28 +104,33 @@ export class Table extends FoundationElement {
|
|
|
99
104
|
onRowActionMenuToggle(event) {
|
|
100
105
|
this.$emit('action-menu-toggle', event.detail);
|
|
101
106
|
}
|
|
102
|
-
|
|
103
|
-
|
|
107
|
+
/**
|
|
108
|
+
* @internal
|
|
109
|
+
*/
|
|
110
|
+
update() {
|
|
111
|
+
this.validate();
|
|
112
|
+
if (this.updateTracker.requiresTanStackUpdate) {
|
|
113
|
+
this.updateTanStack();
|
|
114
|
+
}
|
|
115
|
+
if (this.updateTracker.updateActionMenuSlots) {
|
|
116
|
+
this.updateActionMenuSlots();
|
|
117
|
+
}
|
|
118
|
+
if (this.updateTracker.updateColumnWidths) {
|
|
119
|
+
this.updateRowGridColumns();
|
|
120
|
+
}
|
|
104
121
|
}
|
|
105
122
|
idFieldNameChanged(_prev, _next) {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
123
|
+
if (!this.$fastController.isConnected) {
|
|
124
|
+
return;
|
|
125
|
+
}
|
|
126
|
+
this.updateTracker.trackIdFieldNameChanged();
|
|
109
127
|
}
|
|
110
128
|
columnsChanged(_prev, _next) {
|
|
111
129
|
if (!this.$fastController.isConnected) {
|
|
112
130
|
return;
|
|
113
131
|
}
|
|
114
|
-
this.
|
|
115
|
-
this.
|
|
116
|
-
this.setSortState();
|
|
117
|
-
const slots = new Set();
|
|
118
|
-
for (const column of this.columns) {
|
|
119
|
-
if (column.actionMenuSlot) {
|
|
120
|
-
slots.add(column.actionMenuSlot);
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
this.actionMenuSlots = Array.from(slots);
|
|
132
|
+
this.observeColumns();
|
|
133
|
+
this.updateTracker.trackColumnInstancesChanged();
|
|
124
134
|
}
|
|
125
135
|
removeColumnObservers() {
|
|
126
136
|
this.columnNotifiers.forEach(notifier => {
|
|
@@ -128,28 +138,21 @@ export class Table extends FoundationElement {
|
|
|
128
138
|
});
|
|
129
139
|
this.columnNotifiers = [];
|
|
130
140
|
}
|
|
131
|
-
|
|
141
|
+
observeColumns() {
|
|
132
142
|
this.removeColumnObservers();
|
|
133
143
|
for (const column of this.columns) {
|
|
134
144
|
const notifier = Observable.getNotifier(column);
|
|
135
145
|
notifier.subscribe(this);
|
|
136
146
|
this.columnNotifiers.push(notifier);
|
|
137
147
|
}
|
|
138
|
-
this.validateColumnIds();
|
|
139
|
-
this.validateColumnSortIndices();
|
|
140
|
-
}
|
|
141
|
-
validateColumnIds() {
|
|
142
|
-
this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
|
|
143
|
-
this.canRenderRows = this.checkValidity();
|
|
144
|
-
}
|
|
145
|
-
validateColumnSortIndices() {
|
|
146
|
-
this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
|
|
147
|
-
this.canRenderRows = this.checkValidity();
|
|
148
148
|
}
|
|
149
149
|
getColumnsParticipatingInSorting() {
|
|
150
150
|
return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
|
|
151
151
|
&& typeof x.sortIndex === 'number');
|
|
152
152
|
}
|
|
153
|
+
childItemsChanged() {
|
|
154
|
+
void this.updateColumnsFromChildItems();
|
|
155
|
+
}
|
|
153
156
|
async updateColumnsFromChildItems() {
|
|
154
157
|
const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
|
|
155
158
|
? customElements.whenDefined(item.localName)
|
|
@@ -157,18 +160,53 @@ export class Table extends FoundationElement {
|
|
|
157
160
|
await Promise.all(definedElements);
|
|
158
161
|
this.columns = this.childItems.filter((x) => x instanceof TableColumn);
|
|
159
162
|
}
|
|
163
|
+
updateTanStack() {
|
|
164
|
+
const updatedOptions = {
|
|
165
|
+
state: {}
|
|
166
|
+
};
|
|
167
|
+
if (this.updateTracker.updateColumnSort) {
|
|
168
|
+
updatedOptions.state.sorting = this.calculateTanStackSortState();
|
|
169
|
+
}
|
|
170
|
+
if (this.updateTracker.updateColumnDefinition) {
|
|
171
|
+
updatedOptions.columns = this.calculateTanStackColumns();
|
|
172
|
+
}
|
|
173
|
+
if (this.updateTracker.updateRowIds) {
|
|
174
|
+
updatedOptions.getRowId = this.calculateTanStackRowIdFunction();
|
|
175
|
+
}
|
|
176
|
+
if (this.updateTracker.requiresTanStackDataReset) {
|
|
177
|
+
// Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
|
|
178
|
+
updatedOptions.data = [...this.table.options.data];
|
|
179
|
+
}
|
|
180
|
+
this.updateTableOptions(updatedOptions);
|
|
181
|
+
}
|
|
182
|
+
updateActionMenuSlots() {
|
|
183
|
+
const slots = new Set();
|
|
184
|
+
for (const column of this.columns) {
|
|
185
|
+
if (column.actionMenuSlot) {
|
|
186
|
+
slots.add(column.actionMenuSlot);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
this.actionMenuSlots = Array.from(slots);
|
|
190
|
+
}
|
|
191
|
+
updateRowGridColumns() {
|
|
192
|
+
this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
|
|
193
|
+
}
|
|
194
|
+
validate() {
|
|
195
|
+
this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
|
|
196
|
+
this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
|
|
197
|
+
this.validateWithData(this.table.options.data);
|
|
198
|
+
}
|
|
199
|
+
validateWithData(data) {
|
|
200
|
+
this.tableValidator.validateRecordIds(data, this.idFieldName);
|
|
201
|
+
this.canRenderRows = this.checkValidity();
|
|
202
|
+
}
|
|
160
203
|
setTableData(newData) {
|
|
161
204
|
const data = newData.map(record => {
|
|
162
205
|
return { ...record };
|
|
163
206
|
});
|
|
164
|
-
this.
|
|
165
|
-
this.canRenderRows = this.checkValidity();
|
|
166
|
-
const getRowIdFunction = this.idFieldName === null || this.idFieldName === undefined
|
|
167
|
-
? undefined
|
|
168
|
-
: (record) => record[this.idFieldName];
|
|
207
|
+
this.validateWithData(data);
|
|
169
208
|
this.updateTableOptions({
|
|
170
|
-
data
|
|
171
|
-
getRowId: getRowIdFunction
|
|
209
|
+
data
|
|
172
210
|
});
|
|
173
211
|
}
|
|
174
212
|
refreshRows() {
|
|
@@ -191,27 +229,26 @@ export class Table extends FoundationElement {
|
|
|
191
229
|
this.table.setOptions(this.options);
|
|
192
230
|
this.refreshRows();
|
|
193
231
|
}
|
|
194
|
-
|
|
232
|
+
calculateTanStackSortState() {
|
|
195
233
|
const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
|
|
196
234
|
this.firstSortedColumn = sortedColumns.length
|
|
197
235
|
? sortedColumns[0]
|
|
198
236
|
: undefined;
|
|
199
|
-
|
|
237
|
+
return sortedColumns.map(column => {
|
|
200
238
|
return {
|
|
201
239
|
id: column.internalUniqueId,
|
|
202
|
-
desc: column.sortDirection
|
|
203
|
-
=== TableColumnSortDirection.descending
|
|
240
|
+
desc: column.sortDirection === TableColumnSortDirection.descending
|
|
204
241
|
};
|
|
205
242
|
});
|
|
206
|
-
this.updateTableOptions({
|
|
207
|
-
state: {
|
|
208
|
-
sorting: tanStackSortingState
|
|
209
|
-
}
|
|
210
|
-
});
|
|
211
243
|
}
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
244
|
+
calculateTanStackRowIdFunction() {
|
|
245
|
+
return this.idFieldName === null || this.idFieldName === undefined
|
|
246
|
+
? undefined
|
|
247
|
+
: (record) => record[this.idFieldName];
|
|
248
|
+
}
|
|
249
|
+
calculateTanStackColumns() {
|
|
250
|
+
return this.columns.map(column => {
|
|
251
|
+
return {
|
|
215
252
|
id: column.internalUniqueId,
|
|
216
253
|
accessorFn: (data) => {
|
|
217
254
|
const fieldName = column.operandDataRecordFieldName;
|
|
@@ -222,13 +259,6 @@ export class Table extends FoundationElement {
|
|
|
222
259
|
},
|
|
223
260
|
sortingFn: getTanStackSortingFunction(column.sortOperation)
|
|
224
261
|
};
|
|
225
|
-
return columnDef;
|
|
226
|
-
});
|
|
227
|
-
this.updateTableOptions({
|
|
228
|
-
// Force TanStack to detect a data update because a columns's accessor is
|
|
229
|
-
// referenced when creating a new row model.
|
|
230
|
-
data: [...this.table.options.data],
|
|
231
|
-
columns: generatedColumns
|
|
232
262
|
});
|
|
233
263
|
}
|
|
234
264
|
}
|
|
@@ -253,6 +283,12 @@ __decorate([
|
|
|
253
283
|
__decorate([
|
|
254
284
|
observable
|
|
255
285
|
], Table.prototype, "canRenderRows", void 0);
|
|
286
|
+
__decorate([
|
|
287
|
+
observable
|
|
288
|
+
], Table.prototype, "scrollX", void 0);
|
|
289
|
+
__decorate([
|
|
290
|
+
observable
|
|
291
|
+
], Table.prototype, "rowGridColumns", void 0);
|
|
256
292
|
__decorate([
|
|
257
293
|
observable
|
|
258
294
|
], Table.prototype, "firstSortedColumn", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,UAAU,EACV,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { TableColumn } from '../../table-column/base';
|
|
2
|
+
/**
|
|
3
|
+
* This class provides helper methods for managing the layout of cells within
|
|
4
|
+
* a Table.
|
|
5
|
+
*/
|
|
6
|
+
export declare class TableLayoutHelper {
|
|
7
|
+
static getGridTemplateColumns(columns: TableColumn[]): string;
|
|
8
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This class provides helper methods for managing the layout of cells within
|
|
3
|
+
* a Table.
|
|
4
|
+
*/
|
|
5
|
+
export class TableLayoutHelper {
|
|
6
|
+
static getGridTemplateColumns(columns) {
|
|
7
|
+
return (columns
|
|
8
|
+
?.filter(column => !column.columnHidden)
|
|
9
|
+
.reduce((accumulator, currentValue) => {
|
|
10
|
+
const gap = accumulator === '' ? '' : ' ';
|
|
11
|
+
const minPixelWidth = currentValue.internalMinPixelWidth;
|
|
12
|
+
if (currentValue.currentPixelWidth) {
|
|
13
|
+
const pixelWidth = currentValue.currentPixelWidth;
|
|
14
|
+
const gridPixelWidth = pixelWidth > minPixelWidth
|
|
15
|
+
? pixelWidth
|
|
16
|
+
: minPixelWidth;
|
|
17
|
+
return `${accumulator}${gap}${gridPixelWidth}px`;
|
|
18
|
+
}
|
|
19
|
+
const fractionalWidth = currentValue.currentFractionalWidth;
|
|
20
|
+
return `${accumulator}${gap}minmax(${minPixelWidth}px, ${fractionalWidth}fr)`;
|
|
21
|
+
}, '') ?? '');
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=table-layout-helper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-layout-helper.js","sourceRoot":"","sources":["../../../../src/table/models/table-layout-helper.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,OAAO,iBAAiB;IACnB,MAAM,CAAC,sBAAsB,CAAC,OAAsB;QACvD,OAAO,CACH,OAAO;YACH,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;aACvC,MAAM,CAAC,CAAC,WAAmB,EAAE,YAAY,EAAE,EAAE;YAC1C,MAAM,GAAG,GAAG,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;YAC1C,MAAM,aAAa,GAAG,YAAY,CAAC,qBAAqB,CAAC;YACzD,IAAI,YAAY,CAAC,iBAAiB,EAAE;gBAChC,MAAM,UAAU,GAAG,YAAY,CAAC,iBAAiB,CAAC;gBAClD,MAAM,cAAc,GAAG,UAAU,GAAG,aAAa;oBAC7C,CAAC,CAAC,UAAU;oBACZ,CAAC,CAAC,aAAa,CAAC;gBACpB,OAAO,GAAG,WAAW,GAAG,GAAG,GAAG,cAAc,IAAI,CAAC;aACpD;YAED,MAAM,eAAe,GAAG,YAAY,CAAC,sBAAsB,CAAC;YAC5D,OAAO,GAAG,WAAW,GAAG,GAAG,UAAU,aAAa,OAAO,eAAe,KAAK,CAAC;QAClF,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CACnB,CAAC;IACN,CAAC;CACJ"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { Table } from '..';
|
|
2
|
+
import type { TableRecord } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Helper class to track what updates are needed to the table based on configuration
|
|
5
|
+
* changes.
|
|
6
|
+
*/
|
|
7
|
+
export declare class UpdateTracker<TData extends TableRecord> {
|
|
8
|
+
private readonly requiredUpdates;
|
|
9
|
+
private readonly table;
|
|
10
|
+
private updateQueued;
|
|
11
|
+
constructor(table: Table<TData>);
|
|
12
|
+
get updateRowIds(): boolean;
|
|
13
|
+
get updateColumnIds(): boolean;
|
|
14
|
+
get updateColumnSort(): boolean;
|
|
15
|
+
get updateColumnWidths(): boolean;
|
|
16
|
+
get updateColumnDefinition(): boolean;
|
|
17
|
+
get updateActionMenuSlots(): boolean;
|
|
18
|
+
get requiresTanStackUpdate(): boolean;
|
|
19
|
+
get requiresTanStackDataReset(): boolean;
|
|
20
|
+
trackAllStateChanged(): void;
|
|
21
|
+
trackColumnPropertyChanged(changedColumnProperty: string): void;
|
|
22
|
+
trackColumnInstancesChanged(): void;
|
|
23
|
+
trackIdFieldNameChanged(): void;
|
|
24
|
+
private setAllKeys;
|
|
25
|
+
private queueUpdate;
|
|
26
|
+
}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { DOM } from '@microsoft/fast-element';
|
|
2
|
+
const isColumnProperty = (changedProperty, ...args) => {
|
|
3
|
+
for (const arg of args) {
|
|
4
|
+
if (changedProperty === arg) {
|
|
5
|
+
return true;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
return false;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Helper class to track what updates are needed to the table based on configuration
|
|
12
|
+
* changes.
|
|
13
|
+
*/
|
|
14
|
+
export class UpdateTracker {
|
|
15
|
+
constructor(table) {
|
|
16
|
+
this.requiredUpdates = {
|
|
17
|
+
rowIds: false,
|
|
18
|
+
columnIds: false,
|
|
19
|
+
columnSort: false,
|
|
20
|
+
columnWidths: false,
|
|
21
|
+
columnDefinition: false,
|
|
22
|
+
actionMenuSlots: false
|
|
23
|
+
};
|
|
24
|
+
this.updateQueued = false;
|
|
25
|
+
this.table = table;
|
|
26
|
+
}
|
|
27
|
+
get updateRowIds() {
|
|
28
|
+
return this.requiredUpdates.rowIds;
|
|
29
|
+
}
|
|
30
|
+
get updateColumnIds() {
|
|
31
|
+
return this.requiredUpdates.columnIds;
|
|
32
|
+
}
|
|
33
|
+
get updateColumnSort() {
|
|
34
|
+
return this.requiredUpdates.columnSort;
|
|
35
|
+
}
|
|
36
|
+
get updateColumnWidths() {
|
|
37
|
+
return this.requiredUpdates.columnWidths;
|
|
38
|
+
}
|
|
39
|
+
get updateColumnDefinition() {
|
|
40
|
+
return this.requiredUpdates.columnDefinition;
|
|
41
|
+
}
|
|
42
|
+
get updateActionMenuSlots() {
|
|
43
|
+
return this.requiredUpdates.actionMenuSlots;
|
|
44
|
+
}
|
|
45
|
+
get requiresTanStackUpdate() {
|
|
46
|
+
return (this.requiredUpdates.rowIds
|
|
47
|
+
|| this.requiredUpdates.columnSort
|
|
48
|
+
|| this.requiredUpdates.columnDefinition);
|
|
49
|
+
}
|
|
50
|
+
get requiresTanStackDataReset() {
|
|
51
|
+
return (this.requiredUpdates.rowIds || this.requiredUpdates.columnDefinition);
|
|
52
|
+
}
|
|
53
|
+
trackAllStateChanged() {
|
|
54
|
+
this.setAllKeys(true);
|
|
55
|
+
this.queueUpdate();
|
|
56
|
+
}
|
|
57
|
+
trackColumnPropertyChanged(changedColumnProperty) {
|
|
58
|
+
if (isColumnProperty(changedColumnProperty, 'columnId')) {
|
|
59
|
+
this.requiredUpdates.columnIds = true;
|
|
60
|
+
}
|
|
61
|
+
else if (isColumnProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
|
|
62
|
+
this.requiredUpdates.columnDefinition = true;
|
|
63
|
+
}
|
|
64
|
+
else if (isColumnProperty(changedColumnProperty, 'sortIndex', 'sortDirection')) {
|
|
65
|
+
this.requiredUpdates.columnSort = true;
|
|
66
|
+
}
|
|
67
|
+
else if (isColumnProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'internalMinPixelWidth', 'columnHidden')) {
|
|
68
|
+
this.requiredUpdates.columnWidths = true;
|
|
69
|
+
}
|
|
70
|
+
else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
|
|
71
|
+
this.requiredUpdates.actionMenuSlots = true;
|
|
72
|
+
}
|
|
73
|
+
this.queueUpdate();
|
|
74
|
+
}
|
|
75
|
+
trackColumnInstancesChanged() {
|
|
76
|
+
this.requiredUpdates.columnIds = true;
|
|
77
|
+
this.requiredUpdates.columnDefinition = true;
|
|
78
|
+
this.requiredUpdates.columnSort = true;
|
|
79
|
+
this.requiredUpdates.columnWidths = true;
|
|
80
|
+
this.requiredUpdates.actionMenuSlots = true;
|
|
81
|
+
this.queueUpdate();
|
|
82
|
+
}
|
|
83
|
+
trackIdFieldNameChanged() {
|
|
84
|
+
this.requiredUpdates.rowIds = true;
|
|
85
|
+
this.queueUpdate();
|
|
86
|
+
}
|
|
87
|
+
setAllKeys(value) {
|
|
88
|
+
Object.keys(this.requiredUpdates).forEach(key => {
|
|
89
|
+
this.requiredUpdates[key] = value;
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
queueUpdate() {
|
|
93
|
+
if (!this.table.$fastController.isConnected) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
if (!this.updateQueued) {
|
|
97
|
+
this.updateQueued = true;
|
|
98
|
+
DOM.queueUpdate(() => {
|
|
99
|
+
this.table.update();
|
|
100
|
+
this.setAllKeys(false);
|
|
101
|
+
this.updateQueued = false;
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
//# sourceMappingURL=update-tracker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"update-tracker.js","sourceRoot":"","sources":["../../../../src/table/models/update-tracker.ts"],"names":[],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ export class Virtualizer {
|
|
|
20
20
|
// If we have enough rows that a vertical scrollbar is shown, we need to offset the header widths
|
|
21
21
|
// by the same margin so the column headers align with the corresponding rendered cells
|
|
22
22
|
const viewportBoundingWidth = borderBoxSize.inlineSize;
|
|
23
|
-
this.headerContainerMarginRight = viewportBoundingWidth - this.table.viewport.
|
|
23
|
+
this.headerContainerMarginRight = viewportBoundingWidth - this.table.viewport.clientWidth;
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
}
|
package/dist/esm/table/styles.js
CHANGED
|
@@ -13,6 +13,7 @@ export const styles = css `
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.table-container {
|
|
16
|
+
overflow: hidden;
|
|
16
17
|
display: flex;
|
|
17
18
|
flex-direction: column;
|
|
18
19
|
width: 100%;
|
|
@@ -21,7 +22,7 @@ export const styles = css `
|
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.table-viewport {
|
|
24
|
-
overflow
|
|
25
|
+
overflow: auto;
|
|
25
26
|
display: block;
|
|
26
27
|
height: 100%;
|
|
27
28
|
position: relative;
|
|
@@ -32,11 +33,13 @@ export const styles = css `
|
|
|
32
33
|
position: absolute;
|
|
33
34
|
top: 0px;
|
|
34
35
|
width: 100%;
|
|
36
|
+
height: var(--ni-private-table-scroll-height);
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.table-row-container {
|
|
38
40
|
width: 100%;
|
|
39
41
|
position: relative;
|
|
42
|
+
top: var(--ni-private-table-row-container-top);
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
.header-container {
|
|
@@ -45,10 +48,17 @@ export const styles = css `
|
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
.header-row {
|
|
48
|
-
display:
|
|
49
|
-
flex-direction: row;
|
|
51
|
+
display: grid;
|
|
50
52
|
background: ${applicationBackgroundColor};
|
|
51
53
|
position: relative;
|
|
54
|
+
width: fit-content;
|
|
55
|
+
min-width: 100%;
|
|
56
|
+
grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
|
|
57
|
+
left: var(--ni-private-table-scroll-x);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.header-scrollbar-spacer {
|
|
61
|
+
width: var(--ni-private-table-header-scrollbar-spacer-width);
|
|
52
62
|
}
|
|
53
63
|
|
|
54
64
|
.header {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,cAAc,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA+BR,0BAA0B;;;;;;;;;;;;;;;;;sBAiB1B,0BAA0B;;;;;;;;;;;;;;sBAc1B,cAAc;;CAEnC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;;8BAMmB,cAAc;;;;;8BAKd,cAAc;;;;8BAId,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC"}
|