Maxxner
December 22, 2024, 2:42pm
1
How can I achieve the following for a DataTable?
Colum width is calculated based on the cell content (also considering the column name)
table width/viewport is still respected → horizontal scrollbars are introduced if the columns are getting too wide.
The autosize_mode argument only seems to support adjusting the viewport (via "fit_viewport") or forcing all columns inside the viewport (via "fit_columns"). In both cases no horizontal scrollbars are available.
Bryan
December 23, 2024, 9:31am
2
I thought that was what fit_columns was supposed to do, so maybe open a GitHub Issue with full details.
I have had a similar problem since I updated to bokeh 3 where if I use fit_viewport or fit_columns the table doesn’t render at all. There is an open github issue related to this here:
opened 02:31PM - 22 Dec 24 UTC
type: bug
tag: regression
tag: component: bokehjs
### Software versions
Python version : 3.10.8 (tags/v3.10.8:aaaf517, Oct 11 202… 2, 16:50:30) [MSC v.1933 64 bit (AMD64)]
IPython version : 8.12.0
Tornado version : 6.2
NumPy version : 1.24.2
Bokeh version : 3.6.2
node.js version : (not installed)
npm version : (not installed)
jupyter_bokeh version : (not installed)
Operating system : Windows-10-10.0.19045-SP0
### Browser name and version
Firefox
### Jupyter notebook / Jupyter Lab version
_No response_
### Expected behavior
DataTable should render when using `autosize_mode="fit_viewport"` or `autosize_mode="fit_columns"`.
### Observed behavior
When setting `autosize_mode="fit_viewport"` or `autosize_mode="fit_columns"` in the example (https://docs.bokeh.org/en/latest/docs/user_guide/interaction/widgets.html#datatable) the table won't render due to a JS error:
**`Error rendering Bokeh items: ReferenceError: row is not defined`**
### Example code
```Python
from datetime import date
from random import randint
from bokeh.io import show, curdoc
from bokeh.models import ColumnDataSource, DataTable, DateFormatter, TableColumn
data = dict(
dates=[date(2014, 3, i+1) for i in range(10)],
downloads=[randint(0, 100) for i in range(10)],
)
source = ColumnDataSource(data)
columns = [
TableColumn(field="dates", title="Date", formatter=DateFormatter()),
TableColumn(field="downloads", title="Downloads"),
]
data_table = DataTable(source=source, columns=columns, width=400, height=280, autosize_mode="fit_viewport")
doc = curdoc()
doc.add_root(data_table)
```
### Stack traceback or browser console output
_No response_
### Screenshots
_No response_
For now what I found working is to specify the width for every column and use autosize_mode='none' for the DataTable.
lol I just saw that the github issue I mentioned was opened yesterday by the OP. This is the issue I meant to share:
opened 02:07PM - 18 Oct 23 UTC
type: bug
tag: regression
tag: component: bokehjs
### Expected behavior
My expectation is, that all `autosize_mode`s of the `Da… taTable` can be displayed without an error.
### Observed behavior
The two modes `"fit_viewport"` and `"fit_columns"` both raise a `ReferenceError` shown in the Browser Console.
```
VM188 bokeh-tables-3.3.0.min.js:92
Uncaught (in promise) ReferenceError: row is not defined
at getColContentSize (VM188 bokeh-tables-3.3.0.min.js:92:48514)
at getColAutosizeWidth (VM188 bokeh-tables-3.3.0.min.js:92:47153)
at SlickGrid.autosizeColumns (VM188 bokeh-tables-3.3.0.min.js:92:44466)
at M.updateLayout (VM188 bokeh-tables-3.3.0.min.js:55:3085)
at M._after_render (VM188 bokeh-tables-3.3.0.min.js:55:6623)
at M.after_render (VM185 bokeh-3.3.0.min.js:560:6522)
at M.r_after_render (VM185 bokeh-3.3.0.min.js:560:6487)
at M.render_to (VM185 bokeh-3.3.0.min.js:560:6323)
at VM185 bokeh-3.3.0.min.js:218:834
at async u (bokeh-3.3.0.min.js:218:657)
```
### Example code
```Python
from datetime import date
from random import randint
from bokeh.models import ColumnDataSource, DataTable, DateFormatter, TableColumn
from bokeh.io import show, output_notebook
output_notebook()
data = dict(
dates=[date(2023, 3, i+1) for i in range(3)],
downloads=[randint(0, 100) for i in range(3)],
)
source = ColumnDataSource(data)
columns = [
TableColumn(field="dates", title="Date", formatter=DateFormatter()),
TableColumn(field="downloads", title="Downloads"),
]
data_table_viewport = DataTable(
source=source,
columns=columns,
width=400,
height=100,
autosize_mode = "fit_viewport", # same for "fit_columns"
)
show(data_table_viewport)
```
<details>
<summary>Software versions</summary>
Python version : 3.10.12 | packaged by conda-forge | (main, Jun 23 2023, 22:40:32) [GCC 12.3.0]
IPython version : 8.14.0
Tornado version : 6.3.2
Bokeh version : 3.3.0
BokehJS static path : /opt/conda/envs/aiva-env/lib/python3.10/site-packages/bokeh/server/static
node.js version : v18.16.0
npm version : 9.5.1
Operating system : Linux-4.19.0-21-amd64-x86_64-with-glibc2.35
Chrome Version 118.0.5993.71
</details>
Maxxner
December 24, 2024, 2:16pm
5
Unfortunately that is not the case and the document mentions that there won’t be a horizontal scrollbar. So it seems like there is a feature gap.
"fit_columns"
Compute column widths based on cell contents but ensure the table fits into the available viewport. This results in no horizontal scrollbar showing up , but data can get unreadable if there is not enough space available.
Bryan
December 24, 2024, 4:00pm
6
So it seems like there is a feature gap.
Issue still seems appropriate then.
1 Like