datagrid

packages/web/src/datagrid/DataGridCell.svelte

@@ -44,6 +44,7 @@
   class:isModifiedCell
   class:isInserted
   class:isDeleted
+  style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
 >
   {#if value == null}
     <span class="null">(NULL)</span>

packages/web/src/datagrid/DataGridCore.svelte

@@ -42,9 +42,9 @@
   );
 
   // $: console.log('visibleRealColumns', visibleRealColumns);
-  $: console.log('visibleRowCountUpperBound', visibleRowCountUpperBound);
+  // $: console.log('visibleRowCountUpperBound', visibleRowCountUpperBound);
-  $: console.log('rowHeight', rowHeight);
+  // $: console.log('rowHeight', rowHeight);
-  $: console.log('containerHeight', containerHeight);
+  // $: console.log('containerHeight', containerHeight);
 
   $: realColumnUniqueNames = _.range(columnSizes.realCount).map(
     realIndex => (columns[columnSizes.realToModel(realIndex)] || {}).uniqueName
@@ -64,13 +64,19 @@
   <table class="table">
     <thead>
       <tr>
-        <td class="header-cell" data-row="header" data-col="header" bind:clientHeight={rowHeight} />
+        <td
+          class="header-cell"
+          data-row="header"
+          data-col="header"
+          bind:clientHeight={rowHeight}
+          style={`width:${headerColWidth}px; min-width:${headerColWidth}px; max-width:${headerColWidth}px`}
+        />
         {#each visibleRealColumns as col (col.uniqueName)}
           <td
             class="header-cell"
             data-row="header"
             data-col={col.colIndex}
-            style={`width:${col.widthPx}; min-width:${col.widthPx}; max-width:${col.widthPx}`}
+            style={`width:${col.width}px; min-width:${col.width}px; max-width:${col.width}px`}
           >
             <ColumnHeaderControl column={col} {conid} {database} />
           </td>

packages/web/src/datagrid/LoadingDataGridCore.svelte

@@ -22,6 +22,7 @@
     const loadStart = new Date().getTime();
 
     // loadedTimeRef.current = loadStart;
+    // console.log('LOAD NEXT ROWS', loadedRows);
 
     const nextRows = await loadDataPage($$props, loadedRows.length, 100);
     // if (loadedTimeRef.current !== loadStart) {
@@ -35,7 +36,7 @@
       errorMessage = nextRows.errorMessage;
     } else {
       // if (allRowCount == null) handleLoadRowCount();
-      loadedRows = [loadedRows, ...nextRows];
+      loadedRows = [...loadedRows, ...nextRows];
       isLoadedAll = nextRows.length === 0;
       //   const loadedInfo = {
       //     loadedRows: [...loadedRows, ...nextRows],
@@ -49,19 +50,21 @@
       //     ...loadedInfo,
       //   }));
     }
+
+    // console.log('LOADED', nextRows, loadedRows);
   }
 
   // $: griderProps = { ...$$props, sourceRows: loadProps.loadedRows };
   // $: grider = griderFactory(griderProps);
 
-  const handleLoadNextData = () => {
+  function handleLoadNextData() {
     if (!isLoadedAll && !errorMessage && !grider.disableLoadNextPage) {
       if (dataPageAvailable($$props)) {
         // If not, callbacks to load missing metadata are dispatched
         loadNextData();
       }
     }
-  };
+  }
 </script>
 
 <DataGridCore {...$$props} loadNextData={handleLoadNextData} {grider} />

packages/web/src/datagrid/SqlDataGridCore.svelte

@@ -57,7 +57,9 @@
   export let config;
   let loadedRows = [];
 
+  // $: console.log('loadedRows BIND', loadedRows);
   $: grider = new ChangeSetGrider(loadedRows, null, null, display);
+  // $: console.log('GRIDER', grider);
 </script>
 
 <LoadingDataGridCore {...$$props} {loadDataPage} {dataPageAvailable} {loadRowCount} bind:loadedRows {grider} />

packages/web/src/datagrid/gridutil.ts

@@ -89,7 +89,7 @@ export function countVisibleRealColumns(columnSizes, firstVisibleColumnScrollInd
 
   const visibleRealColumnIndexes = [];
   const modelIndexes = {};
-  /** @type {(import('dbgate-datalib').DisplayColumn & {widthPx: string; colIndex: number})[]} */
+  /** @type {(import('dbgate-datalib').DisplayColumn & {width: number; colIndex: number})[]} */
   const realColumns = [];
 
   // frozen columns
@@ -112,12 +112,11 @@ export function countVisibleRealColumns(columnSizes, firstVisibleColumnScrollInd
 
     let col = columns[modelColumnIndex];
     if (!col) continue;
-    const widthNumber = columnSizes.getSizeByRealIndex(colIndex);
+    const width = columnSizes.getSizeByRealIndex(colIndex);
     realColumns.push({
       ...col,
       colIndex,
-      widthNumber,
+      width,
-      widthPx: `${widthNumber}px`,
     });
   }
   return realColumns;