compote-ui 0.43.8 → 0.43.10

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 (4) hide show
  1. package/dist/components/data-table-v8/data-table-head.svelte +2 -2
  2. package/dist/components/data-table-v8/data-table-virtualized.svelte +19 -35
  3. package/dist/components/data-table-v8/data-table.svelte +15 -36
  4. package/package.json +1 -1
package/dist/components/data-table-v8/data-table-head.svelte CHANGED
@@ -107,7 +107,7 @@
107
107
  class="sticky top-0 z-20 bg-surface-2 text-left text-ink-dim"
108
108
  style={isVirtual ? 'display: grid; position: sticky; top: 0; z-index: 20' : undefined}
109
109
  >
110
- {#each headerGroups as headerGroup, headerGroupIndex (headerGroup.id)}
110
+ {#each headerGroups as headerGroup, headerGroupIndex (`${headerGroup.id}:${headerGroup.headers.map((header) => `${header.id}:${header.colSpan}`).join('|')}`)}
111
111
  {@const visibleHeaders = headerGroup.headers.filter((header) => header.colSpan > 0)}
112
112
  <tr class="h-9" style={headerRowStyle()}>
113
113
  {#if isRowSelectionEnabled}
@@ -130,7 +130,7 @@
130
130
  {/if}
131
131
  </th>
132
132
  {/if}
133
- {#each visibleHeaders as header, headerIndex (header.id)}
133
+ {#each visibleHeaders as header, headerIndex (`${header.id}:${header.colSpan}:${header.column.getIsVisible()}`)}
134
134
  {@const columnDef = getColumnMeta(header.column.columnDef)}
135
135
  {@const sortDirection = getHeaderSortDirection(header)}
136
136
  <th
package/dist/components/data-table-v8/data-table-virtualized.svelte CHANGED
@@ -40,16 +40,18 @@
40
40
  });
41
41
  const headerGroups = $derived.by(() => {
42
42
  const { columnVisibility } = getReactiveTableState(table);
43
- return table.getHeaderGroups().map((group) => ({
44
- ...group,
45
- headers: group.headers.filter(
46
- (header) => header.colSpan > 0 && columnVisibility[header.column.id] !== false
47
- )
48
- }));
43
+ void columnVisibility;
44
+ return table.getHeaderGroups();
49
45
  });
50
46
  const isRowSelectionEnabled = $derived(Boolean(table.options.enableRowSelection));
51
47
  const isMultiRowSelectionEnabled = $derived(table.options.enableMultiRowSelection !== false);
52
48
  const headerGroupCount = $derived(headerGroups.length);
49
+ const visibleColumnIds = $derived(
50
+ table
51
+ .getVisibleLeafColumns()
52
+ .map((column) => column.id)
53
+ .join('|')
54
+ );
53
55
  const allRowsSelectionState = $derived.by(() => {
54
56
  getReactiveTableState(table);
55
57
  return getAllRowsSelectionState(table);
@@ -59,26 +61,6 @@
59
61
  return getSelectedRowCount(table);
60
62
  });
61
63
  const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
62
-
63
- $effect(() => {
64
- console.log('VIRTUAL DATA TABLE DEBUG', {
65
- columnVisibility: { ...tableState.columnVisibility },
66
- visibleLeafColumns: table.getVisibleLeafColumns().map((column) => column.id),
67
- allLeafColumns: table.getAllLeafColumns().map((column) => ({
68
- id: column.id,
69
- isVisible: column.getIsVisible()
70
- })),
71
- headerGroups: table.getHeaderGroups().map((group) => ({
72
- id: group.id,
73
- headers: group.headers.map((header) => ({
74
- id: header.id,
75
- columnId: header.column.id,
76
- colSpan: header.colSpan,
77
- isPlaceholder: header.isPlaceholder
78
- }))
79
- }))
80
- });
81
- });
82
64
  </script>
83
65
 
84
66
  <div
@@ -100,15 +82,17 @@
100
82
  {#if caption}
101
83
  <caption class="sr-only">{caption}</caption>
102
84
  {/if}
103
- <DataTableHead
104
- {table}
105
- {headerGroups}
106
- {headerGroupCount}
107
- {isRowSelectionEnabled}
108
- {isMultiRowSelectionEnabled}
109
- {allRowsSelectionState}
110
- isVirtual
111
- />
85
+ {#key visibleColumnIds}
86
+ <DataTableHead
87
+ {table}
88
+ {headerGroups}
89
+ {headerGroupCount}
90
+ {isRowSelectionEnabled}
91
+ {isMultiRowSelectionEnabled}
92
+ {allRowsSelectionState}
93
+ isVirtual
94
+ />
95
+ {/key}
112
96
  {#if scrollContainerRef}
113
97
  <DataTableVirtualRows
114
98
  rows={rowModel.rows}
package/dist/components/data-table-v8/data-table.svelte CHANGED
@@ -49,12 +49,8 @@
49
49
  });
50
50
  const headerGroups = $derived.by(() => {
51
51
  const { columnVisibility } = getReactiveTableState(table);
52
- return table.getHeaderGroups().map((group) => ({
53
- ...group,
54
- headers: group.headers.filter(
55
- (header) => header.colSpan > 0 && columnVisibility[header.column.id] !== false
56
- )
57
- }));
52
+ void columnVisibility;
53
+ return table.getHeaderGroups();
58
54
  });
59
55
  const visibleLeafColumns = $derived.by(() => {
60
56
  const { columnVisibility } = getReactiveTableState(table);
@@ -69,6 +65,7 @@
69
65
  const tableColumnCount = $derived(visibleColumnCount + (isRowSelectionEnabled ? 1 : 0));
70
66
  const renderedColumnCount = $derived(tableColumnCount + 1);
71
67
  const headerGroupCount = $derived(headerGroups.length);
68
+ const visibleColumnIds = $derived(visibleLeafColumns.map((column) => column.id).join('|'));
72
69
  const allRowsSelectionState = $derived.by(() => {
73
70
  getReactiveTableState(table);
74
71
  return getAllRowsSelectionState(table);
@@ -78,26 +75,6 @@
78
75
  return getSelectedRowCount(table);
79
76
  });
80
77
  const isColumnResizing = $derived(tableState.columnSizingInfo.isResizingColumn !== false);
81
-
82
- $effect(() => {
83
- console.log('DATA TABLE DEBUG', {
84
- columnVisibility: { ...tableState.columnVisibility },
85
- visibleLeafColumns: table.getVisibleLeafColumns().map((column) => column.id),
86
- allLeafColumns: table.getAllLeafColumns().map((column) => ({
87
- id: column.id,
88
- isVisible: column.getIsVisible()
89
- })),
90
- headerGroups: table.getHeaderGroups().map((group) => ({
91
- id: group.id,
92
- headers: group.headers.map((header) => ({
93
- id: header.id,
94
- columnId: header.column.id,
95
- colSpan: header.colSpan,
96
- isPlaceholder: header.isPlaceholder
97
- }))
98
- }))
99
- });
100
- });
101
78
  </script>
102
79
 
103
80
  <div
@@ -134,17 +111,19 @@
134
111
  {#if caption}
135
112
  <caption class="sr-only">{caption}</caption>
136
113
  {/if}
137
- <DataTableHead
138
- {table}
139
- {headerGroups}
140
- {headerGroupCount}
141
- {isRowSelectionEnabled}
142
- {isMultiRowSelectionEnabled}
143
- {allRowsSelectionState}
144
- {hasGrowColumn}
145
- />
114
+ {#key visibleColumnIds}
115
+ <DataTableHead
116
+ {table}
117
+ {headerGroups}
118
+ {headerGroupCount}
119
+ {isRowSelectionEnabled}
120
+ {isMultiRowSelectionEnabled}
121
+ {allRowsSelectionState}
122
+ {hasGrowColumn}
123
+ />
124
+ {/key}
146
125
  <tbody>
147
- {#key visibleLeafColumns.map((column) => column.id).join('|')}
126
+ {#key visibleColumnIds}
148
127
  {#each rowModel.rows as row (row.id)}
149
128
  {@const rowSelected = getReactiveTableState(table).rowSelection[row.id] === true}
150
129
  <tr
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "compote-ui",
3
- "version": "0.43.8",
3
+ "version": "0.43.10",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "vite dev --open",