From 38592c34bda68baeeb840bc61f77cdabe2ccf0ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?= <5621605+rodrigogiraoserrao@users.noreply.github.com> Date: Thu, 4 May 2023 10:35:39 +0100 Subject: [PATCH] Add FAQ about DataTable scrolling. (#2466) Related issues: #2458 --- FAQ.md | 45 ++++++++++++++++++- questions/README.md | 4 +- questions/datatable-doesnt-scroll.question.md | 45 +++++++++++++++++++ questions/images.question.md | 3 +- 4 files changed, 92 insertions(+), 5 deletions(-) create mode 100644 questions/datatable-doesnt-scroll.question.md diff --git a/FAQ.md b/FAQ.md index ffb91b1d78..72879e9d28 100644 --- a/FAQ.md +++ b/FAQ.md @@ -11,11 +11,12 @@ - [Why do some key combinations never make it to my app?](#why-do-some-key-combinations-never-make-it-to-my-app) - [Why doesn't Textual look good on macOS?](#why-doesn't-textual-look-good-on-macos) - [Why doesn't Textual support ANSI themes?](#why-doesn't-textual-support-ansi-themes) +- [Why doesn't the `DataTable` scroll programmatically?](#why-doesn't-the-`datatable`-scroll-programmatically) ## Does Textual support images? -Textual doesn't have built in support for images yet, but it is on the [Roadmap](https://textual.textualize.io/roadmap/). +Textual doesn't have built-in support for images yet, but it is on the [Roadmap](https://textual.textualize.io/roadmap/). See also the [rich-pixels](https://github.com/darrenburns/rich-pixels) project for a Rich renderable for images that works with Textual. @@ -231,6 +232,48 @@ Textual has a design system which guarantees apps will be readable on all platfo There is currently a light and dark version of the design system, but more are planned. It will also be possible for users to customize the source colors on a per-app or per-system basis. This means that in the future you will be able to modify the core colors to blend in with your chosen terminal theme. + +## 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 E 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. + +
+Example app. + +```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() +``` + +
+
Generated by [FAQtory](https://github.com/willmcgugan/faqtory) diff --git a/questions/README.md b/questions/README.md index bb201b1286..f4b1f622d0 100644 --- a/questions/README.md +++ b/questions/README.md @@ -5,13 +5,13 @@ Your questions should go in this directory. Question files should be named with the extension ".question.md". -To build the faq, install [faqtory](https://github.com/willmcgugan/faqtory) if you haven't already: +To build the FAQ, install [faqtory](https://github.com/willmcgugan/faqtory) if you haven't already: ``` pip install faqtory ``` -The run the following from the top of the repository: +Then run the following from the top of the repository: ``` faqtory build diff --git a/questions/datatable-doesnt-scroll.question.md b/questions/datatable-doesnt-scroll.question.md new file mode 100644 index 0000000000..868d04c20f --- /dev/null +++ b/questions/datatable-doesnt-scroll.question.md @@ -0,0 +1,45 @@ +--- +title: "Why doesn't the `DataTable` scroll programmatically?" +alt_titles: + - "Scroll bindings from `DataTable` not working." + - "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 E 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. + +
+Example app. + +```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() +``` + +
diff --git a/questions/images.question.md b/questions/images.question.md index 6d86ea2f52..c6a1e3dc87 100644 --- a/questions/images.question.md +++ b/questions/images.question.md @@ -3,9 +3,8 @@ title: "Does Textual support images?" alt_titles: - "Can Textual display PNG / SVG files?" - "Render images" - --- -Textual doesn't have built in support for images yet, but it is on the [Roadmap](https://textual.textualize.io/roadmap/). +Textual doesn't have built-in support for images yet, but it is on the [Roadmap](https://textual.textualize.io/roadmap/). See also the [rich-pixels](https://github.com/darrenburns/rich-pixels) project for a Rich renderable for images that works with Textual.