Remove "external active column"

Author: Rafferty97

src/table/Cell.tsx

@@ -11,7 +11,6 @@ export interface CellProps {
   value: unknown
   setValue?: (value: unknown) => void
   onEdit?: (pos: number) => void
-  extActive?: boolean
 }
 
 export interface CellInputProps {
@@ -31,20 +30,16 @@ export function Cell(props: CellProps) {
   const [value, setValue] = createSignal(props.value)
   createEffect(() => props.value !== undefined && setValue(props.value))
 
-  const isNull = () => value() === null
-
   return (
-    <div ref={containerEl} class="cell" data-ext-active={props.extActive} tabIndex={-1}>
-      <Show when={!isNull()} fallback={<span class="null">NULL</span>}>
-        <Dynamic
-          component={props.component}
-          value={value()}
-          setValue={props.setValue}
-          onEdit={props.onEdit}
-          editable={props.editable}
-          format={props.format}
-        />
-      </Show>
+    <div ref={containerEl} class="cell" tabIndex={-1}>
+      <Dynamic
+        component={props.component}
+        value={value()}
+        setValue={props.setValue}
+        onEdit={props.onEdit}
+        editable={props.editable}
+        format={props.format}
+      />
     </div>
   )
 }

src/table/Table.css

@@ -148,12 +148,12 @@
     outline: none;
     /* text-sm */
 
-    .null {
+    /* .null {
       width: 100%;
       text-align: center;
       font-style: italic;
       color: oklch(87.2% 0.01 258.338); /* gray-300 */
-    }
+    } */
   }
 
   .cell-input-container {

src/table/Table.tsx

@@ -41,8 +41,6 @@ export interface TableProps<K = string> {
   activeRange: ActiveRange
   /** Sets the state of the selected cell or cells in the table. */
   setActiveRange?: (range: ActiveRange) => void
-  /** The ID of the column that is being edited by another (external) UI. */
-  extActiveColumn?: K
   /** Gets the value in a cell. */
   getCellValue(row: number, column: Column<K>): unknown
   /** Sets the value of the given cell. */
@@ -182,15 +180,6 @@ export default function Table<K = string>(props: TableProps<K>) {
     }
   })
 
-  // Scroll to the externally active column
-  const extActiveColumnIdx = createMemo(() =>
-    props.columns.findIndex(c => c.id === props.extActiveColumn),
-  )
-  createEffect(() => {
-    const colIndex = extActiveColumnIdx()
-    if (colIndex >= 0) scrollToCell(undefined, colIndex)
-  })
-
   // Watch scroll position
   const viewport = watchViewport(() => tableEl!)
 
@@ -576,7 +565,6 @@ export default function Table<K = string>(props: TableProps<K>) {
               1,
             )
           }
-          extActiveColumn={props.extActiveColumn}
         />
         {/* Add column button */}
         <Show when={props.columnsEditable}>
@@ -647,7 +635,6 @@ export default function Table<K = string>(props: TableProps<K>) {
                 onMouseContextDown={onCellContextDown}
                 onContextMenu={onContextMenu}
                 onEditCell={editCell}
-                extActiveColumn={props.extActiveColumn}
               />
             )}
           </For>

src/table/TableHeader.tsx

@@ -11,7 +11,6 @@ export interface TableHeaderProps<K> {
   onResizeColumn?: (colId: K, width: number | null) => void
   setColumnName?: (colId: K, name: string) => void
   removeColumn(colId: K): void
-  extActiveColumn?: K
 }
 
 export function TableHeader<K>(props: TableHeaderProps<K>) {
@@ -25,7 +24,6 @@ export function TableHeader<K>(props: TableHeaderProps<K>) {
             columnsEditable={props.columnsEditable}
             setColumnName={props.setColumnName}
             removeColumn={props.removeColumn}
-            extActive={col.id === props.extActiveColumn}
           />
           <ResizeBar
             class="resize-bar"
@@ -53,7 +51,6 @@ interface ColumnHeaderProps<K> {
   columnsEditable?: boolean
   setColumnName?: (id: K, name: string) => void
   removeColumn(id: K): void
-  extActive?: boolean
 }
 
 function ColumnHeader<K>(props: ColumnHeaderProps<K>) {
@@ -94,7 +91,7 @@ function ColumnHeader<K>(props: ColumnHeaderProps<K>) {
       }}
       onContextMenu={handleContextMenu}
     >
-      <div data-ext-active={props.extActive}>
+      <div>
         <Renameable
           class="renameable"
           value={props.column.name}

src/table/TableRow.tsx

@@ -15,7 +15,6 @@ export interface TableRowProps<K> {
   onMouseContextDown?: (ev: MouseEvent, i: number, j: number) => void
   onContextMenu?: (ev: MouseEvent, i: number, j: number) => void
   onEditCell?: (pos: number) => void
-  extActiveColumn?: K
 }
 
 export function TableRow<K>(props: TableRowProps<K>) {
@@ -43,7 +42,6 @@ export function TableRow<K>(props: TableRowProps<K>) {
               value={props.getCellValue(props.rowIdx, col)}
               setValue={value => props.setCellValue?.(props.rowIdx, col.id, value)}
               onEdit={props.onEditCell}
-              extActive={col.id === props.extActiveColumn}
             />
           </div>
         )}