{"id":13808666,"url":"https://github.com/nivekcode/ng-sortgrid","last_synced_at":"2025-05-14T02:32:16.819Z","repository":{"id":38424948,"uuid":"179967502","full_name":"nivekcode/ng-sortgrid","owner":"nivekcode","description":"🧐 A grid that allows you to sort all items via drag \u0026 drop. Items can be sorted in all directions (↕️ and ↔️). You can also select and sort multiple items at the same time by pressing ctrl and click on the item.","archived":false,"fork":false,"pushed_at":"2024-07-01T17:16:40.000Z","size":5973,"stargazers_count":146,"open_issues_count":11,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-06T14:08:43.271Z","etag":null,"topics":["angular","drag-and-drop","hacktoberfest","multiselect","sorting"],"latest_commit_sha":null,"homepage":"https://kreuzerk.github.io/ng-sortgrid/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nivekcode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["kreuzerk"]}},"created_at":"2019-04-07T13:06:19.000Z","updated_at":"2024-10-07T17:53:40.000Z","dependencies_parsed_at":"2024-08-04T01:09:28.196Z","dependency_job_id":"52bf1e4d-1848-49e3-ad89-ce4fbe274f34","html_url":"https://github.com/nivekcode/ng-sortgrid","commit_stats":{"total_commits":205,"total_committers":5,"mean_commits":41.0,"dds":"0.11707317073170731","last_synced_commit":"febc20b43fc1dc2bc4dffb49f7a880ac4903c50d"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nivekcode%2Fng-sortgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nivekcode%2Fng-sortgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nivekcode%2Fng-sortgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nivekcode%2Fng-sortgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nivekcode","download_url":"https://codeload.github.com/nivekcode/ng-sortgrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273257,"owners_count":17448074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","drag-and-drop","hacktoberfest","multiselect","sorting"],"created_at":"2024-08-04T01:01:48.601Z","updated_at":"2024-11-19T00:30:57.601Z","avatar_url":"https://github.com/nivekcode.png","language":"TypeScript","readme":"# Ng-sortgrid\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![Travis build badge](https://img.shields.io/travis/kreuzerk/ng-sortgrid.svg)](https://travis-ci.org/kreuzerk/ng-sortgrid)\n[![codecov](https://codecov.io/gh/kreuzerk/ng-sortgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/kreuzerk/ng-sortgrid)\n[![angular10](https://img.shields.io/badge/angular%2010%20ready-true-green.svg)]()\n\n![Logo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/ng-sortgrid-logo.png)\n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/grid-demo.gif)\n\n- - \u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n    \u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n    **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*\n  \n    - [Ng-sortgrid](#ng-sortgrid)\n    - [Getting started](#getting-started)\n      - [Download](#download)\n      - [Apply the directive](#apply-the-directive)\n      - [React on changes](#react-on-changes)\n      - [Group sortgrids](#group-sortgrids)\n      - [Use the async pipe](#use-the-async-pipe)\n    - [Style your items on different events](#style-your-items-on-different-events)\n      - [Integrate the build in CSS](#integrate-the-build-in-css)\n    - [Scrolling](#scrolling)\n      - [Custom scroll points](#custom-scroll-points)\n      - [Scroll speed (*default 50*)](#scroll-speed-default-50)\n    - [API](#api)\n      - [Inputs](#inputs)\n      - [Outputs](#outputs)\n    - [Mobile usage](#mobile-usage)\n  \n    \u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Download\n\n```\nnpm i ng-sortgrid\n```\n\nImport the ```NgsgModule``` in your ```AppModule```.\n\n```\n  import {NgsgModule} from 'ng-sortgrid'\n  ...\n  @NgModule({\n    imports: [BrowserModule, NgsgModule],\n    //...\n  })  \n  ...\n```\n\n## Apply the directive\nLoop over your elements with *ngFor. 🛎️ the items needs to be an array. Alternate you can also use the async pipe to pass in your items.\n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs1.png)\n\nApply the ngSortgridItem directive\n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs2.png)\n\n## React on changes\nIn most cases you are interested in the new sort order. Often you want to store them in local storage or even send them to the backend. To do so the following two steps are needed in addition to the \"Getting started\" step.\n\nPass your items to the directive via the ngSortGridItems input.\n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs3.png)\nReact on the 'sorted' output event. The `sorted` output event emits a `NgsgOrderChange` which contains the `previousOrder` and the `currentOrder`\n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs4.png)\n\n## Group sortgrids\nIn case you have more than one sortgriditem on the page you need to group the sortgriditems to avoid dropping drags from one group in another group.\nPass in a unique name to the ngSortGridGroup input\n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs5.png)\n\n## Use the async pipe\nYou can also use the async pipe to display items\n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/gs6.png)\n\n# Style your items on different events\nThe ng-sortgrid adds different classes on different events to your items. You can either use those classes to style the appereance\nof your items on certain events or you can include the build in CSS from the ng-sortgrid library.\n\n## Integrate the build in CSS\nTo integrate the built in Stylesheet just import in in your angular.json.\n\n```\n    \"styles\": [\n              \"node_modules/ng-sortgrid/styles/ngsg.css\",\n            ],\n```\n\nAlternative you can provide custom styles for the different classes listed bellow\n\n| Class             | Description                                                                                                                                    |\n|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|\n| ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted                                                          |\n| ng-sg-dropped     | This class is added as soon after you drop an item. The class will be on the item for 500 milliseconds before it gets removed                  |\n| ng-sg-selected    | This class is added when you press the CMD or the Ctrl Key and Click on an item. It indicates which items are selected for the multi drag\u0026drop |\n| ng-sg-active      | This class is added when dragging item| |\n\n# Scrolling\nThe ng-sortgrid has a *autoScroll* flag which you can use to enable autoScroll. If you enable autoScroll the screen will start to scroll \nin the following scenario. \n\n![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/scrolling.png)\n\n- If you drag an element in the top 50px of the screen\n- If you drag an element in the bottom 50px of the screen\n\n## Custom scroll points\nSometimes its not enough to only scroll once you drag over the top view port border. Imagine that you have a fixed navbar \nat the top of your page. In this case you need to scroll once you drag an element over the navbar.\n\n## Scroll speed (*default 50*)\nThe *scrollSpeed* property accepts a number and allows you to specify the scrolling speed.\n\n[Check out the scroll demo](https://kreuzerk.github.io/ng-sortgrid/scrolling)\n\n# API\n\n## Inputs\n| Value             | Description                                                                                                                                    | Default|\n|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|--------|\n| ngSortGridGroup: string | Groups a grid - avoids that items from one grid can be dragged to another grid                                                         |undefined|\n| ngSortGridItems: any[] | Sort grid items. Pass down a list of all your items. This list is needed to enable the sorting feature.|undefined|\n| autoScroll: boolean | Flag to enable autoscrolling|false|\n| scrollPointTop: number | Custom top scrollpoint in pixels|if autoscroll is applied we start scrolling if we pass the top border|\n| scrollPointBottom: number | Custom bottom scrollpoint in pixels|if autoscroll is applied we start scrolling if we pass the bottom border|\n| scrollSpeed: number | Scrollspeed, the higher the value, the higher we scroll.|50 - only applies if autoscrolling is on|\n\n## Outputs\n| Value             | Description                                                                                                                                    | Default|\n|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------|--------|\n| sorted: EventEmitter\u003cNgsgOrderChange\u003cT\u003e | Emits an event after we sorted the items, each event is of type NgsgOrderChange. The NgsgOrderChange contains the previousOrder and the currentOrder. Both are freshly created arrays.                                                         |undefined|\n\n# Mobile usage\n\nIf you want to use those events on mobile you probably have to use some polyfills in order to emit all the needed events. Including this polyfill in your app should do the trick. https://github.com/timruffles/mobile-drag-drop.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/GonCarvalho98\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/103566451?v=4?s=100\" width=\"100px;\" alt=\"Gonçalo\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGonçalo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/kreuzerk/ng-sortgrid/commits?author=GonCarvalho98\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!","funding_links":["https://github.com/sponsors/kreuzerk"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnivekcode%2Fng-sortgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnivekcode%2Fng-sortgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnivekcode%2Fng-sortgrid/lists"}