Onebite.dev

Developer tips & trick, one bite at a time

Explore table editor in Supabase database

We’ll start by exploring the database feature in Supabase, which built on top of Postgres, Relational Database. We can use the SQL editor, where we can run our query or “Table Mode” which makes it like spreadsheet, where we can user the GUI to play around with our data.

ss database supabase

Table Editor

Using table editor is just like using a spreadsheet, we have buttons and columns to work with. We can start create a new table, for our database add new table ss

Supabase also allow us to import data by upload a CSV, TSV or XLSV file or even copied text from a spreadsheet.

Try to name your new table ‘posts’ (or anything you like), then click save.

Add columns

Now we have our table, which only has an id. That’s not fun, let’s add more columns on our new ‘posts’ table

add new column

Press the “+ sign” near our id. Now we can add a new column. Let’s say we want this to be a blog database.

I’ll add a column named title with varchar as value. Uncheck the “allow nullable” option to make sure it’s not empty. add new post

Now let’s make other columns with this name and type. Do the exact step above, by pressing plus sign and give new values:

Now we have a useful table for our blog. With a title, body, tag for the category and created_at column for the creation date.

It’s a good practice to always have ‘created_at’ and ‘updated_at’ column on a database, to keep track when we make and change data in our database.

Insert new data

Now we’re ready to insert some data. Click the “+ insert row” green button and add our new data.

You can leave ‘id’ empty. It will generated automatically for us. Now, just like writing something on wordpress, you can make your own blog!

add new row

Your new blog is inserted! try to make other posts.

Test the API

Supabase generate API for us to access the database. Go to the “API menu” and under ‘tables and Views’ select your table name. On the right panel, you can see your API, ready to use.

API Menu

Let’s try our API to see if it really works. Go to ‘Bash Mode’ and choose ‘anon key’, which will complete our API information like below

bash option

Copyone of the curl options you see on the right panel and paste it on your terminal / command line (assume you already cURL installed)

commandline curl

Magic! our API return the exact data we just created before.

That’s it, a quick intro on table editor from Supabase




This is a post in the Complete backend service with Supabase series.



🏊🏾‍♀️ Back Home