tokenized column search

packages/web/src/datagrid/ColumnManager.svelte

@@ -235,6 +235,7 @@
       {columnIndex}
       {allowChangeChangeSetStructure}
       isSelected={selectedColumns.includes(column.uniqueName) || currentColumnUniqueName == column.uniqueName}
+      {filter}
       on:click={() => {
         if (domFocusField) domFocusField.focus();
         selectedColumns = [column.uniqueName];

packages/web/src/datagrid/ColumnManagerRow.svelte

@@ -15,6 +15,7 @@
   export let conid;
   export let database;
   export let isDynamicStructure;
+  export let filter = undefined;
 
   export let tableInfo;
   export let setTableInfo;
@@ -83,7 +84,7 @@
         }}
       />
     {/if}
-    <ColumnLabel {...column} showDataType {conid} {database} />
+    <ColumnLabel {...column} showDataType {conid} {database} {filter} />
   </div>
 
   {#if allowChangeChangeSetStructure && !isDynamicStructure}

packages/web/src/elements/ColumnLabel.svelte

@@ -11,6 +11,7 @@
   import { openDatabaseObjectDetail } from '../appobj/DatabaseObjectAppObject.svelte';
 
   import FontIcon from '../icons/FontIcon.svelte';
+  import TokenizedFilteredText from '../widgets/TokenizedFilteredText.svelte';
   import Link from './Link.svelte';
 
   export let notNull = false;
@@ -25,6 +26,7 @@
   export let conid = undefined;
   export let database = undefined;
   export let iconOverride = undefined;
+  export let filter = undefined;
 
   $: icon = iconOverride || getColumnIcon($$props, forceIcon);
 </script>
@@ -33,7 +35,7 @@
   {#if icon}
     <FontIcon {icon} />
   {/if}
-  {headerText || columnName}
+  <TokenizedFilteredText text={headerText || columnName} {filter} />
   {#if extInfo}
     <span class="extinfo">{extInfo}</span>
   {/if}