Переглянути джерело

Show scroll to bottom in ui.table demo (#2927)

* show scroll to bottom in ui.table demo

* review

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>
Rodja Trappe 1 рік тому
батько
коміт
aa8ec69304
1 змінених файлів з 7 додано та 10 видалено
  1. 7 10
      website/documentation/content/table_documentation.py

+ 7 - 10
website/documentation/content/table_documentation.py

@@ -139,21 +139,18 @@ def table_from_pandas_demo():
 
 @doc.demo('Adding rows', '''
     It's simple to add new rows with the `add_rows(dict)` method.
+    With the "virtual-scroll" prop set, the table can be programmatically scrolled with the `scrollTo` JavaScript function.
 ''')
 def adding_rows():
-    import os
-    import random
+    from datetime import datetime
 
     def add():
-        item = os.urandom(10 // 2).hex()
-        table.add_rows({'id': item, 'count': random.randint(0, 100)})
+        table.add_rows({'date': datetime.now().strftime('%c')})
+        table.run_method('scrollTo', len(table.rows)-1)
 
-    ui.button('add', on_click=add)
-    columns = [
-        {'name': 'id', 'label': 'ID', 'field': 'id'},
-        {'name': 'count', 'label': 'Count', 'field': 'count'},
-    ]
-    table = ui.table(columns=columns, rows=[], row_key='id').classes('w-full')
+    columns = [{'name': 'date', 'label': 'Date', 'field': 'date'}]
+    table = ui.table(columns=columns, rows=[]).classes('h-52').props('virtual-scroll')
+    ui.button('Add row', on_click=add)
 
 
 @doc.demo('Custom sorting and formatting', '''