Observable JS Table Columns Auto-Resizing Despite Fixed Width Setting and Filtering Causes Layout Jump in Fixed Width Observable JS Table

Bug description

I'm trying to set the columns of my Observable JS table to a fixed width of 60 pixels. I created an array with the exact number of columns in the table and set each value to 50. However, the columns are still adjusting their width based on the longest entry in each category, rather than adhering to the fixed width. Additionally, when I filter the table by category, the layout jumps around even though the layout is set to fixed.

Steps to reproduce

title: "AA Poetry Data Table"
format: html

//| echo: false
//| output: false
aa_poetry_data = d3.csv("https://raw.githubusercontent.com/melaniewalsh/responsible-datasets-in-context/main/datasets/aa-periodical-poetry/AAPADA-Periodical-Poetry_1900-1928.csv", d3.autoType)

//| echo: false
viewof search = Inputs.search(aa_poetry_data, {
  placeholder: "Search"
})

//| echo: false
Inputs.table(search, {
  layout: "fixed",
  width: Array(aa_poetry_data.length).fill(60),
  rows: 25,
  sort: "year",
  reverse: false,
  format: {
    /*RecreationVisits: x => d3.format('.2s')(x),*/
    year: x => d3.timeFormat(x),
    text: x => {
      const words = x.split(' ');
      return words.slice(0, 15).join(' ') + (words.length > 15 ? '...' : '');
    }
  }
})

Expected behavior

The table columns should be fixed at a width of 60 pixels each, regardless of the length of the content within them. Additionally, when filtering by category, the table should maintain a consistent layout and not jump around or resize.

Actual behavior

The table columns are not fixed at the specified width of 60 pixels. Instead, they are auto-adjusting based on the longest entry within each category. Additionally, when filtering by category, the table jumps around.

Your environment

• IDE: VSCode 1.89.0
• OS: Windows 11

Quarto check output

Quarto 1.4.554
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.554
      Path: C:\Users\juang\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2024.05
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\juang\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.10.5
      Path: C:/Users/juang/AppData/Local/Programs/Python/Python310/python.exe
      Jupyter: 5.7.2
      Kernels: python3

(-) Checking Jupyter engine render....Assertion failed: Interrupted system call [10004] (C:\Users\runneradmin\AppData\Local\Temp\tmpddg6uifr\build\_deps\bundled_libzmq-src\src\signaler.cpp:345)
[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.2.1
      Path: C:/PROGRA~1/R/R-42~1.1
      LibPaths:
        - C:/Users/juang/AppData/Local/R/win-library/4.2
        - C:/Program Files/R/R-4.2.1/library
      knitr: 1.40
      rmarkdown: 2.16

[>] Checking Knitr engine render......OK

Start by reproducing the Observable JS example in the issue with Inputs.table, layout set to fixed, and filtering enabled. Compare the rendered column widths before and after filtering against the expected 60-pixel widths. Done means the columns remain fixed and the table layout does not jump when the data is filtered.