{"id":28472059,"url":"https://github.com/parallax/ddt","last_synced_at":"2025-07-01T22:30:51.688Z","repository":{"id":58219730,"uuid":"21211691","full_name":"parallax/ddt","owner":"parallax","description":"DDT (Drag and Drop Tables) is a library that adds drag and drop reordering support to HTML tables.","archived":false,"fork":false,"pushed_at":"2014-09-30T16:29:32.000Z","size":852,"stargazers_count":5,"open_issues_count":12,"forks_count":0,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-06-30T00:11:19.459Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/parallax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-25T17:12:25.000Z","updated_at":"2014-10-12T16:51:52.000Z","dependencies_parsed_at":"2022-08-31T02:01:38.781Z","dependency_job_id":null,"html_url":"https://github.com/parallax/ddt","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/parallax/ddt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fddt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fddt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fddt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fddt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parallax","download_url":"https://codeload.github.com/parallax/ddt/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parallax%2Fddt/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263046055,"owners_count":23405126,"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":[],"created_at":"2025-06-07T11:09:48.064Z","updated_at":"2025-07-01T22:30:51.667Z","avatar_url":"https://github.com/parallax.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ddt - Drag and Drop Tables (v0.6.4)\n===\n\nDDT (Drag and Drop Tables) is a library that adds drag and drop reordering support to HTML tables. \n\n**This library does not support any version of IE currently. You can track IE support at [Issue #46](https://github.com/parallax/ddt/issues/46).**\n\n## Install\n\n```\n$ bower install ddt --save\n```\n\n## Tests\n\nWhile most of DDT is not yet covered with tests (see [Issue #40](https://github.com/parallax/ddt/issues/40) for more info), there are some. We use the Karma test runner for these. To run our tests, simply run the following (you'll need gulp).\n\n```\n$ npm install\n$ gulp test\n```\n\n## Requirements\n\n - [jQuery](http://jquery.com) (Version 1.8.3+)\n - [Lo-Dash](http://lodash.com/) (Version 2.4.1+)\n - [eventEmitter](https://github.com/Wolfy87/EventEmitter) (Version 4.2.7+)\n - [RequireJS](http://requirejs.org/)\n\nAlthough DDT may work with other versions of these libaries, this use is untested and you may run into issues.\n\n## Usage\n\n```js\nrequire(['ddt'], function(ddt) {\n\tvar table = ddt.init($(yourElementHere)); \n\t\n\t// This is likely to change\n\ttable.on('reorder', function(newOrder) {\n\t    // newOrder is an array with the new order of the rows\n\t});\n});\n```\n\nAnd then just add `data-value` attributes to each of your `\u003ctr\u003e` tags in your HTML like so.\n\n```html\n\u003ctable\u003e\n\t\u003ctr data-value=\"1\"\u003e\n\t\t\u003ctd\u003eA\u003c/td\u003e\n\t\t\u003ctd\u003eB\u003c/td\u003e\n\t\t\u003ctd\u003eC\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr data-value=\"2\"\u003e\n        \u003ctd\u003eD\u003c/td\u003e\n        \u003ctd\u003eE\u003c/td\u003e\n        \u003ctd\u003eF\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n## Browser Support\n\nDDT aims to support the following browsers completely\n\n - Chrome 18+\n - Firefox (?)\n - Safari 6+\n\nWe will be supporting IE at some point in the future. Follow this development at  [Issue #46](https://github.com/parallax/ddt/issues/46).\n\nThere is currently no support for touch. We plan to investigate supporting touch some time in the future. Follow support for this at [Issue #36](https://github.com/parallax/ddt/issues/36).\n\n## Contributing\n\nDDT is written in [TypeScript](http://www.typescriptlang.org/), a statically typed pre-processor for JavaScript written by Microsoft. Because of this, all contribution must be written in TypeScript. You can compile the typescript files in the same way we do using [gulp.js](http://gulpjs.com/), like so.\n\n```\n$ npm install\n$ gulp compile\n```\n\nBesides that, please follow our standard style guide that is in place throughout the library.\n\n## API\n\nWhile there may be other symbols accessible to you, these are not documented nor standard and can change from version to version so it is advisable that you only use the API described below.\n\n### ddt.init\n\n```typescript\nexport declare function init(table: JQuery, options?: DragAndDropTableOptions): DragAndDropTable;\n```\n\nThis is how you apply ddt to a specific table. This returns an instance of the DragAndDrop class and is the only global function that you can use.\n\n#### Example\n\n```js\nvar table = ddt.init($('table'), {\n    // options\n});\n```\n\n#### Options\n\n```typescript\nexport interface DragAndDropTableOptions {\n    // Restrict drag and drop movement to the vertical access only\n    verticalOnly    ?: boolean;\n\n    // Contain the drag and drop movement to within the table\n    bindToTable     ?: boolean;\n\n    // The cursor to change to while dragging\n    cursor          ?: string;\n\n    // The attribute to get the value for each row from\n    valueAttribute  ?: string;\n\n    // The container to add the fake table row to\n    shadowContainer ?: Element;\n\n    // A custom element to contain the drag and drag movement within\n    containment     ?: Element;\n}\n```\n\n#### Defaults\n\n```typescript\n\nexport class DragAndDropTable extends EventEmitter {\n    public static defaultOptions : DragAndDropTableOptions = {\n        verticalOnly    : true,\n        containment     : null,\n        bindToTable     : true,\n        shadowContainer : document.body,\n        cursor          : 'default',\n        valueAttribute  : 'data-value'\n    };\n}\n```\n\n### DragAndDropTable.on (eventEmitter.on)\n\n```typescript\nclass EventEmitter {\n    on(evt:string, listener:Function):EventEmitter;\n}\n```\n\nThis is how you listen for events from the library. Currently the only events we have are the following\n\n ```\n  - reorder =\u003e Triggered when rows are reordered\n ```\n\n#### Example\n\n ```js\n table.on('reorder', function(newOrder) {\n\n });\n ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparallax%2Fddt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparallax%2Fddt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparallax%2Fddt/lists"}