overview-components 1.0.3 → 1.0.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/components/lit-data-grid-tanstack.d.ts +15 -6
- package/dist/components/lit-data-grid-tanstack.d.ts.map +1 -1
- package/dist/components/lit-data-grid-tanstack.js +142 -99
- package/dist/components/lit-data-grid-tanstack.js.map +1 -1
- package/dist/shared/filter-inputs.d.ts +7 -3
- package/dist/shared/filter-inputs.d.ts.map +1 -1
- package/dist/shared/filter-inputs.js +65 -25
- package/dist/shared/filter-inputs.js.map +1 -1
- package/dist/shared/lit-checkbox.js +1 -1
- package/dist/shared/lit-data-grid-row-actions.js +1 -1
- package/dist/shared/lit-select.d.ts +6 -4
- package/dist/shared/lit-select.d.ts.map +1 -1
- package/dist/shared/lit-select.js +87 -36
- package/dist/shared/lit-select.js.map +1 -1
- package/dist/shared/simple-popper.d.ts.map +1 -1
- package/dist/shared/simple-popper.js +1 -0
- package/dist/shared/simple-popper.js.map +1 -1
- package/dist/utils/custom-filters.d.ts +2 -1
- package/dist/utils/custom-filters.d.ts.map +1 -1
- package/dist/utils/custom-filters.js +61 -6
- package/dist/utils/custom-filters.js.map +1 -1
- package/dist/utils/date.d.ts +1 -1
- package/dist/utils/date.d.ts.map +1 -1
- package/dist/utils/date.js +4 -1
- package/dist/utils/date.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
2
|
import { ColumnFiltersState } from '@tanstack/lit-table';
|
|
3
3
|
import '../shared/filter-inputs.js';
|
|
4
4
|
import '../shared/lit-icon.js';
|
|
@@ -21,11 +21,12 @@ declare global {
|
|
|
21
21
|
XLSX: any;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
+
export type ColumnType = 'string' | 'number' | 'date' | 'range' | 'select' | 'multiselect' | 'dateTime' | 'actions' | 'dateTimeRange' | 'dateRange' | 'numberRange';
|
|
24
25
|
export type Density = 'compact' | 'standard' | 'comfort';
|
|
25
26
|
export type DateFormats = null | 'dd.MM.yyyy' | 'd.M.yyyy' | 'dd/MM/yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';
|
|
26
27
|
export type Column = {
|
|
27
28
|
field: string;
|
|
28
|
-
type:
|
|
29
|
+
type: ColumnType;
|
|
29
30
|
headerName: string;
|
|
30
31
|
columnAggregation?: 'sum' | 'median' | 'min' | 'max';
|
|
31
32
|
enableGrouping?: boolean;
|
|
@@ -37,7 +38,7 @@ export type Column = {
|
|
|
37
38
|
[key: string]: string | number;
|
|
38
39
|
};
|
|
39
40
|
cell?: (cell: any, html: any, unsafeHTML: any) => any;
|
|
40
|
-
accessorFn?: (originalRow: any
|
|
41
|
+
accessorFn?: (originalRow: any) => any;
|
|
41
42
|
sortDescFirst?: boolean;
|
|
42
43
|
enableResizing?: boolean;
|
|
43
44
|
getActions?: (row: any) => ActionButton[];
|
|
@@ -82,11 +83,17 @@ export type DataGridTanstackProps = {
|
|
|
82
83
|
rowDensity?: 'compact' | 'standard' | 'comfort';
|
|
83
84
|
checkboxSelection?: boolean;
|
|
84
85
|
onRowSelectionChanged?: Function;
|
|
86
|
+
columnSizing: Record<string, number>;
|
|
85
87
|
onColumnResize: (table: any, columnSizing: {
|
|
86
88
|
[key: string]: number;
|
|
87
89
|
}) => void;
|
|
88
90
|
exportExcelFn?: Function;
|
|
89
91
|
exportCsvFn?: Function;
|
|
92
|
+
localizeDate?: Boolean;
|
|
93
|
+
getTotalNumberFn?: Function;
|
|
94
|
+
minFilterCharacters?: Number;
|
|
95
|
+
getRowId?: (row: any, index: number) => string;
|
|
96
|
+
rowSelected?: Record<string, boolean>;
|
|
90
97
|
};
|
|
91
98
|
export declare class LitDataGridTanstack extends LitElement {
|
|
92
99
|
row?: any[];
|
|
@@ -136,6 +143,10 @@ export declare class LitDataGridTanstack extends LitElement {
|
|
|
136
143
|
checkboxSelection?: boolean;
|
|
137
144
|
getTotalNumberFn?: Function;
|
|
138
145
|
totalNumberRows?: number;
|
|
146
|
+
minFilterCharacters: number;
|
|
147
|
+
localizeDate: boolean;
|
|
148
|
+
rowSelected: Record<string, boolean>;
|
|
149
|
+
getRowId?: (row: any, index: number) => string;
|
|
139
150
|
rowsCount: any;
|
|
140
151
|
private selectedRowId;
|
|
141
152
|
private isScrollable;
|
|
@@ -145,8 +156,6 @@ export declare class LitDataGridTanstack extends LitElement {
|
|
|
145
156
|
private sorting;
|
|
146
157
|
table: any;
|
|
147
158
|
private rowHeight;
|
|
148
|
-
private _rowSelection;
|
|
149
|
-
private _columnSizing;
|
|
150
159
|
private scrollToEnd;
|
|
151
160
|
private tableController;
|
|
152
161
|
private tableContainerRef;
|
|
@@ -184,7 +193,7 @@ export declare class LitDataGridTanstack extends LitElement {
|
|
|
184
193
|
handleScroll(event: Event): void;
|
|
185
194
|
handleGetTotalNumber(): void;
|
|
186
195
|
static styles: import("lit").CSSResult[];
|
|
187
|
-
render(): TemplateResult<1>;
|
|
196
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
188
197
|
}
|
|
189
198
|
declare global {
|
|
190
199
|
interface HTMLElementTagNameMap {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lit-data-grid-tanstack.d.ts","sourceRoot":"","sources":["../../src/components/lit-data-grid-tanstack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"lit-data-grid-tanstack.d.ts","sourceRoot":"","sources":["../../src/components/lit-data-grid-tanstack.ts"],"names":[],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ import '../shared/lit-checkbox.js';
|
|
|
31
31
|
import '../shared/lit-overflow-tooltip.js';
|
|
32
32
|
// utils
|
|
33
33
|
import { formatDate } from '../utils/date.js';
|
|
34
|
-
import { dateFilterFn, multiselectFilterFn } from '../utils/custom-filters.js';
|
|
34
|
+
import { dateFilterFn, multiselectFilterFn, dateRangeFilterFn } from '../utils/custom-filters.js';
|
|
35
35
|
import { setLocale, getLocale } from '../utils/localization.js';
|
|
36
36
|
let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
37
37
|
constructor() {
|
|
@@ -54,7 +54,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
54
54
|
this.dateFormat = null;
|
|
55
55
|
this.isLoading = false;
|
|
56
56
|
this.onColumnResize = () => { };
|
|
57
|
-
this.onColumnFiltersChanged = (filterModel) => { };
|
|
57
|
+
this.onColumnFiltersChanged = (table, filterModel) => { };
|
|
58
58
|
this.onColumnSortChanged = (table, sortModel) => { };
|
|
59
59
|
this.onRowSelectionChanged = (table, selectedRows) => { };
|
|
60
60
|
this.enableRowSelectionOnClick = false;
|
|
@@ -63,6 +63,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
63
63
|
this.scrollEndThreshold = 100;
|
|
64
64
|
this.rowDensity = 'standard';
|
|
65
65
|
this.checkboxSelection = false;
|
|
66
|
+
this.minFilterCharacters = 3;
|
|
67
|
+
this.localizeDate = true;
|
|
68
|
+
this.rowSelected = {};
|
|
66
69
|
this.rowsCount = 0;
|
|
67
70
|
this.selectedRowId = null;
|
|
68
71
|
this.isScrollable = false;
|
|
@@ -71,8 +74,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
71
74
|
this.filters = [];
|
|
72
75
|
this.sorting = [];
|
|
73
76
|
this.rowHeight = 31;
|
|
74
|
-
this._rowSelection = {};
|
|
75
|
-
this._columnSizing = {};
|
|
76
77
|
this.scrollToEnd = false;
|
|
77
78
|
this.tableContainerRef = createRef();
|
|
78
79
|
this.scrollInterval = null;
|
|
@@ -147,9 +148,6 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
147
148
|
this.initTable();
|
|
148
149
|
this.requestUpdate();
|
|
149
150
|
}
|
|
150
|
-
if (changedProperties.has('columnSizing')) {
|
|
151
|
-
this._columnSizing = this.columnSizing;
|
|
152
|
-
}
|
|
153
151
|
}
|
|
154
152
|
firstUpdated() {
|
|
155
153
|
const grid = this.tableContainerRef.value;
|
|
@@ -349,31 +347,25 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
349
347
|
return {
|
|
350
348
|
id: column.field,
|
|
351
349
|
accessorKey: column.field,
|
|
352
|
-
accessorFn:
|
|
350
|
+
accessorFn: (originalRow) => (column.type === 'date' ||
|
|
351
|
+
column.type === 'dateTime' ||
|
|
352
|
+
column.type === 'dateTimeRange' ||
|
|
353
|
+
column.type === 'dateRange') &&
|
|
354
|
+
this.localizeDate
|
|
355
|
+
? column.accessorFn
|
|
356
|
+
? formatDate(column.accessorFn(originalRow), this.userLang || 'cs', column.type === 'date' || column.type === 'dateRange'
|
|
357
|
+
? undefined
|
|
358
|
+
: true, this.dateFormat)
|
|
359
|
+
: formatDate(originalRow[column.field], this.userLang || 'cs', column.type === 'date' || column.type === 'dateRange'
|
|
360
|
+
? undefined
|
|
361
|
+
: true, this.dateFormat)
|
|
362
|
+
: column.accessorFn
|
|
363
|
+
? column.accessorFn(originalRow)
|
|
364
|
+
: originalRow[column.field],
|
|
353
365
|
type: column.type,
|
|
354
366
|
header: column.headerName,
|
|
355
367
|
cell: (props) => {
|
|
356
368
|
const value = props.getValue();
|
|
357
|
-
const isGrouped = props.row.getIsGrouped?.();
|
|
358
|
-
const isAggregated = props.row.getIsAggregated?.();
|
|
359
|
-
if (isGrouped) {
|
|
360
|
-
if (column.type === 'date' && !this.server) {
|
|
361
|
-
return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
|
|
362
|
-
}
|
|
363
|
-
if (column.type === 'dateTime' && !this.server) {
|
|
364
|
-
return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
|
|
365
|
-
}
|
|
366
|
-
return value;
|
|
367
|
-
}
|
|
368
|
-
if (isAggregated) {
|
|
369
|
-
return value;
|
|
370
|
-
}
|
|
371
|
-
if (column.type === 'date' && value && !this.server) {
|
|
372
|
-
return formatDate(value, this.userLang || 'cs', undefined, this.dateFormat);
|
|
373
|
-
}
|
|
374
|
-
if (column.type === 'dateTime' && value && !this.server) {
|
|
375
|
-
return formatDate(value, this.userLang || 'cs', true, this.dateFormat);
|
|
376
|
-
}
|
|
377
369
|
if (column.type === 'actions') {
|
|
378
370
|
return html `
|
|
379
371
|
<lit-data-grid-row-actions
|
|
@@ -385,7 +377,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
385
377
|
},
|
|
386
378
|
filterFn: (() => {
|
|
387
379
|
switch (column.type) {
|
|
388
|
-
case '
|
|
380
|
+
case 'numberRange':
|
|
389
381
|
return filterFns.inNumberRange;
|
|
390
382
|
case 'select':
|
|
391
383
|
return filterFns.weakEquals;
|
|
@@ -393,6 +385,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
393
385
|
return multiselectFilterFn;
|
|
394
386
|
case 'number':
|
|
395
387
|
return filterFns.weakEquals;
|
|
388
|
+
case 'dateRange':
|
|
389
|
+
case 'dateTimeRange':
|
|
390
|
+
return dateRangeFilterFn;
|
|
396
391
|
case 'date':
|
|
397
392
|
case 'dateTime':
|
|
398
393
|
return dateFilterFn;
|
|
@@ -464,7 +459,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
464
459
|
}
|
|
465
460
|
return ''; // Ostatné stĺpce v skupinovom riadku prázdne
|
|
466
461
|
}
|
|
467
|
-
const value =
|
|
462
|
+
const value = row.getValue?.(accessor) || ''; // Získanie hodnoty pre normálny riadok
|
|
468
463
|
return typeof value === 'string'
|
|
469
464
|
? `"${value.replace(/"/g, '""')}"` // Ošetrenie dvojitých úvodzoviek
|
|
470
465
|
: value;
|
|
@@ -512,8 +507,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
512
507
|
}
|
|
513
508
|
else if (accessor) {
|
|
514
509
|
// Normálny riadok
|
|
515
|
-
formattedRow[columnName] =
|
|
516
|
-
row.original?.[accessor] || row.getValue?.(accessor) || '';
|
|
510
|
+
formattedRow[columnName] = row.getValue?.(accessor) || '';
|
|
517
511
|
}
|
|
518
512
|
});
|
|
519
513
|
return formattedRow;
|
|
@@ -602,13 +596,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
602
596
|
</div>
|
|
603
597
|
`,
|
|
604
598
|
cell: ({ row }) => html `
|
|
605
|
-
<
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
599
|
+
<div style="padding: 0.1875rem 0px 0px 0px">
|
|
600
|
+
<lit-checkbox
|
|
601
|
+
type="checkbox"
|
|
602
|
+
.onChange="${row.getToggleSelectedHandler()}"
|
|
603
|
+
.checked="${row.getIsSelected()}"
|
|
604
|
+
?disabled="${!row.getCanSelect()}"
|
|
605
|
+
.indeterminate="${row.getIsSomeSelected()}"
|
|
606
|
+
></lit-checkbox>
|
|
607
|
+
</div>
|
|
612
608
|
`,
|
|
613
609
|
},
|
|
614
610
|
]
|
|
@@ -639,10 +635,11 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
639
635
|
state: {
|
|
640
636
|
columnFilters: this.filters,
|
|
641
637
|
sorting: this.sorting,
|
|
642
|
-
rowSelection: this.
|
|
643
|
-
columnSizing: this.
|
|
638
|
+
rowSelection: this.rowSelected,
|
|
639
|
+
columnSizing: this.columnSizing,
|
|
644
640
|
},
|
|
645
641
|
filterFns: {
|
|
642
|
+
dateRangeFilterFn: dateRangeFilterFn,
|
|
646
643
|
dateFilterFn: dateFilterFn,
|
|
647
644
|
multiselectFilterFn: multiselectFilterFn,
|
|
648
645
|
},
|
|
@@ -652,7 +649,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
652
649
|
enableGrouping: this.enableGrouping,
|
|
653
650
|
manualFiltering: this.server,
|
|
654
651
|
manualSorting: this.server,
|
|
655
|
-
getRowId: (row, index) => index.toString(),
|
|
652
|
+
getRowId: (row, index) => this.getRowId ? this.getRowId(row, index) : index.toString(),
|
|
656
653
|
// groupedColumnMode: 'reorder',
|
|
657
654
|
getCoreRowModel: getCoreRowModel(),
|
|
658
655
|
getSortedRowModel: getSortedRowModel(),
|
|
@@ -691,9 +688,9 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
691
688
|
},
|
|
692
689
|
onRowSelectionChange: (updaterOrValue) => {
|
|
693
690
|
const rowSelection = typeof updaterOrValue === 'function'
|
|
694
|
-
? updaterOrValue(this.
|
|
691
|
+
? updaterOrValue(this.rowSelected)
|
|
695
692
|
: updaterOrValue;
|
|
696
|
-
this.
|
|
693
|
+
this.rowSelected = rowSelection;
|
|
697
694
|
if (this.onRowSelectionChanged) {
|
|
698
695
|
this.onRowSelectionChanged(this.table, rowSelection);
|
|
699
696
|
}
|
|
@@ -702,7 +699,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
702
699
|
const columnSizingState = typeof updaterOrValue === 'function'
|
|
703
700
|
? updaterOrValue(this.table.getState().columnSizing)
|
|
704
701
|
: updaterOrValue;
|
|
705
|
-
this.
|
|
702
|
+
this.columnSizing = columnSizingState;
|
|
706
703
|
if (this.onColumnResize) {
|
|
707
704
|
this.onColumnResize(this.table, columnSizingState);
|
|
708
705
|
}
|
|
@@ -832,9 +829,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
832
829
|
0)}px)`
|
|
833
830
|
: ''}"
|
|
834
831
|
>
|
|
835
|
-
<div
|
|
836
|
-
style="display: flex; align-items: center; height: 100%;"
|
|
837
|
-
>
|
|
832
|
+
<div class="header">
|
|
838
833
|
<div
|
|
839
834
|
class="column-header"
|
|
840
835
|
@click=${header.column.getToggleSortingHandler()}
|
|
@@ -861,19 +856,29 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
861
856
|
? html `<slot
|
|
862
857
|
name="iconSortUp"
|
|
863
858
|
><lit-icon
|
|
859
|
+
@click=${header.column.getToggleSortingHandler()}
|
|
864
860
|
size="0.75rem"
|
|
865
861
|
icon="chevronUpFilled"
|
|
866
862
|
></lit-icon
|
|
867
863
|
></slot>`
|
|
868
|
-
: html `<
|
|
864
|
+
: html `<slot
|
|
869
865
|
name="iconSortDown"
|
|
870
866
|
>
|
|
871
867
|
<lit-icon
|
|
868
|
+
@click=${header.column.getToggleSortingHandler()}
|
|
872
869
|
size="0.75rem"
|
|
873
870
|
icon="chevronDownFilled"
|
|
874
871
|
></lit-icon>
|
|
875
|
-
</
|
|
876
|
-
: html `<div
|
|
872
|
+
</slot>`
|
|
873
|
+
: html `<div
|
|
874
|
+
class="sortFilled"
|
|
875
|
+
>
|
|
876
|
+
<lit-icon
|
|
877
|
+
@click=${header.column.getToggleSortingHandler()}
|
|
878
|
+
size="0.75rem"
|
|
879
|
+
icon="sortFilled"
|
|
880
|
+
></lit-icon>
|
|
881
|
+
</div>`}
|
|
877
882
|
<div class="flex">
|
|
878
883
|
${!this
|
|
879
884
|
.actionButtonsInMenu
|
|
@@ -933,6 +938,8 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
933
938
|
? html `
|
|
934
939
|
<div>
|
|
935
940
|
<filter-inputs
|
|
941
|
+
.minFilterCharacters=${this
|
|
942
|
+
.minFilterCharacters}
|
|
936
943
|
.column=${header.column}
|
|
937
944
|
.dateFormat=${this
|
|
938
945
|
.dateFormat}
|
|
@@ -1014,11 +1021,13 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
1014
1021
|
? html `
|
|
1015
1022
|
<tr
|
|
1016
1023
|
class="${this.selectedRowId === row.id ||
|
|
1017
|
-
this.
|
|
1024
|
+
this.rowSelected[row.id]
|
|
1018
1025
|
? 'selected body'
|
|
1019
1026
|
: 'body'}"
|
|
1020
1027
|
data-index="${item.index}"
|
|
1021
|
-
@click="${
|
|
1028
|
+
@click="${row.getIsGrouped()
|
|
1029
|
+
? row.getToggleExpandedHandler()
|
|
1030
|
+
: () => this.handleRowClick(row)}"
|
|
1022
1031
|
@dblclick="${() => this.handleRowDoubleClick(row)}"
|
|
1023
1032
|
style="${styleMap(rowStyle)}"
|
|
1024
1033
|
${ref((node) => {
|
|
@@ -1057,40 +1066,33 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
1057
1066
|
return html `
|
|
1058
1067
|
<td style="${styleMap(style)}">
|
|
1059
1068
|
${cell.getIsGrouped()
|
|
1060
|
-
? html
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
.subRows
|
|
1067
|
-
.length}"
|
|
1068
|
-
label="${flexRender(cell
|
|
1069
|
-
.column
|
|
1070
|
-
.columnDef
|
|
1071
|
-
.cell, cell.getContext())}"
|
|
1069
|
+
? html `<div
|
|
1070
|
+
class="grouped-column"
|
|
1071
|
+
>
|
|
1072
|
+
<lit-icon
|
|
1073
|
+
class="grouped-column--icon-button"
|
|
1074
|
+
size="1.25rem"
|
|
1072
1075
|
icon="${row.getIsExpanded()
|
|
1073
1076
|
? 'chevronDownFilled'
|
|
1074
1077
|
: 'chevron'}"
|
|
1078
|
+
></lit-icon>
|
|
1079
|
+
<div
|
|
1080
|
+
class="grouped-column--label"
|
|
1075
1081
|
>
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
.length}
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
.columnDef
|
|
1091
|
-
.cell, cell.getContext())}
|
|
1092
|
-
</lit-button>
|
|
1093
|
-
`
|
|
1082
|
+
<lit-overflow-tooltip
|
|
1083
|
+
label=${cell.getValue()}
|
|
1084
|
+
>
|
|
1085
|
+
${cell.getValue()}
|
|
1086
|
+
</lit-overflow-tooltip>
|
|
1087
|
+
</div>
|
|
1088
|
+
<lit-pill
|
|
1089
|
+
class="grouped-column--pill"
|
|
1090
|
+
style="margin-left: 0.5rem"
|
|
1091
|
+
count="${row
|
|
1092
|
+
.subRows
|
|
1093
|
+
.length}"
|
|
1094
|
+
></lit-pill>
|
|
1095
|
+
</div> `
|
|
1094
1096
|
: cell.getIsAggregated()
|
|
1095
1097
|
? html `
|
|
1096
1098
|
<div
|
|
@@ -1110,10 +1112,7 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
1110
1112
|
? null
|
|
1111
1113
|
: html `<lit-overflow-tooltip
|
|
1112
1114
|
placement="right"
|
|
1113
|
-
label=${
|
|
1114
|
-
.column
|
|
1115
|
-
.columnDef
|
|
1116
|
-
.cell, cell.getContext())}
|
|
1115
|
+
label=${cell.getValue()}
|
|
1117
1116
|
>${flexRender(cell
|
|
1118
1117
|
.column
|
|
1119
1118
|
.columnDef
|
|
@@ -1143,13 +1142,15 @@ let LitDataGridTanstack = class LitDataGridTanstack extends LitElement {
|
|
|
1143
1142
|
${this.server
|
|
1144
1143
|
? this.totalNumberRows
|
|
1145
1144
|
? this.totalNumberRows
|
|
1146
|
-
:
|
|
1147
|
-
icon="reload"
|
|
1148
|
-
size="small"
|
|
1149
|
-
variant="text"
|
|
1150
|
-
@click="${() => this.handleGetTotalNumber()}"
|
|
1151
|
-
></lit-icon-button>`
|
|
1145
|
+
: '?'
|
|
1152
1146
|
: this.table.getRowModel().rows.length}
|
|
1147
|
+
${this.server &&
|
|
1148
|
+
html `<lit-icon-button
|
|
1149
|
+
icon="reload"
|
|
1150
|
+
size="small"
|
|
1151
|
+
variant="text"
|
|
1152
|
+
@click="${() => this.handleGetTotalNumber()}"
|
|
1153
|
+
></lit-icon-button>`}
|
|
1153
1154
|
</div>
|
|
1154
1155
|
<div class="right-actions">
|
|
1155
1156
|
<lit-data-grid-density-popover
|
|
@@ -1288,6 +1289,8 @@ LitDataGridTanstack.styles = [
|
|
|
1288
1289
|
font-weight: 500;
|
|
1289
1290
|
font-size: 12px;
|
|
1290
1291
|
color: var(--text-primary, #111827);
|
|
1292
|
+
display: flex;
|
|
1293
|
+
align-items: center;
|
|
1291
1294
|
}
|
|
1292
1295
|
|
|
1293
1296
|
.column-header {
|
|
@@ -1411,6 +1414,40 @@ LitDataGridTanstack.styles = [
|
|
|
1411
1414
|
.selected {
|
|
1412
1415
|
background-color: var(--color-primary-light, #f0fadf);
|
|
1413
1416
|
}
|
|
1417
|
+
|
|
1418
|
+
.sortFilled {
|
|
1419
|
+
visibility: hidden;
|
|
1420
|
+
}
|
|
1421
|
+
.header {
|
|
1422
|
+
display: flex;
|
|
1423
|
+
align-items: center;
|
|
1424
|
+
height: 100%;
|
|
1425
|
+
}
|
|
1426
|
+
.header:hover .sortFilled {
|
|
1427
|
+
visibility: visible;
|
|
1428
|
+
}
|
|
1429
|
+
.grouped-column {
|
|
1430
|
+
display: flex;
|
|
1431
|
+
align-items: center;
|
|
1432
|
+
justify-content: space-between;
|
|
1433
|
+
width: 100%;
|
|
1434
|
+
gap: 0.25rem;
|
|
1435
|
+
}
|
|
1436
|
+
.grouped-column--icon-button {
|
|
1437
|
+
display: flex;
|
|
1438
|
+
align-items: center;
|
|
1439
|
+
position: relative;
|
|
1440
|
+
top: -1.5px;
|
|
1441
|
+
}
|
|
1442
|
+
.grouped-column--label {
|
|
1443
|
+
display: flex;
|
|
1444
|
+
align-items: center;
|
|
1445
|
+
overflow: hidden;
|
|
1446
|
+
flex-grow: 1;
|
|
1447
|
+
}
|
|
1448
|
+
.grouped-column--pill {
|
|
1449
|
+
margin-left: 0.5rem;
|
|
1450
|
+
}
|
|
1414
1451
|
`,
|
|
1415
1452
|
];
|
|
1416
1453
|
__decorate([
|
|
@@ -1542,6 +1579,18 @@ __decorate([
|
|
|
1542
1579
|
__decorate([
|
|
1543
1580
|
property({ type: Number })
|
|
1544
1581
|
], LitDataGridTanstack.prototype, "totalNumberRows", void 0);
|
|
1582
|
+
__decorate([
|
|
1583
|
+
property({ type: Number })
|
|
1584
|
+
], LitDataGridTanstack.prototype, "minFilterCharacters", void 0);
|
|
1585
|
+
__decorate([
|
|
1586
|
+
property({ type: Boolean })
|
|
1587
|
+
], LitDataGridTanstack.prototype, "localizeDate", void 0);
|
|
1588
|
+
__decorate([
|
|
1589
|
+
property({ type: Boolean })
|
|
1590
|
+
], LitDataGridTanstack.prototype, "rowSelected", void 0);
|
|
1591
|
+
__decorate([
|
|
1592
|
+
property({ type: Function })
|
|
1593
|
+
], LitDataGridTanstack.prototype, "getRowId", void 0);
|
|
1545
1594
|
__decorate([
|
|
1546
1595
|
state()
|
|
1547
1596
|
], LitDataGridTanstack.prototype, "rowsCount", void 0);
|
|
@@ -1569,12 +1618,6 @@ __decorate([
|
|
|
1569
1618
|
__decorate([
|
|
1570
1619
|
state()
|
|
1571
1620
|
], LitDataGridTanstack.prototype, "rowHeight", void 0);
|
|
1572
|
-
__decorate([
|
|
1573
|
-
state()
|
|
1574
|
-
], LitDataGridTanstack.prototype, "_rowSelection", void 0);
|
|
1575
|
-
__decorate([
|
|
1576
|
-
state()
|
|
1577
|
-
], LitDataGridTanstack.prototype, "_columnSizing", void 0);
|
|
1578
1621
|
LitDataGridTanstack = __decorate([
|
|
1579
1622
|
customElement('lit-data-grid-tanstack')
|
|
1580
1623
|
], LitDataGridTanstack);
|