Manage submissions
Your results page shows submissions, but you can't do anything with them yet. What if you want to delete a spam response? Right now you'd have to open the database directly. Let's add a proper management UI.
Add the DataTable component
Your starter already has a DataTable component at app/ui/data-table.tsx — it renders a table with columns you define, and optionally adds a delete button to each row. Take a look at the file to see how it works.
Ask your AI:
Update the results page to use the `DataTable` component from `app/ui/data-table.tsx` for displaying submissions. Pass `deletable={true}` so each row gets a delete button. Add a `delete` action handler that deletes the submission by ID using `Submission.delete()`. Use the `verb` hidden field that `DataTable` sends to distinguish between create and delete in the same action.
The AI will update your results page to show a proper table with delete buttons on each row.
How delete works
The DataTable component uses a plain <form method="post"> for each delete button. When you click Delete, the form posts to the same route's action, which deletes the row and redirects back. React Router then revalidates the loader data — so the deleted row disappears without you leaving the page.
Confirm before delete
Notice that when you click "Delete," a browser confirmation dialog pops up: "Are you sure you want to delete?" This is the confirmDelete pattern built into DataTable — a simple speed bump for destructive actions.
It's not bulletproof security. It's a "did you really mean to click that?" check. Simple, effective, and prevents accidental data loss.
Try it — click Delete on a submission. Confirm, and the row disappears. Cancel, and nothing happens.