code review

examples/editable_table/main.py

@@ -1,84 +1,76 @@
 #!/usr/bin/env python3
-from nicegui import ui, events
-        
+from nicegui import events, ui
+
 columns = [
-    {"name": "name", "label": "Name", "field": "name", "align": "left"},
-    {"name": "age", "label": "Age", "field": "age"},
+    {'name': 'name', 'label': 'Name', 'field': 'name', 'align': 'left'},
+    {'name': 'age', 'label': 'Age', 'field': 'age'},
 ]
 rows = [
-    {"id": 0, "name": "Alice", "age": 18},
-    {"id": 1, "name": "Bob", "age": 21},
-    {"id": 2, "name": "Carol", "age": 20},
+    {'id': 0, 'name': 'Alice', 'age': 18},
+    {'id': 1, 'name': 'Bob', 'age': 21},
+    {'id': 2, 'name': 'Carol', 'age': 20},
 ]
+
+
+def add_row() -> None:
+    new_id = max(dx['id'] for dx in rows) + 1
+    rows.append({'id': new_id, 'name': 'New guy', 'age': 21})
+    ui.notify(f'Added new row with ID {new_id}')
+    table.update()
+
+
 def rename(e: events.GenericEventArguments) -> None:
     for row in rows:
-        if row["id"] == e.args["id"]:
+        if row['id'] == e.args['id']:
             row.update(e.args)
-    ui.notify(f"Table.rows is now: {table.rows}")
-
-
-def delete(e: events.GenericEventArguments) -> None:
-    rows[:] = [row for row in rows if row["id"] != e.args["id"]]
-    ui.notify(f"Delete {e.args['id']}")
+    ui.notify(f'Updated rows to: {table.rows}')
     table.update()
 
 
-def addrow() -> None:
-    newid = max(dx["id"] for dx in rows) + 1
-    rows.append({"id": newid, "name": "New guy", "age": 21})
-    ui.notify(f"Added new row with id {newid}")
+def delete(e: events.GenericEventArguments) -> None:
+    rows[:] = [row for row in rows if row['id'] != e.args['id']]
+    ui.notify(f'Deleted row with ID {e.args["id"]}')
     table.update()
 
 
-table = ui.table(columns=columns, rows=rows, row_key="name").classes("w-72")
-table.add_slot(
-    "header",
-    r"""
+table = ui.table(columns=columns, rows=rows, row_key='name').classes('w-60')
+table.add_slot('header', r'''
     <q-tr :props="props">
         <q-th auto-width />
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
             {{ col.label }}
         </q-th>
     </q-tr>
-""",
-)
-table.add_slot(
-    "body",
-    r"""
+''')
+table.add_slot('body', r'''
     <q-tr :props="props">
         <q-td auto-width >
-            <q-btn size="sm" color="warning" round dense icon="delete" :props="props"
-                @click="() => $parent.$emit('delete', props.row)" >
+            <q-btn size="sm" color="warning" round dense icon="delete"
+                @click="() => $parent.$emit('delete', props.row)"
+            />
         </q-td>
         <q-td key="name" :props="props">
             {{ props.row.name }}
-            <q-popup-edit v-model="props.row.name" v-slot="scope" 
-                @update:model-value="() => $parent.$emit('rename', props.row)" >
+            <q-popup-edit v-model="props.row.name" v-slot="scope"
+                @update:model-value="() => $parent.$emit('rename', props.row)"
+            >
                 <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
             </q-popup-edit>
         </q-td>
-        <q-td key="age" :props="props" class="w-8">
+        <q-td key="age" :props="props">
             {{ props.row.age }}
             <q-popup-edit v-model="props.row.age" v-slot="scope" 
-                @update:model-value="() => $parent.$emit('rename', props.row)" >
+                @update:model-value="() => $parent.$emit('rename', props.row)"
+            >
                 <q-input v-model.number="scope.value" type="number" dense autofocus counter @keyup.enter="scope.set" />
             </q-popup-edit>
         </q-td>
     </q-tr>
-    """,
-)
-table.add_slot(
-    "bottom-row",
-    r"""
-    <q-tr :props="props">
-        <q-td colspan="3" class="text-center">
-            <q-btn color="accent" icon="add" class="w-full" @click="() => $parent.$emit('addrow')"/>
-        </q-td>
-    </q-tr>
-    """,
-)
-table.on("rename", rename)
-table.on("delete", delete)
-table.on("addrow", addrow)
+''')
+with table.add_slot('bottom-row'):
+    with table.cell().props('colspan=3'):
+        ui.button('Add row', icon='add', color='accent', on_click=add_row).classes('w-full')
+table.on('rename', rename)
+table.on('delete', delete)
 
 ui.run()

main.py

@@ -364,7 +364,7 @@ async def index_page(client: Client) -> None:
             example_link('Generate PDF', 'create SVG preview and PDF download from input form elements')
             example_link('Custom Binding', 'create a custom binding for a label with a bindable background color')
             example_link('Descope Auth', 'login form and user profile using [Descope](https://descope.com)')
-            example_link('Editable table', 'editable table with editing, removing and add new rows')
+            example_link('Editable table', 'editable table allowing to add, edit, delete rows')
 
     with ui.row().classes('dark-box min-h-screen mt-16'):
         link_target('why')