Filter Button

About

This package provides a custom field for Strapi that lets you add a filter button in no time.

Strapi 5 compatible. (For Strapi 4 use [email protected].)

Custom fields offer a powerful API to create highly customizable fields.

This plugin lets you view filtered data according to your configurations.

Installation

To install this plugin, you need to add an NPM dependency to your Strapi application:

For NPM:

npm i filter-button

For Yarn:

yarn add filter-button

Using a local build (unpublished / linked)

If you have the plugin checked out locally (e.g. as a sibling folder next to your Strapi app) instead of installing from NPM, first build it, then reference it with a file: dependency:

# in the plugin folder
npm install
npm run build

// in your Strapi app's package.json
"dependencies": {
  "filter-button": "file:../Filter-Button"
}

# in your Strapi app
npm install

npm install symlinks the plugin into node_modules/filter-button. Note the file: path is machine-specific, so this is best for local development rather than committing to a shared repo.

Registering the plugin (optional)

Because filter-button is a package dependency in your package.json, Strapi 5 auto-discovers and enables it — no config/plugins entry is required just to turn it on.

You only need an entry in ./config/plugins.js (or ./config/plugins.ts) if you want to be explicit about it (recommended for discoverability), or to disable it (enabled: false):

module.exports = {
  'filter-button': {
    enabled: true,
  },
};

If you use a TypeScript config that already exports other plugin settings, add 'filter-button' inside the exported config object rather than a separate module.exports — a trailing module.exports will override export default and silently drop your other settings:

export default ({ env }) => ({
  // ...other plugins...
  'filter-button': {
    enabled: true,
  },
});

Configuration

create relations first for filter button to work

if relation is many to many then add boolean manyToMany:true in configuration

Strapi 5 uses Vite for the admin panel (webpack has been removed). Create (or edit) src/admin/vite.config.js in your Strapi app and expose your configuration through Vite's define option:

const { mergeConfig } = require('vite');

module.exports = (config) => {
  return mergeConfig(config, {
    define: {
      CONTENT_TYPES: JSON.stringify([
        {
          from: 'api::topic.topic', // collection where button will be added
          to: 'api::card.card', // which collection you want to filter
          filterBy: 'title', // field name by which you want to filter
          attributeName: 'viewCards', // attribute name added while adding button
          buttonTitle: 'View Cards', // title of button
        },
        {
          from: 'api::category.category',
          to: 'api::topic.topic',
          filterBy: 'title',
          attributeName: 'viewTopics',
          buttonTitle: 'View Topics',
        },
        {
          from: 'api::category.category', // adding multiple buttons for same collection
          to: 'api::card.card',
          filterBy: 'title',
          attributeName: 'viewCards',
          buttonTitle: 'View Cards',
        },
      ]),
    },
  });
};

Then run build:

For NPM:

npm run build

For Yarn:

yarn build

How To Use

1. Once all necessary configuration is done, create a elation between from and to collections.
2. Add button from custom fields
3. make sure attributeName is matching with configurations while creating custom field