Documentation of advanced Dashibase features

Styling Your Forms and Table Views with CSS

After creating and embedding your forms and tables, you can customize their look and feel using CSS.


1. Styling table header row

    div::part(dashi-table-headings) {
      background-color: #e0e7ff;

2. Styling form labels and button

    div::part(dashi-label) {
      color: #585859;

    div::part(dashi-button) {
      background-color: #6366f1;
      border-radius: 0.375rem;
      padding: 8px 16px;

Reference table

Here are the respective CSS selectors you can use to style your forms and tables:

CSS SelectorName/TypeDescription
div::part(dashi)Overall divThis div element wraps around the entire form or table view.
div::part(dashi-embed)Embed form or table divThe main form or table view element.
div::part(dashi-title)TitleThe title of the form or table view.
div::part(dashi-h1), div::part(dashi-h2), div::part(dashi-text)H1, H2, TextThe headings and text of the form or table view.
div::part(dashi-divider)DividerThe divider in the form or table view.
div::part(dashi-label)Input labelsThe labels above the input boxes.
div::part(dashi-table)TableAll tables in a table view. Good for styling the table color.
div::part(dashi-table-title)Table titleThe title of all tables in a table view.
div::part(dashi-table-header)Table header rowThe first row of all tables in a table view. Good for matching your website’s colors.
div::part(dashi-button)ButtonThe password enter and form submit button. Good for matching your website’s colors.
div::part(dashi-password)Overall password divThe div element on the password page.


  • You cannot style the children of the above-mentioned elements because we are using the Shadow DOM for the embed. This Stack Overflow answer has a helpful explanation and links to extra readings.
  • The table width is determined via the editor. If you want to adjust the table or column width, we recommend doing that in the editor.
  • It's not possible to style input boxes at the moment.


Actions, otherwise known as triggers, are custom Javascript functions that can be added into Dashibase and triggered via buttons.

Each action is defined by two properties.

  1. label - the label that will be on the button
  2. code - the Javascript code that will be executed when the button is clicked

Currently, the code handles any vanilla Javascript and takes in two variables user and items.

Hosted version

In the hosted version, an Action can be created by clicking on the "Add action" button (see above). Clicking "Edit" on the new Action displays a popup for entering the code to be executed.

Self-hosted version

In the self-hosted version, an Action can be added to the triggers attribute of the config file. The sample src/dashibaseConfig.ts has an example of how to do this.

Action variables

The code executed by the Action can access two varaibles user and items, representing the logged-in user and the selected items respectively.


user is an Object representing the user who is currently logged in. Dashibase retrieves this via supabase.auth.user().

Useful properties of user:

  • - UUID from the auth.users table
  • user.role - Role of user
  • - Email of user
  • user.last_sign_in_at - Timestamp of last sign in

For instance, setting the Action's code to alert( will display an alert box that prints the user's email when the button is clicked.


items is an Array representing a list of items from the current Supabase table.

On a Card or List view, items will be an Array of the currently selected items, each represented as an Object.

In the case of the above image:

  items = [{
    task: "Buy groceries",
    due_date: "2022-05-03",
    details: "Eggs, ham, bread, rice",
    status: "ToDo",
  }, {
    task: "Homework",
    due_date: "2022-06-01",
    details: "Literature essay and math",
    status: "In Progress",

On a Single view, items will be an Array of a single Object, with properties and values defined by the columns and column values of the displayed item.

In the case of the above image:

  items = [{
    task: "Help mum with taxes",
    due_date: "2022-05-24",
    details: "Check with Joel about updated tax forms",
    status: "Done",

As an example, setting the Action's code to alert(items[0].task) will display an alert box that prints the task property of the first/current item.