Delete Row#

Here's an example component demonstrating how to create a delete button that removes a table row when clicked.

# delete_row_table/__init__.py
from demo.models import ToDo
from tetra import Component


class DeleteRowTable(Component):
    def load(self, *args, **kwargs):
        self.rows = ToDo.objects.filter(session_key=self.request.session.session_key)

<!-- delete_row_table.html -->
<table class='table' {% ... attrs %}>
  <thead>
  <tr>
    <th>Title</th>
    <th>Actions</th>
  </tr>
  </thead>
  <tbody>
  {% for row in rows %}
    {% @ demo.examples.DeleteRow row=row key=row.id / %}
  {% endfor %}
  </tbody>
</table>

So far for the table component. The rows are components themselves. Each row is responsible for its own deletion. So there is no delete_item(some_id) necessary, as the component already knows its id since it internally saves its state. delete_item() is sufficient within the component's template code.

# delete_row/__init__.py
from tetra import Component, public


class DeleteRow(Component):
    title: str = public("")

    def load(self, row, *args, **kwargs):
        self.row = row
        self.title = row.title

    @public(update=False)
    def delete_item(self):
        # self.row.delete()  # delete the item in the DB here!
        self.client._removeComponent()

<!-- delete_row.html -->
<tr {% ... attrs %}>
  <td>{{ title }}</td>
  <td>
    <button class="btn btn-danger" @click="delete_item()">Delete</button>
  </td>
</tr>

Demo