Search, Filter & Sort Notion Databases

This custom code snippet adds simple search, filter, and sort controls to a Notion database table on your Super site. Visitors can also sort a table by clicking a column heading, and click it again to reverse the order.

It is useful when you want visitors to browse a database more easily without editing the original Notion database setup. The controls are added only on the Super site and do not change your Notion content.

This custom code improvement works best with Notion table database views.

Installation instructions

1. Open your site in the Super Dashboard
2. Open the ‘Code’ page
3. In the ‘Head’ tab, paste the following snippet:
Copy

<link rel="stylesheet" href="https://sites.super.so/database-tools/super-database-tools-v4.css">

4. Also, in the ‘Body’ tab, paste the following snippet:
Copy

<script src="https://sites.super.so/database-tools/super-database-tools-v4.js" defer></script>

5. Save your changes.
6. Open your live Super site and refresh the page.

Sorting by column heading

Click any column heading to sort the table by that column. Click the same heading again to reverse the order. An arrow next to the heading shows which column is sorted and in which direction.

The “Sort by” control in the toolbar stays in sync, and “Clear” restores the original order. This works on every table on the page.

Optional style customization

If you want to adjust the appearance of the controls, open the CSS tab and paste the following CSS.

You can update the color values to match your site design.

:root {
  --super-db-tools-bg: var(--color-bg-default);
  --super-db-tools-text: var(--color-text-default);
  --super-db-tools-border: var(--color-border-default);
  --super-db-tools-hover-bg: var(--color-ui-hover-bg);
  --super-db-tools-radius: 8px;
  --super-db-tools-highlight: #d6f7cd;
}

The --super-db-tools-highlight value controls the highlight color for searched words.

Example:

.super-db-tools__highlight {
  background: var(--super-db-tools-highlight);
}

Notes and limitations

• The snippet works with the database items that are already rendered on the page. It does not load extra hidden records from Notion, and it does not increase database item limits. If a table has a “Load more” button, search, filter, and sort only cover the rows that are already loaded.
• For best results, use it with simple Notion table database views.
• If the controls do not appear after adding the code, refresh the live site and make sure the database is using a supported table layout.
• If your site uses heavy custom code, third-party scripts, or advanced database layouts, additional testing may be needed.
• Relation, Rollup, and Files & Media properties are not included in the “Filter column” and “Sort by” dropdowns. These property types can contain linked pages, calculated values, or files, so they may not work reliably with simple filtering or sorting. These columns cannot be sorted by clicking their heading either.
• Nonetheless, the general search field can still find visible text that already appears in the table rows.

Version history

• v4 (October 13, 2026): Sort a table by clicking a column heading; click again to reverse the order. An arrow marks the sorted column, and the “Sort by” control stays in sync. To upgrade from v3, replace v3 with v4 in both the Head and the Body code.
• v3: Search, filter, and sort controls in a toolbar above the table.