Bläddra i källkod

add demo of links in `ui.table`

Falko Schindler 1 år sedan
förälder
incheckning
a04fa42e1a
1 ändrade filer med 21 tillägg och 0 borttagningar
  1. 21 0
      website/more_documentation/table_documentation.py

+ 21 - 0
website/more_documentation/table_documentation.py

@@ -273,3 +273,24 @@ def more() -> None:
                 </q-badge>
             </q-td>
         ''')
+
+    @text_demo('Table cells with links', '''
+        Here is a demo of how to insert links into table cells.
+        We use the `body-cell-link` slot to insert an `<a>` tag into the `link` column.
+    ''')
+    def table_cells_with_links():
+        columns = [
+            {'name': 'name', 'label': 'Name', 'field': 'name', 'align': 'left'},
+            {'name': 'link', 'label': 'Link', 'field': 'link', 'align': 'left'},
+        ]
+        rows = [
+            {'name': 'Google', 'link': 'https://google.com'},
+            {'name': 'Facebook', 'link': 'https://facebook.com'},
+            {'name': 'Twitter', 'link': 'https://twitter.com'},
+        ]
+        table = ui.table(columns=columns, rows=rows, row_key='name')
+        table.add_slot('body-cell-link', '''
+            <q-td :props="props">
+                <a :href="props.value">{{ props.value }}</a>
+            </q-td>
+        ''')