SSupabaseHelp Center

Guide

Add Row to Table

6 stepsAgent View (JSON)

Overview

Supabase is a PostgreSQL-based backend platform that provides a web-based Table Editor for visual database management. Adding rows manually through the UI is useful for quick data entry, testing, or small-scale updates without writing SQL queries. The Table Editor streamlines this process by providing a form-like interface where you can insert and edit row data directly. This guide walks you through accessing the editor, creating a new row, entering field values, and saving your changes to the database.

Before you begin

  • A Supabase account (free tier available at supabase.com)
  • An active Supabase project with at least one table created
  • Access to the Table Editor in your Supabase dashboard (typically available to project owners and editors)
  • The name and structure of the table you wish to add data to

Step by step

1
ClickTable Editor

Navigate to the Table Editor by clicking the Table Editor link in the Supabase navigation. This opens the visual interface where you can view and edit your table data without writing SQL.

Tip. If you have multiple tables, make sure you're in the correct table before proceeding. The current table name is displayed at the top of the editor.
Step 1
2
ClickInsert

Click the Insert button in the toolbar to reveal options for adding new data to your table.

Tip. The Insert button is typically located in the top-right area of the Table Editor. Look for a plus icon or the word 'Insert' next to other action buttons.
Step 2
3
ClickInsert row Insert a new row into test-table I then R

Select 'Insert row' from the dropdown menu that appears. This option creates a new blank row ready for data entry. The menu will confirm which table you're inserting into (e.g., 'test-table').

Tip. If you see other options like 'Insert duplicate row,' make sure to select 'Insert row' to create a completely new record.
Step 3
4
ClickDefault: 'abc'::text

Click on the text field that displays the default value (e.g., 'Default: 'abc'::text') to activate the field for editing. This field is ready to accept your input.

Tip. The field label shows the column name and data type. Text fields like this one accept string values. Click directly on the input area to ensure the field is focused.
Step 4
5
TypeDefault: 'abc'::text

Type your desired value into the text field. Replace the default placeholder text with the actual data you want to store in this column.

Tip. For text fields, you can paste values from your clipboard. Clear the default text first if needed, or simply start typing to overwrite it.
6
ClickSave ⌘ ↵

Click the Save button (indicated by the keyboard shortcut ⌘ ↵) to commit your new row to the database. The row will be permanently stored in your table.

Tip. On Mac, you can also use the Command + Enter keyboard shortcut to save. On Windows/Linux, the equivalent may be Ctrl + Enter. The Save button will briefly show a loading state while the database processes your request.
Warning. Ensure all required fields have been filled before saving. If a field is mandatory and you leave it empty, the save will fail. Review your entries before clicking Save to avoid data entry errors.
Step 6

Confirm it worked

  1. 1After clicking Save, the new row appears in the table grid with your entered data visible in the corresponding fields
  2. 2The row counter or row count indicator increases by one, reflecting the newly added row
  3. 3No error messages appear on screen; the save action completes without warnings
  4. 4Refreshing the page shows the new row still persists in the table, confirming the data was committed to the database

Common issues

Keep reading

How to add rows to a table using JavaScript DOM?

How to add rows to a table using JavaScript DOM? # How to add rows to a table using JavaScript DOM? HTML Javascript Programming Scripts --- --- We will learn how to add a row to a table using Jav

tutorialspoint.com

How to Add a Row to a Table in JavaScript

How to Add a Row to a Table in JavaScript Adding a row to a table in JavaScript Tables are a powerful way to display data in a structured and organized way. In JavaScript, you can easily add a new r

hatchjs.com

How to Dynamically Add Rows in HTML table using JavaScript?

How to Dynamically Add Rows in HTML table using JavaScript? Are you having trouble adding rows to an HTML table dynamically using JavaScript? Worry no more because, in this article, we will walk you

itsourcecode.com