Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Datatable scrolling faq #2477

Merged
merged 6 commits into from
May 4, 2023
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 3 additions & 38 deletions FAQ.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,44 +235,9 @@ There is currently a light and dark version of the design system, but more are p
<a name="why-doesn't-the-`datatable`-scroll-programmatically"></a>
## Why doesn't the `DataTable` scroll programmatically?

If it looks like the scrolling in your `DataTable` is broken, it may be because your `DataTable` does not have its height set, which means it is using the default value of `height: auto`.
In turn, this means that the `DataTable` itself does not have a scrollbar and, hence, it cannot scroll.

If it looks like your `DataTable` has scrollbars, those might belong to the container(s) of the `DataTable`, which in turn makes it look like the scrolling of the `DataTable` is broken.

To see the difference, try running the app below with and without the comment in the attribute `TableApp.CSS`.
Press <kbd>E</kbd> to scroll the `DataTable` to the end.
If the `CSS` is commented out, the `DataTable` does not have a scrollbar and, therefore, there is nothing to scroll.

<details>
<summary>Example app.</summary>

```py
from textual.app import App, ComposeResult
from textual.widgets import DataTable


class TableApp(App):
# CSS = "DataTable { height: 100% }"

def compose(self) -> ComposeResult:
yield DataTable()

def on_mount(self) -> None:
table = self.query_one(DataTable)
table.add_column("n")
table.add_rows([(n,) for n in range(300)])

def key_e(self) -> None:
self.query_one(DataTable).action_scroll_end()


app = TableApp()
if __name__ == "__main__":
app.run()
```

</details>
If scrolling in your `DataTable` is _apparently_ broken, it may be because your `DataTable` is using the default value of `height: auto`.
This means that the table will be sized to fit its rows without scrolling, which may cause the *container* (typically the screen) to scroll.
If you would like the table itself to scroll, set the height to something other than `auto`.

<hr>

Expand Down
41 changes: 3 additions & 38 deletions questions/datatable-doesnt-scroll.question.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,41 +5,6 @@ alt_titles:
- "Datatable cursor goes off screen and doesn't scroll."
---

If it looks like the scrolling in your `DataTable` is broken, it may be because your `DataTable` does not have its height set, which means it is using the default value of `height: auto`.
In turn, this means that the `DataTable` itself does not have a scrollbar and, hence, it cannot scroll.

If it looks like your `DataTable` has scrollbars, those might belong to the container(s) of the `DataTable`, which in turn makes it look like the scrolling of the `DataTable` is broken.

To see the difference, try running the app below with and without the comment in the attribute `TableApp.CSS`.
Press <kbd>E</kbd> to scroll the `DataTable` to the end.
If the `CSS` is commented out, the `DataTable` does not have a scrollbar and, therefore, there is nothing to scroll.

<details>
<summary>Example app.</summary>

```py
from textual.app import App, ComposeResult
from textual.widgets import DataTable


class TableApp(App):
# CSS = "DataTable { height: 100% }"

def compose(self) -> ComposeResult:
yield DataTable()

def on_mount(self) -> None:
table = self.query_one(DataTable)
table.add_column("n")
table.add_rows([(n,) for n in range(300)])

def key_e(self) -> None:
self.query_one(DataTable).action_scroll_end()


app = TableApp()
if __name__ == "__main__":
app.run()
```

</details>
If scrolling in your `DataTable` is _apparently_ broken, it may be because your `DataTable` is using the default value of `height: auto`.
This means that the table will be sized to fit its rows without scrolling, which may cause the *container* (typically the screen) to scroll.
If you would like the table itself to scroll, set the height to something other than `auto`.