@dataloop-ai/components 0.19.13 → 0.19.14

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/basic/DlKpi/DlKpi.vue +15 -7
  3. package/src/components/basic/DlKpi/types/KpiItem.ts +2 -1
  4. package/src/components/compound/DlTable/DlTable.vue +131 -136
  5. package/src/components/compound/DlTable/components/DlTh.vue +25 -6
  6. package/src/components/compound/DlTable/styles/dl-table-styles.scss +19 -8
  7. package/src/demos/DlKpiDemo.vue +5 -7
  8. package/src/demos/DlTableDemo.vue +39 -2
  9. package/src/hooks/use-suggestions.ts +11 -8
  10. package/src/utils/formatNumber.ts +2 -2
  11. package/src/utils/table-columns.ts +12 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.13",
3
+ "version": "0.19.14",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
package/src/components/basic/DlKpi/DlKpi.vue CHANGED
@@ -5,9 +5,7 @@
5
5
  >
6
6
  <div class="kpi_box__counter">
7
7
  <dl-typography
8
- :color="
9
- counter.value ? 'dl-color-secondary' : 'dl-color-medium'
10
- "
8
+ :color="hasValue ? 'dl-color-secondary' : 'dl-color-medium'"
11
9
  variant="h1"
12
10
  :size="counterFontSizeComputed"
13
11
  >
