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.

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://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/database-tools/super-database-tools-v3.css">

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

<script src="https://cdn.jsdelivr.net/gh/super-so/super-so.github.io@master/database-tools/super-database-tools-v3.js" defer></script>

5. Save your changes.
6. Open your live Super site and refresh 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 code works best at the global/site level because Super can switch pages without a full browser reload. We do not recommend using it as page-level code.
• 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.
• 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.
• Nonetheless, the general search field can still find visible text that already appears in the table rows.