浏览代码

add table.is_fullscreen property and demo

Falko Schindler 1 年之前
父节点
当前提交
a9d252a58f
共有 2 个文件被更改,包括 31 次插入2 次删除
  1. 16 2
      nicegui/elements/table.py
  2. 15 0
      website/more_documentation/table_documentation.py

+ 16 - 2
nicegui/elements/table.py

@@ -58,10 +58,24 @@ class Table(FilterElement, component='table.js'):
             handle_event(on_select, arguments)
         self.on('selection', handle_selection, ['added', 'rows', 'keys'])
 
+    @property
+    def is_fullscreen(self) -> bool:
+        """Whether the table is in fullscreen mode."""
+        return self._props['fullscreen']
+
+    @is_fullscreen.setter
+    def is_fullscreen(self, value: bool) -> None:
+        """Set fullscreen mode."""
+        self._props['fullscreen'] = value
+        self.update()
+
+    def set_fullscreen(self, value: bool) -> None:
+        """Set fullscreen mode."""
+        self.is_fullscreen = value
+
     def toggle_fullscreen(self) -> None:
         """Toggle fullscreen mode."""
-        self._props['fullscreen'] = not self._props['fullscreen']
-        self.update()
+        self.is_fullscreen = not self.is_fullscreen
 
     def add_rows(self, *rows: Dict) -> None:
         """Add rows to the table."""

+ 15 - 0
website/more_documentation/table_documentation.py

@@ -186,3 +186,18 @@ def more() -> None:
             {'name': 'Carl', 'age': 42},
         ]
         ui.table(columns=columns, rows=rows, row_key='name')
+
+    @text_demo('Toggle fullscreen', '''
+        You can toggle the fullscreen mode of a table using the `toggle_fullscreen()` method.
+    ''')
+    def toggle_fullscreen():
+        table = ui.table(
+            columns=[{'name': 'name', 'label': 'Name', 'field': 'name'}],
+            rows=[{'name': 'Alice'}, {'name': 'Bob'}, {'name': 'Carol'}],
+        ).classes('w-full')
+
+        with table.add_slot('top-left'):
+            def toggle() -> None:
+                table.toggle_fullscreen()
+                button.props('icon=fullscreen_exit' if table.is_fullscreen else 'icon=fullscreen')
+            button = ui.button('Toggle fullscreen', icon='fullscreen', on_click=toggle).props('flat')