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.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 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 intentionally excluded from the "Filter column" and "Sort by" dropdowns. These property types can contain linked pages, calculated values, or file data, so they may not filter or sort reliably in a simple client-side table tool.
• The exclusion only applies to the filter and sort dropdowns. The general search field can still search visible text that is already rendered inside the table rows.