Note: Before we start it's worth mentioning that to illustrate deleting tasks properly, there is a pre-created Task overview page with a data table that contains all our tasks.

The quickest and easiest way to delete a task from your task overview would be to simply have a delete button next to the task. To do this navigate to the Data section of the components and drag a DataTable Column on your Data Table. Click on Add without configuration to add the new column.

Now that we have an extra column let's navigate to the Button section of the components. Here, a component called Delete record is what we'll be needing. Drag this component on the new column we just created. Select Task as the model and click on Save to create the delete button.

Press the Play button in the top left to build the page. When you click on the newly added delete button next to a task a pop-up appears asking if you're sure you want to delete this task.

When you click on Delete it'll delete the task but you won't see this reflected in the overview, to do this we need to refetch the data in the Data Table.

1) Click on the Dialog under the Delete button. Toggle its visibility in the options.

2) We can now see the pop-up appear. Select the Delete button.

3) To automatically refetch the data in the Data Table to reflect our changes, in this case, the deletion of a task, we'll need to add an interaction.

When the action that runs in the background is successful; this interaction will refetch the data and display it in the Data Table in the tasks overview.