Strapi Plugin: Sortable Entries

A Strapi plugin that enables drag-and-drop sorting of entries within a collection type.

⏳ Installation

Install with NPM.

npm install strapi-plugin-sortable-entries --save

Install with Yarn.

yarn add strapi-plugin-sortable-entries

🔧 Usage

1. Configure the Plugin

Add the following configuration to your config/plugins.ts file. Create the file if it doesn’t already exist:

export default {
  // …
  'sortable-entries': {
    enabled: true,
  },
};

Then restart the app to apply the changes.

2. Use in the Admin Panel

1. Add a field named sortOrder of type integer to the collection type you want to make sortable.

2. Configure the view of that collection type:

   • Set sortOrder as the Default sort attribute.
   • Choose ASC as the Default sort order.

3. To start sorting entries, click the Drag icon located next to the Settings icon in the top-right corner.

4. A modal will appear, allowing you to drag and drop entries into your desired order.

   • The displayed title for each entry is the Entry title defined in your collection type.
   • You can configure the entry title by editing a single entry and selecting Configure the view from the three-dot menu (...).

5. Click Submit to save the new order. The modal will close and the list will refresh to reflect the changes.

3. Use in the Frontend

To retrieve entries in the specific order from the frontend, you can make a GET request to the Strapi API. In the example below, we're querying a content type called products, ordered by the sortOrder field in ascending order:

GET http://localhost:1337/api/products?sort=sortOrder

• products: The name of the content type you want to fetch.
• sort=sortOrder: Sorts the results by the sortOrder field in ascending order. Append :desc for a descending order.

📸 Screenshots

Below are screenshots from an example application using this plugin to sort products.