{"_id":"@ahmedzubairu-lc/strapi-plugin-sortable-entries","name":"@ahmedzubairu-lc/strapi-plugin-sortable-entries","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ahmedzubairu-lc/strapi-plugin-sortable-entries","version":"1.0.0","description":"A Strapi plugin that enables drag-and-drop sorting of entries within a collection type.","keywords":["strapi","plugin","sortable","entries","drag","drop","order","sort"],"license":"MIT","author":{"name":"ahmedz@layercake.cloud>"},"publishConfig":{"access":"public"},"type":"commonjs","exports":{"./package.json":"./package.json","./strapi-admin":{"types":"./dist/admin/src/index.d.ts","source":"./admin/src/index.ts","import":"./dist/admin/index.mjs","require":"./dist/admin/index.js","default":"./dist/admin/index.js"},"./strapi-server":{"types":"./dist/server/src/index.d.ts","source":"./server/src/index.ts","import":"./dist/server/index.mjs","require":"./dist/server/index.js","default":"./dist/server/index.js"}},"scripts":{"build":"strapi-plugin build","test:ts:back":"run -T tsc -p server/tsconfig.json","test:ts:front":"run -T tsc -p admin/tsconfig.json","verify":"strapi-plugin verify","watch":"strapi-plugin watch","watch:link":"strapi-plugin watch:link"},"dependencies":{"@dnd-kit/core":"^6.3.1","@dnd-kit/sortable":"^10.0.0","@strapi/design-system":"^2.0.0-rc.28","@strapi/icons":"^2.0.0-rc.28","react-intl":"^7.1.11"},"devDependencies":{"@strapi/sdk-plugin":"^5.3.2","@strapi/strapi":"^5.19.0","@strapi/typescript-utils":"^5.17.0","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","prettier":"^3.6.2","react":"^18.3.1","react-dom":"^18.3.1","react-router-dom":"^6.30.1","styled-components":"^6.1.19","typescript":"^5.8.3"},"peerDependencies":{"@strapi/sdk-plugin":"^5.3.2","@strapi/strapi":"^5.9.0","react":"^18.3.1","react-dom":"^18.3.1","react-router-dom":"^6.30.1","styled-components":"^6.1.19"},"strapi":{"kind":"plugin","name":"sortable-entries","displayName":"Sortable Entries","description":"A Strapi plugin that enables drag-and-drop sorting of entries within a collection type."},"_id":"@ahmedzubairu-lc/strapi-plugin-sortable-entries@1.0.0","gitHead":"ec80325f80bf7fbcbf78b4bd9017d6f1ff4f3370","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-07Zf0McWGTJufkzexPuqMm+Ca2E/Y0L7l3ShjZf2LxTx40h4dGyg04tAudXMv77dThOFHJLRoZIFcasLYLMIkQ==","shasum":"a8d0604a1735ffdea2fb674c0e8a985147781637","tarball":"https://registry.npmjs.org/@ahmedzubairu-lc/strapi-plugin-sortable-entries/-/strapi-plugin-sortable-entries-1.0.0.tgz","fileCount":3,"unpackedSize":6220,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCROQxI7L+ATbXDRmlm/5l3rRgNOELaG+H7bNnUTxKOVAIhAKksBpFLH9xVtBxuPkaP3zB8V2Np5JEjhDwqfjmvrgtN"}]},"_npmUser":{"name":"ahmedzubairu-lc","email":"ahmedz@layercake.cloud"},"directories":{},"maintainers":[{"name":"ahmedzubairu-lc","email":"ahmedz@layercake.cloud"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/strapi-plugin-sortable-entries_1.0.0_1753628797824_0.9415093638462793"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-27T15:06:37.731Z","1.0.0":"2025-07-27T15:06:38.024Z","modified":"2025-07-27T15:06:38.323Z"},"maintainers":[{"name":"ahmedzubairu-lc","email":"ahmedz@layercake.cloud"}],"description":"A Strapi plugin that enables drag-and-drop sorting of entries within a collection type.","keywords":["strapi","plugin","sortable","entries","drag","drop","order","sort"],"author":{"name":"ahmedz@layercake.cloud>"},"license":"MIT","readme":"# Strapi Plugin: Sortable Entries\n\n<img src=\"./assets/example.gif\" alt=\"Example\" />\n\nA Strapi plugin that enables drag-and-drop sorting of entries within a collection type.\n\n## ⏳ Installation\n\nInstall with NPM.\n\n```bash\nnpm install strapi-plugin-sortable-entries --save\n```\n\nInstall with Yarn.\n\n```bash\nyarn add strapi-plugin-sortable-entries\n```\n\n## 🔧 Usage\n\n### 1. Configure the Plugin\n\nAdd the following configuration to your `config/plugins.ts` file. Create the file if it doesn’t already exist:\n\n```ts\nexport default {\n  // …\n  'sortable-entries': {\n    enabled: true,\n  },\n};\n```\n\nThen restart the app to apply the changes.\n\n### 2. Use in the Admin Panel\n\n1. Add a field named `sortOrder` of type `integer` to the collection type you want to make sortable.\n\n2. Configure the view of that collection type:\n   - Set `sortOrder` as the **Default sort attribute**.\n   - Choose **ASC** as the **Default sort order**.\n\n3. To start sorting entries, click the **Drag** icon located next to the **Settings** icon in the top-right corner.\n\n4. A modal will appear, allowing you to drag and drop entries into your desired order.\n   - The displayed title for each entry is the **Entry title** defined in your collection type.\n   - You can configure the entry title by editing a single entry and selecting **Configure the view** from the three-dot menu (`...`).\n\n5. Click **Submit** to save the new order. The modal will close and the list will refresh to reflect the changes.\n\n### 3. Use in the Frontend\n\nTo 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:\n\n```http\nGET http://localhost:1337/api/products?sort=sortOrder\n```\n\n- `products`: The name of the content type you want to fetch.\n- `sort=sortOrder`: Sorts the results by the `sortOrder` field in ascending order. Append `:desc` for a descending order.\n\n## 📸 Screenshots\n\nBelow are screenshots from an example application using this plugin to sort products.\n\n<a href=\"./assets/content-type-builder.png\"/><img src=\"./assets/content-type-builder-thumb.png\" alt=\"Add a sort order field to the content-type.\" /></a>&nbsp;&nbsp;<a href=\"./assets/content-manager-configure-the-view.png\"/><img src=\"./assets/content-manager-configure-the-view-thumb.png\" alt=\"Select the order field as the default sort attribute.\" /></a>&nbsp;&nbsp;<a href=\"./assets/content-manager-list-view.png\"/><img src=\"./assets/content-manager-list-view-thumb.png\" alt=\"List view, sorted by the sort order field.\" /></a>&nbsp;&nbsp;<a href=\"./assets/content-manager-list-view-sort-entries.png\"/><img src=\"./assets/content-manager-list-view-sort-entries-thumb.png\" alt=\"Sort entries modal.\" /></a>\n","readmeFilename":"README.md","_rev":"1-29ca1c306caa46a6ebf8c9650b29652f"}