@@ -75,7 +73,7 @@ export default defineComponent({
75
73
  },
76
74
  props: {
77
75
  counter: {
78
- type: Object as PropType<DlKpiCounterType>,
76
+ type: Object as PropType<DlKpiCounterType | number>,
79
77
  default: () => ({} as DlKpiCounterType)
80
78
  },
81
79
  counterFontSize: {
@@ -104,7 +102,7 @@ export default defineComponent({
104
102
  },
105
103
  infoMessage: {
106
104
  type: String,
107
- default: 'No data',
105
+ default: null,
108
106
  required: false
109
107
  },
110
108
  progress: {
@@ -136,7 +134,9 @@ export default defineComponent({
136
134
 
137
135
  const cssVars = computed(() => {
138
136
  return {
139
- '--dl-kpi-border': props.bordered ? '1px solid #e4e4e4' : '',
137
+ '--dl-kpi-border': props.bordered
138
+ ? '1px solid var(--dl-color-separator)'
139
+ : '',
140
140
  '--dl-kpi-title-max-width': isSingleWord(props.title)
141
141
  ? '100%'
142
142
  : '90%', // todo: caused a bug with single words
@@ -146,6 +146,13 @@ export default defineComponent({
146
146
  }
147
147
  })
148
148
 
149
+ const hasValue = computed(() => {
150
+ if (typeof props.counter === 'number') {
151
+ return true
152
+ }
153
+ return !!(props.counter as DlKpiCounterType).value
154
+ })
155
+
149
156
  const counterFontSizeComputed = computed(() =>
150
157
  props.small ? '20px' : props.counterFontSize
151
158
  )
@@ -153,7 +160,7 @@ export default defineComponent({
153
160
  props.small ? '14px' : props.titleFontSize
154
161
  )
155
162
 
156
- const formatCounter = (counter: DlKpiCounterType) => {
163
+ const formatCounter = (counter: DlKpiCounterType | number) => {
157
164
  if (counter === null) {
158
165
  return emptyString
159
166
  }
@@ -214,6 +221,7 @@ export default defineComponent({
214
221
  return {
215
222
  progressValue,
216
223
  formatCounter,
224
+ hasValue,
217
225
  cssVars,
218
226
  titleFontSizeComputed,
219
227
  counterFontSizeComputed
package/src/components/basic/DlKpi/types/KpiItem.ts CHANGED
@@ -12,7 +12,8 @@ export enum DlKpiCounterFormat {
12
12
  export type DlKpiCounterType = {
13
13
  /* for string it should be have 0h:0m:0s format */
14
14
  value: number | string
15
- format: DlKpiCounterFormat
15
+ format?: DlKpiCounterFormat
16
+ unit?: string
16
17
  }
17
18
 
18
19
  export type DlKpiProgressType = {
package/src/components/compound/DlTable/DlTable.vue CHANGED
@@ -62,7 +62,7 @@
62
62
  type="__dltable"
63
63
  :class="tableClass"
64
64
  :style="tableStyle"
65
- :table-colspan="computedColspan"
65
+ :table-colspan="colspanWithActionsRow"
66
66
  :scroll-target="virtualScrollTarget"
67
67
  :items="computedRows"
68
68
  :scroll-debounce="scrollDebounce"
@@ -133,32 +133,17 @@
133
133
  :props="getHeaderScope({ col })"
134
134
  :col-index="colIndex"
135
135
  >
136
- <div
137
- style="
138
- width: 100%;
139
- display: flex;
140
- align-items: center;
141
- gap: 2px;
142
- "
143
- >
136
+ <span class="inner-th">
144
137
  {{ col.label }}
145
- <dl-icon
146
- v-if="col.hint"
147
- icon="icon-dl-info"
148
- size="10px"
149
- >
150
- <dl-tooltip>
151
- {{ col.hint }}
152
- </dl-tooltip>
153
- </dl-icon>
154
- </div>
138
+ </span>
155
139
  </DlTh>
156
140
  </slot>
157
141
 
158
142
  <DlTh
159
- v-if="visibleColumns && visibleColumns.length"
143
+ v-if="showRowActions"
160
144
  key="visibleColumnsSlot"
161
145
  :col-index="-1"
146
+ no-tooltip
162
147
  >
163
148
  <slot
164
149
  name="header-cell-visible-columns-button"
@@ -168,56 +153,67 @@
168
153
  handleVisibleColumnsUpdate
169
154
  "
170
155
  >
171
- <dl-button
172
- text-color="dl-color-medium"
173
- flat
174
- icon="icon-dl-column"
175
- tooltip="Manage columns"
156
+ <div
157
+ v-if="
158
+ visibleColumns &&
159
+ visibleColumns.length
160
+ "
161
+ class="visible-columns-justify-end"
162
+ style="width: 100%; display: flex"
176
163
  >
177
- <slot
178
- name="header-cell-visible-columns-menu"
179
- :visible-columns-state="
180
- visibleColumnsState
181
- "
182
- :group-options="groupOptions"
183
- :handle-visible-columns-update="
184
- handleVisibleColumnsUpdate
185
- "
164
+ <dl-button
165
+ text-color="dl-color-medium"
166
+ flat
167
+ icon="icon-dl-column"
168
+ tooltip="Manage columns"
186
169
  >
187
- <dl-menu>
188
- <slot
189
- name="header-cell-visible-columns-menu-content"
190
- :visible-columns-state="
191
- visibleColumnsState
192
- "
193
- :group-options="
194
- groupOptions
195
- "
196
- :handle-visible-columns-update="
197
- handleVisibleColumnsUpdate
198
- "
199
- >
200
- <dl-list separator>
201
- <dl-option-group
202
- :model-value="
203
- computedVisibleCols
204
- "
205
- :options="
206
- groupOptions
207
- "
208
- :left-label="true"
209
- max-width="250px"
210
- type="switch"
211
- class="table-options"
212
- @update:model-value="
213
- handleVisibleColumnsUpdate
214
- "
215
- />
216
- </dl-list>
217
- </slot>
218
- </dl-menu>
219
- </slot>
220
- </dl-button>
170
+ <slot
171
+ name="header-cell-visible-columns-menu"
172
+ :visible-columns-state="
173
+ visibleColumnsState
174
+ "
175
+ :group-options="groupOptions"
176
+ :handle-visible-columns-update="
177
+ handleVisibleColumnsUpdate
178
+ "
179
+ >
180
+ <dl-menu>
181
+ <slot
182
+ name="header-cell-visible-columns-menu-content"
183
+ :visible-columns-state="
184
+ visibleColumnsState
185
+ "
186
+ :group-options="
187
+ groupOptions
188
+ "
189
+ :handle-visible-columns-update="
190
+ handleVisibleColumnsUpdate
191
+ "
192
+ >
193
+ <dl-list separator>
194
+ <dl-option-group
195
+ :model-value="
196
+ computedVisibleCols
197
+ "
198
+ :options="
199
+ groupOptions
200
+ "
201
+ :left-label="
202
+ true
203
+ "
204
+ max-width="250px"
205
+ type="switch"
206
+ class="table-options"
207
+ @update:model-value="
208
+ handleVisibleColumnsUpdate
209
+ "
210
+ />
211
+ </dl-list>
212
+ </slot>
213
+ </dl-menu>
214
+ </slot>
215
+ </dl-button>
216
+ </div>
221
217
  </slot>
222
218
  </DlTh>
223
219
  </DlTr>
@@ -227,7 +223,7 @@
227
223
  class="dl-table__progress"
228
224
  >
229
225
  <th
230
- :colspan="computedColspan"
226
+ :colspan="colspanWithActionsRow"
231
227
  class="relative-position"
232
228
  >
233
229
  <dl-progress-bar
@@ -487,92 +483,86 @@
487
483
  :col-index="colIndex"
488
484
  @click="onThClick($event, col.name)"
489
485
  >
490
- <div
491
- style="
492
- width: 100%;
493
- display: flex;
494
- align-items: center;
495
- gap: 2px;
496
- "
497
- >
486
+ <span class="inner-th">
498
487
  {{ col.label }}
499
- <dl-icon
500
- v-if="col.hint"
501
- icon="icon-dl-info"
502
- size="10px"
503
- >
504
- <dl-tooltip>
505
- {{ col.hint }}
506
- </dl-tooltip>
507
- </dl-icon>
508
- </div>
488
+ </span>
509
489
  </DlTh>
510
490
  </slot>
511
491
  <DlTh
512
492
  v-if="showRowActions"
513
493
  key="visibleColumnsSlot"
494
+ :col-index="-1"
495
+ no-tooltip
514
496
  >
515
497
  <slot
516
498
  name="header-cell-visible-columns-button"
517
- :computed-visible-cols="computedVisibleCols"
499
+ :visible-columns-state="visibleColumnsState"
518
500
  :group-options="groupOptions"
519
501
  :handle-visible-columns-update="
520
502
  handleVisibleColumnsUpdate
521
503
  "
522
504
  >
523
- <dl-button
505
+ <div
524
506
  v-if="
525
507
  visibleColumns &&
526
508
  visibleColumns.length
527
509
  "
528
- text-color="dl-color-medium"
529
- flat
530
- icon="icon-dl-column"
510
+ class="visible-columns-justify-end"
511
+ style="width: 100%; display: flex"
531
512
  >
532
- <slot
533
- name="header-cell-visible-columns-menu"
534
- :computed-visible-cols="
535
- computedVisibleCols
536
- "
537
- :group-options="groupOptions"
538
- :handle-visible-columns-update="
539
- handleVisibleColumnsUpdate
540
- "
513
+ <dl-button
514
+ text-color="dl-color-medium"
515
+ flat
516
+ icon="icon-dl-column"
517
+ tooltip="Manage columns"
541
518
  >
542
- <dl-menu>
543
- <slot
544
- name="header-cell-visible-columns-menu-content"
545
- :computed-visible-cols="
546
- computedVisibleCols
547
- "
548
- :group-options="
549
- groupOptions
550
- "
551
- :handle-visible-columns-update="
552
- handleVisibleColumnsUpdate
553
- "
554
- >
555
- <dl-list separator>
556
- <dl-option-group
557
- :model-value="
558
- computedVisibleCols
559
- "
560
- :options="
561
- groupOptions
562
- "
563
- :left-label="true"
564
- max-width="250px"
565
- type="switch"
566
- class="table-options"
567
- @update:model-value="
568
- handleVisibleColumnsUpdate
569
- "
570
- />
571
- </dl-list>
572
- </slot>
573
- </dl-menu>
574
- </slot>
575
- </dl-button>
519
+ <slot
520
+ name="header-cell-visible-columns-menu"
521
+ :visible-columns-state="
522
+ visibleColumnsState
523
+ "
524
+ :group-options="groupOptions"
525
+ :handle-visible-columns-update="
526
+ handleVisibleColumnsUpdate
527
+ "
528
+ >
529
+ <dl-menu>
530
+ <slot
531
+ name="header-cell-visible-columns-menu-content"
532
+ :visible-columns-state="
533
+ visibleColumnsState
534
+ "
535
+ :group-options="
536
+ groupOptions
537
+ "
538
+ :handle-visible-columns-update="
539
+ handleVisibleColumnsUpdate
540
+ "
541
+ >
542
+ <dl-list separator>
543
+ <dl-option-group
544
+ :model-value="
545
+ computedVisibleCols
546
+ "
547
+ :options="
548
+ groupOptions
549
+ "
550
+ :left-label="
551
+ true
552
+ "
553
+ max-width="250px"
554
+ type="switch"
555
+ class="table-options"
556
+ @update:model-value="
557
+ handleVisibleColumnsUpdate
558
+ "
559
+ />
560
+ </dl-list>
561
+ </slot>
562
+ </dl-menu>
563
+ </slot>
564
+ </dl-button>
565
+ </div>
576
566
  </slot>
577
567
  </DlTh>
578
568
  </DlTr>
@@ -582,7 +572,7 @@
582
572
  class="dl-table__progress"
583
573
  >
584
574
  <th
585
- :colspan="computedColspan"
575
+ :colspan="colspanWithActionsRow"
586
576
  class="relative-position"
587
577
  >
588
578
  <dl-progress-bar
@@ -1552,6 +1542,10 @@ export default defineComponent({
1552
1542
  visibleColumnsState
1553
1543
  )
1554
1544
 
1545
+ const colspanWithActionsRow = computed(() => {
1546
+ return computedColspan.value + (showRowActions.value ? 1 : 0)
1547
+ })
1548
+
1555
1549
  const { columnToSort, computedSortMethod, sort } = useTableSort(
1556
1550
  props as unknown as DlTableProps,
1557
1551
  computedPagination,
@@ -1880,6 +1874,7 @@ export default defineComponent({
1880
1874
  computedRows,
1881
1875
  computedCols,
1882
1876
  computedColspan,
1877
+ colspanWithActionsRow,
1883
1878
  getRowKey,
1884
1879
  additionalClasses,
1885
1880
  getHeaderScope,
package/src/components/compound/DlTable/components/DlTh.vue CHANGED
@@ -15,11 +15,24 @@
15
15
  <slot />
16
16
  </dl-tooltip>
17
17
  <slot />
18
- <dl-icon
19
- v-if="isSortable && ['left', 'center'].includes(align)"
20
- :class="iconClass"
21
- icon="icon-dl-arrow-up"
22
- />
18
+ <span class="th-icons">
19
+ <dl-icon
20
+ v-if="hasHint"
21
+ icon="icon-dl-info"
22
+ size="10px"
23
+ style="max-width: 30%"
24
+ >
25
+ <dl-tooltip>
26
+ {{ props.col.hint }}
27
+ </dl-tooltip>
28
+ </dl-icon>
29
+ <dl-icon
30
+ v-if="isSortable && ['left', 'center'].includes(align)"
31
+ style="margin-top: 2px"
32
+ :class="iconClass"
33
+ icon="icon-dl-arrow-up"
34
+ />
35
+ </span>
23
36
  </th>
24
37
  </template>
25
38
 
@@ -67,6 +80,10 @@ export default defineComponent({
67
80
  return !!Object.keys(props.props ?? {})
68
81
  })
69
82
 
83
+ const hasHint = computed(() => {
84
+ return !!props.props?.col?.hint
85
+ })
86
+
70
87
  const column = computed(() => {
71
88
  let col: any
72
89
  const name = vm.vnode.key as string
@@ -89,7 +106,8 @@ export default defineComponent({
89
106
  thClasses: '',
90
107
  isSortable: false,
91
108
  hasEllipsis: false,
92
- onClick: onClickFn
109
+ onClick: onClickFn,
110
+ hasHint
93
111
  }
94
112
  }
95
113
 
@@ -118,6 +136,7 @@ export default defineComponent({
118
136
  const onClick = !hasOptionalProps.value ? onClickFn : handleClick
119
137
 
120
138
  return {
139
+ hasHint,
121
140
  isSortable: !hasOptionalProps.value
122
141
  ? false
123
142
  : column?.value?.sortable ?? false,
package/src/components/compound/DlTable/styles/dl-table-styles.scss CHANGED
@@ -8,6 +8,21 @@
8
8
  border-right: 1px solid var(--dl-color-medium);
9
9
  }
10
10
 
11
+ .inner-th {
12
+ max-width: 70%;
13
+ display: inline-block;
14
+ overflow: hidden;
15
+ margin-right: 5px;
16
+ position: relative;
17
+ }
18
+ .th-icons {
19
+ display: flex;
20
+ align-items: center;
21
+ top: 10px;
22
+ right: 0;
23
+ position: absolute;
24
+ }
25
+
11
26
  width: 100%;
12
27
  max-width: 100%;
13
28
  border-collapse: separate;
@@ -50,14 +65,6 @@
50
65
  top: 0;
51
66
  }
52
67
 
53
- /* this is when the loading indicator appears */
54
- &--loading {
55
- thead tr:last-child th {
56
- /* height of all previous header rows */
57
- top: 38px;
58
- }
59
- }
60
-
61
68
  .trigger-icon {
62
69
  margin-right: 5px;
63
70
  }
@@ -510,3 +517,7 @@
510
517
  border-bottom: 1px solid var(--dl-color-separator);
511
518
  }
512
519
  }
520
+
521
+ .visible-columns-justify-end {
522
+ justify-content: end;
523
+ }
package/src/demos/DlKpiDemo.vue CHANGED
@@ -11,8 +11,7 @@
11
11
  :title="kpi.title"
12
12
  :info-message="kpi.infoMessage"
13
13
  :progress="kpi.progress"
14
- :with-border="true"
15
- :with-progress-bar="true"
14
+ :bordered="true"
16
15
  />
17
16
  </div>
18
17
  </div>
@@ -27,7 +26,7 @@
27
26
  :title="kpiThree.title"
28
27
  :info-message="kpiThree.infoMessage"
29
28
  :progress="kpiThree.progress"
30
- :with-border="true"
29
+ :bordered="true"
31
30
  />
32
31
  </div>
33
32
  </div>
@@ -42,7 +41,7 @@
42
41
  :title="kpiFour.title"
43
42
  :info-message="kpiFour.infoMessage"
44
43
  :progress="kpiFour.progress"
45
- :with-border="true"
44
+ :bordered="true"
46
45
  />
47
46
  </div>
48
47
  </div>
@@ -57,7 +56,7 @@
57
56
  :title="kpiFive.title"
58
57
  :info-message="kpiFive.infoMessage"
59
58
  :progress="kpiFive.progress"
60
- :is-small="true"
59
+ :small="true"
61
60
  />
62
61
  </div>
63
62
  </div>
@@ -73,8 +72,7 @@
73
72
  :title="kpiSix.title"
74
73
  :info-message="kpiSix.infoMessage"
75
74
  :progress="kpiSix.progress"
76
- :with-border="false"
77
- :with-progress-bar="true"
75
+ :bordered="false"
78
76
  />
79
77
  </div>
80
78
  </div>
package/src/demos/DlTableDemo.vue CHANGED
@@ -150,6 +150,38 @@
150
150
  </DlTable>
151
151
  </div>
152
152
 
153
+ <div style="margin-top: 100px">
154
+ Loading WIth custom row
155
+ <DlTable
156
+ :selected="selected"
157
+ :separator="separator"
158
+ :columns="tableColumns"
159
+ :bordered="bordered"
160
+ :dense="dense"
161
+ class="sticky-header"
162
+ :filter="filter"
163
+ :selection="selection"
164
+ :loading="true"
165
+ :rows="tableRows"
166
+ :resizable="resizable"
167
+ row-key="id"
168
+ color="dl-color-secondary"
169
+ title="Table Title"
170
+ :virtual-scroll="vScroll"
171
+ style="height: 500px"
172
+ :rows-per-page-options="rowsPerPageOptions"
173
+ @row-click="log"
174
+ @th-click="log"
175
+ @update:selected="updateSeleted"
176
+ >
177
+ <template #row-body="props">
178
+ <div style="width: 300px">
179
+ Custom row: {{ props.row.name }}
180
+ </div>
181
+ </template>
182
+ </DlTable>
183
+ </div>
184
+
153
185
  <div style="margin-top: 100px">
154
186
  <DlTable
155
187
  :selected="selected"
@@ -379,7 +411,10 @@
379
411
  :rows="tableRows"
380
412
  :columns="tableColumns"
381
413
  title="Editable Columns"
382
- :visible-columns="tableColumns.slice(0, -1)"
414
+ :visible-columns="
415
+ tableColumns.slice(0, -1).map((c) => c.name)
416
+ "
417
+ loading
383
418
  >
384
419
  <template #body-cell-row-actions>
385
420
  <dl-button label="ActionButton" />
@@ -391,7 +426,9 @@
391
426
  <DlTable
392
427
  :rows="tableRows"
393
428
  :columns="tableColumns"
394
- :visible-columns="tableColumns.slice(0, -1)"
429
+ :visible-columns="
430
+ tableColumns.slice(0, -1).map((c) => c.name)
431
+ "
395
432
  virtual-scroll
396
433
  />
397
434
  </div>
package/src/hooks/use-suggestions.ts CHANGED
@@ -122,15 +122,18 @@ export const useSuggestions = (
122
122
  options: { strict?: Ref<boolean> } = {}
123
123
  ) => {
124
124
  const { strict } = options
125
- const initialSuggestions = Object.keys(schema)
126
- const aliasedKeys = aliases.value.map((alias) => alias.key)
125
+ const aliasesArray = aliases.value ?? []
126
+ const schemaValue = schema.value ?? {}
127
+
128
+ const initialSuggestions = Object.keys(schemaValue)
129
+ const aliasedKeys = aliasesArray.map((alias) => alias.key)
127
130
  const aliasedSuggestions = initialSuggestions.map((suggestion) =>
128
131
  aliasedKeys.includes(suggestion)
129
- ? aliases.value.find((alias) => alias.key === suggestion)?.alias
132
+ ? aliasesArray.find((alias) => alias.key === suggestion)?.alias
130
133
  : suggestion
131
134
  )
132
135
 
133
- for (const alias of aliases.value) {
136
+ for (const alias of aliasesArray) {
134
137
  if (aliasedSuggestions.includes(alias.alias)) {
135
138
  continue
136
139
  }
@@ -186,8 +189,8 @@ export const useSuggestions = (
186
189
  }
187
190
 
188
191
  const dataType = getDataType(
189
- schema.value,
190
- aliases.value,
192
+ schemaValue,
193
+ aliasesArray,
191
194
  matchedField
192
195
  )
193
196
  if (!dataType) {
@@ -211,7 +214,7 @@ export const useSuggestions = (
211
214
 
212
215
  if (!operator) {
213
216
  const dotSeparated = matchedField.split('.').filter((el) => el)
214
- let fieldOf = schema.value
217
+ let fieldOf = schemaValue
215
218
  for (const key of dotSeparated) {
216
219
  fieldOf = fieldOf[key] as Schema
217
220
  }
@@ -280,7 +283,7 @@ export const useSuggestions = (
280
283
  }
281
284
 
282
285
  error.value = input.length
283
- ? getError(schema.value, aliases.value, expressions, { strict })
286
+ ? getError(schemaValue, aliasesArray, expressions, { strict })
284
287
  : null
285
288
 
286
289
  suggestions.value = localSuggestions
package/src/utils/formatNumber.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  export function numberWithComma(nr: number) {
2
- if (!nr) return 0
2
+ if (!nr) return '0'
3
3
  return new Intl.NumberFormat('en-US', {
4
4
  style: 'decimal'
5
5
  }).format(nr)
6
6
  }
7
7
 
8
8
  export function abbreviateNumber(nr: number) {
9
- if (!nr) return 0
9
+ if (!nr) return '0'
10
10
  return new Intl.NumberFormat('en-US', {
11
11
  maximumFractionDigits: 1,
12
12
  notation: 'compact',
package/src/utils/table-columns.ts CHANGED
@@ -171,6 +171,16 @@ export function justifyMouseInsideTargetCell(
171
171
  )
172
172
  }
173
173
 
174
+ function fitWidthToContent(el: HTMLElement, colWidth: number) {
175
+ if (el.tagName !== 'TH') return colWidth
176
+ const textNode = Array.from(el.querySelector('.inner-th').childNodes).find(
177
+ (node) => node.nodeType === 3
178
+ )
179
+ const fontSize = parseInt(window.getComputedStyle(el).fontSize)
180
+ const width = (textNode.nodeValue.length * fontSize) / 2
181
+ return width > 100 ? width : 100
182
+ }
183
+
174
184
  export function setAllColumnWidths(
175
185
  table: HTMLElement,
176
186
  columns: DlTableColumn[],
@@ -186,7 +196,8 @@ export function setAllColumnWidths(
186
196
  (el.tagName === 'TH' || el.tagName === 'TD') &&
187
197
  parseInt(el.dataset.colIndex) === i,
188
198
  (targetEl) => {
189
- targetEl.style.width = `${col.width ?? DEFAULT_COL_WIDTH}px` // then
199
+ const width = fitWidthToContent(targetEl, col.width)
200
+ targetEl.style.width = `${width ?? DEFAULT_COL_WIDTH}px` // then
190
201
  }
191
202
  )
192
203
  })