sindu12jun / table-dragger Goto Github PK

View Code? Open in Web Editor NEW

748.0 34.0 127.0 1.46 MB

Turn your old table to drag-and-drop table with columns and rows sorting like magic!

Home Page: https://sindu12jun.github.io/table-dragger/

License: MIT License

JavaScript 68.74% CSS 2.91% HTML 28.35%

drag sort sort-columns drop-table js table animation order sortable sorting

table-dragger's People

Contributors

Stargazers

Watchers

Forkers

dqwdqwdqw bwin58 messixing maxxuxu wenwangzhishang abcooclay yutianmengmeng leandroaps lc11235 lol666666 jianchang512 gregoor lidaiu0 xingwujie resfront avivijiang chenghuifang sasha-lin cybernetics nerona umesh-naik qp0910 lezi dut3062796s iandreyev miqureshi iamyujan awesome-javascript umarmughal 51sourcecode wei-a fsdn dreamyeah borisyan alex-xd raffel storm-spirit yeliex lardern tathaibinh darkali 00ernest00 lirongfei123 stonecypher clitorio loki315zx sallyone chp123 ahmed-m-hussain lahrachtdi dactilo lj-415 sarawebdev napoleonqinxiaofu alshakero shebingth codersaiful paragajency kennethokwu youngwiz2000 gerbesf randy-ran methikas yulu roark runebaas trileuco gsferoz mjndemo paulocesarpcfj rmsgit clover0 maml897 maksim-at-usa kaldur123 mbeaulne kau1992 agilenorth vivek365 loronix xjx79 bugrasercanseker dorese koderhtml cschaepe markgor lindon88 honsa misur fauno mayurdhvajsinh-gohil41 houdada dogskool herosugi profanis lame13 balajimanikandan melkontech hazemsaeed danyill

table-dragger's Issues

Prevent both header row and header column from being moved

Very nice library!

I have a table where the first row and first column are headers and need to be fixed. I am close, but could only do one or the other based on whether I apply column or row mode first. See https://output.jsbin.com/papohan/1. I also tried free mode, however, it did not produce the desired results. Any thoughts?

Thanks

Add supported browsers to readme

Thanks for an awesome plugin.
Please add supported browsers to the readme.

Malfunction when table is in a div with display:grid

When I try to drag in a table that is in a div that is display:grid, it is impossible to drag elements which are not visible when scrolled all the way to the top. As soon as the with drag even first, suddenly the entire table appears to be scrolled back up to the top (although the scrollbar remains in the unscrolled position), and it is impossible to scroll down past the first screen.

id "test" is what I am putting the table-dragger on using:

var dragger = tableDragger(tab, { mode:"row", onlyBody:true, animation: 300 })

Here is an example of the HTML:

I took three screenshots. First, before I started to drag. I am getting ready to drag TEST23:

This is is right after the drag started. Suddenly TEST23 is up between TEST1 and TEST2 at the top, despite the scrollbar being unchanged:

Next, I had dragged slightly to the right and down. A ghost of TEST23 can be seen down where it's supposed to be. However, if I drop it does not wind up where the ghost is, instead it gets dropped wherever the copy in the table is. In the screen shot below if I drop at this point it winds up between TEST1 and TEST2. But TEST30 is the lowest visible element and the lowest element I can drop it below - it is impossible to arrange it lower than that. Depending on where the element initially was, for elements far enough down the list (e.g. after TEST30) it is impossible to move them any lower, so for instance it's impossible to move any element to the bottom in any number of moves, because once it gets past TEST30 it can't go any further.

IE support

Row moved

This information does not help to understand witch row was moved console.log(drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode})
So how to update sorting on server side?

after filtering and sorting,data is mixing up in columns

New Version.

Hello.
NPM contains version 1.0.3. But current development branch has a little bit different files structure. I'm wondering, can I rely on the same interface and how soon the new version will be published?
Thanks.

Source Code read help

Hi ,
I want to code my own simple table drag cause some reason,And I have read all of this project code, But I find it's hard for me to understand code design.Do you have any other docs which can help me to understand your code and design better?

tks

Weird behavior on latest firefox

When dragging a column the visual effect stops immedialty, and I have to release the mouse button, to get visual feedback again, and then I have to click to drop the column table !

Here is a jsfiddle with an example https://jsfiddle.net/kjaugcqk/

I don't know, may be it's an issue with firefox and not your plugin ??

option to move multiple rows at once

My table is displaying a tree layout (child nodes are indented in one of the columns). It would be nice if there was some way to specify ranges of rows that belong together, such that if the first row in a group is dragged, all rows in the group are dragged together. The groups could not be exclusive, because for instance if I have several levels of nesting, if I drag the top level it should also drag all the levels under it, but if I drag the second level it shouldn't drag the top level above it, just itself and the levels under it.

import table-dragger in vue doesnt work

versions:

table-dragger:"^2.0.1"
vue:"^2.5.7"
nodejs:"10.15.3"
npm:"6.10.0"

use:

demo.vue

...
import tableDragger from "table-dragger"
...
var el = document.getElementsByTagName('table')[0];
console.log(tableDragger);  // ---> {}
var dragger = tableDragger(el, {
      mode: 'row',
      dragHandler: '.handle',
      onlyBody: true,
      animation: 300
});
// Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_3_table_dragger___default(...) is not a function at

Selector by class with multiple tables

I got multiple tables that i pass to the view dynamically, so how can i initialize it using a class selector?

click event throws error in 2.0.2

I updated table-dragger in an AngularJS application to v2.0.2 to address IE compatibility issues. After updating, click events are throwing an error that blocks future events. Dragging and dropping works, all events fired by table-dragger work as well.

Setup

component template

<table
    id="report-table"
    class="table report-table"
    ng-class="{ loading: $ctrl.isFetchingRows }"
>
    <thead>
        <tr id="report-columns">
            <th
                ng-repeat="header in $ctrl.headers.displayed track by $index"
                class="report-table-header"
            >
                <span ng-bind="header.viewFieldName"></span>
                <i class="fa fa-bars report-table-drag"></i>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr
            ng-repeat="row in $ctrl.rows.displayed track by $index"
            id="report-table-row{{ $index }}"
        >
            <td
                ng-repeat="cell in row track by $index"
                class="report-table-cell"
                ng-class="$ctrl.headers.displayed[$index].modelFieldName"
                ng-attr-data-value="{{ cell.toLowerCase() }}"
            >
                <span ng-bind-html="cell"></span>
            </td>
    </tbody>
</table>

component controller

registerTableDragger = () => {    
    const element = document.getElementById('report-table');
    this.dragger = tableDragger(element, {
        mode: 'column'
    });

    this.dragger.on('drop', (origin: number, dest: number) => {
        if (origin !== dest) {
            const newHeaders = [...this.headers.displayed];
            const [colToMove] = newHeaders.splice(origin, 1);
            newHeaders.splice(dest, 0, colToMove);
            this.headers.displayed = newHeaders;
            this.onColReorder({ headers: newHeaders });
        }
    });
 }

Clicking (but not dragging) one of the column headers produces this console error:

Uncaught rn {message: 'no elements in sequence', name: 'EmptyError'}
eval	@	table-dragger.js:1
setTimeout (async)		
a	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n._error	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n.notifyError	@	table-dragger.js:1
n._error	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n._error	@	table-dragger.js:1
n.error	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n._complete	@	table-dragger.js:1
n.complete	@	table-dragger.js:1
n.notifyNext	@	table-dragger.js:1
n._next	@	table-dragger.js:1
n.next	@	table-dragger.js:1
eval	@	table-dragger.js:1

As far as I can ascertain this error is being thrown by the firstDrag$ rxjs Observable

Doesn't work when tbody are created with ng-repeat

This code doesn't work for me
tbody
tr ng-repeat="item in elements"
td{{item.name}}/td
td{{item.date}}/td
/tr
/tbody

build scripts don't work

wanted to remove the webpack css loader dependency from your dist/ script (dist/ is for scripts that do not have dependencies on the underlying system, that are ready for CDN.)

couldn't. after npm install i am still unable to npm build.

John-Haugeland:table-dragger johnhaugeland$ npm install
npm WARN deprecated [email protected]: Package is deprecated, use https://github.com/deepsweet/istanbul-instrumenter-loader
npm WARN deprecated [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
npm WARN deprecated [email protected]: Use uuid module instead

> [email protected] install /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/fsevents
> node install

[fsevents] Success: "/Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> [email protected] install /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/phantomjs-prebuilt
> node install.js

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1//phantomjs-2.1.1-macosx.zip
Saving to /var/folders/g0/mp5zs14x5gjclfpxx8bqrhsc0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip
Receiving...
  [=======================================-] 99%
Received 16746K total.
Extracting zip contents
Removing /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/phantomjs-prebuilt/lib/phantom
Copying extracted folder /var/folders/g0/mp5zs14x5gjclfpxx8bqrhsc0000gn/T/phantomjs/phantomjs-2.1.1-macosx.zip-extract-1504663910464/phantomjs-2.1.1-macosx -> /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/phantomjs-prebuilt/lib/phantom
Writing location.js file
Done. Phantomjs binary available at /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs

> [email protected] install /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/chromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.32/chromedriver_mac64.zip
Saving to /var/folders/g0/mp5zs14x5gjclfpxx8bqrhsc0000gn/T/chromedriver/chromedriver_mac64.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4704K...
Received 5084K total.
Extracting zip contents
Copying to target path /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/chromedriver/lib/chromedriver/chromedriver
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of sinon@^2.1.0 but none was installed.

added 1120 packages in 37.159s
John-Haugeland:table-dragger johnhaugeland$ npm run build

> [email protected] build /Users/johnhaugeland/projects/crop6/node_modules/table-dragger
> webpack --progress --hide-modules --config  webpack.build.min.js && webpack --progress --hide-modules --config  webpack.build.js

module.js:491
    throw err;
    ^

Error: Cannot find module '/Users/johnhaugeland/projects/crop6/node_modules/table-dragger/webpack.build.min.js'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at module.exports (/Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/webpack/bin/convert-argv.js:80:13)
    at Object.<anonymous> (/Users/johnhaugeland/projects/crop6/node_modules/table-dragger/node_modules/webpack/bin/webpack.js:39:40)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack --progress --hide-modules --config  webpack.build.min.js && webpack --progress --hide-modules --config  webpack.build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/johnhaugeland/.npm/_logs/2017-09-06T02_12_01_411Z-debug.log
John-Haugeland:table-dragger johnhaugeland$ cat package.json

RowSpan and Colspan problem

table crash if in td or th exists attr colspan or rowspan

IE 11 and Edge don't seem to work with this library

I get exceptions running the demo and attempting to drag columns.

unit test

Add unit test

Initial Order

Hi,

Is possible to set an initial order?

What I want to do, is save a json/string with the order and next time restore the previous order.

seems to require webpack

on trying to bundle with browserify:

> browserify -r ./build/crop6.es5.js:crop6 -o build/crop6.es5.cjs.js

Error: Cannot find module '!!./../node_modules/.npminstall/css-loader/0.26.1/css-loader/index.js!./main.css' from '/Users/johnhaugeland/projects/crop6/node_modules/table-dragger/dist'
    at /Users/johnhaugeland/projects/crop6/node_modules/browser-resolve/node_modules/resolve/lib/async.js:46:17
    at process (/Users/johnhaugeland/projects/crop6/node_modules/browser-resolve/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/johnhaugeland/projects/crop6/node_modules/browser-resolve/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/johnhaugeland/projects/crop6/node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/johnhaugeland/projects/crop6/node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/johnhaugeland/projects/crop6/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:152:21)
npm ERR! code ELIFECYCLE

is there a way to use this library where i can just handle the css myself?

Not working with IE11

I have added table-dragger version 1.0.2 into my react project. It is working perfect with chrome but not with IE11. This is really nice library, so i want to resolve this issue ASAP. Please help, its urgent.

Thanks for your awesome work.

Install table-dagger without import

I really like your demo especially the motion when dragging the columns.

But is there a way to use the script without having to do import tableDragger from 'table-dragger

The doc say "easily add drag-and-drop sorting to your table without jQuery", but if you need a build tool to make the script work, I think you must remove "easily" from the title ;-)

CSS styles on table

Hi there,

I've been having some trouble regarding table CSS styles.
The probem is actually solved on my end, I just wanted to throw out that the documentation should specify somewhere how CSS should be written.

For instance, table styles should target table by class, not id or some inheritance, otherwise styles will not be added the dragging rows.

Other example: some bootstrap classes may conflict with drag and drop features (mt-5 for example that gives a certain amount of margin on the table actually adds margins to the dragging row).

Make dragula-with-animation an external dependency

First of all, I love this plugin!
In our current project, I'm required to provide table row resequencing feature. With this plugin I was able to do that with one hand tied behind my back :D. I'm also required to provide drag and drop of items in lists, all the while keeping download size to a minimum.
I saw table dragger requires dragula-with-animation to work, but packs it internally. So it's there but not there, if you catch my meaning.

Is it possible to make table dragger require dragula-with-animation as an external dependency?
Otherwise I'll end up having a duplicate dragula-with-animation plugin added to my solution.

Thanks in advance.

How do you handle dynamically generated rows?

This is great plugin! But, When I generate the row dynamically, I found that some table rows were invalid

If there is a Horizontal scroll then the drag and drop does not work

Thanks for a very good plugin it works very nicely there is just on exception where I got stuck
Add multiple columns so that you have horizontal scroll (overflow-x:true) .
When you start to drag the column beyond the visible scroll view the fakeColumn does below the table and it does not work.

Do you know why that happens.
@sindu12jun

Fix specific td in a table - not to swap while dragging.

While dragging another td in a table which was configured as table-draggable, specific td should not be draggable and droppable. I need that to be fixed.

Please refer this link, https://output.jsbin.com/papohan/1

Please fix any one column (first or last) to be pinned. not to be moved while swapping other td's in table.

Getting the entire new row order

In the event trigger, when I move one row, I am able to get the new index of the same, but due to that, the other row positions also change.
How do I fetch the new indexes of all the rows?

Remove the console.log

Dear,

Could you please remove the line: ' console.log' calls ?
That makes appear text in the console to each drag (I have actually the npm version).

Thank you.

Dynamically Injected table Column, is not draggable

Excellent piece of code but there is a Problem. Dynamically Injected a table Column, is not draggable. I insert table Column with Class name "handle sindu_handle" but it didn't work, Anyone Have any Suggestion or fix for this.
regards.

Adds a handle to the table head even when onlyBody is set to true

The class sindu_handle is added to the first column even when onlyBody is set to true.

Cannot read property 'CustomEvent' of undefined: Angular 8

I am getting an error below in my angular 8 application
Uncaught TypeError: Cannot read property 'CustomEvent' of undefined
at Object. (table-dragger.js:4098)

I am using Typescript : 3.5.3
It works okay with Angular 6 (typescript: 2.5)
just wondering if you have any idea what can cause this error

thanks

Table embedded inside another table

Awesome piece of code, I could not even begin to understand it.
However, I find I cannot get it to work properly if tableDragger() is passed a table that is embedded inside another table. The rows jump to the top of the whole window while they are being dragged, and cannot be moved to a new position.
I'm after creating a large table with draggable rows at different levels.
Any reason that would not work?

Tablet - onlyBody- unable to drag to top line

Greetings.

When setting table to onlyBody:true unable to drag row to top row when using chrome on android tablet.
Works fine in desktop browser.

Thank you in advance for your consideration

unable to set global variable or to call other method inside "dragger.on(event)"

dragger.on('drop', (from, to, el, mode) => {
console.log(drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode});

    this.form = from; // unable to set global varibale.
    this.to = to; // unable to set global varibale.
    this.tableSort(from, to); // unable to call other methods

})

当表格出现滚动条时的一些问题

您好！这个库对我来说非常有帮助，感谢分享！但是在使用的时候发现一些问题：

当表格数据量过多时会出现滚动条，这时拖动过程中表格的宽高会向右向下延伸到屏幕尽头，研究了一下可能是因为拖动的时候对新生成的 .sindu_dragger这个元素只做了位置的处理而没有做宽高的处理，无法使它的大小和原表格保持一致。我在源码的2522行后增加了两行代码，情况会好一些，但仍期望官网能改善一下

     //  原代码块
	   (0, _util.css)(el, {
	        position: 'absolute',
	        top: originEl.offsetTop + 'px',
                left: originEl.offsetLeft + 'px',
	    });

     //  我修改后
	   (0, _util.css)(el, {
	        position: 'absolute',
	        top: originEl.offsetTop + 'px',
                left: originEl.offsetLeft + 'px',
                width: originEl.parentNode.offsetWidth + 'px',
                height: originEl.parentNode.offsetHeight + 'px'
	    });

拖动时表格的背景会变成红色，个人感觉将源码中第113行中的red改为rgba(255,255,255,0.2)会好一点
建议在有滚动条的情况下，拖动的行或者列的宽高应该和原始行或者列的宽高保持一致，否则镜像元素会比原始元素还要宽（高），超出了table的容器。建议将源码中的._mirror元素的overflow设置为hidden（3169行），如下

 _mirror.style.overflow = 'hidden';
 _mirror.style.width = _item.parentNode.offsetWidth + 'px';
 _mirror.style.height = _item.parentNode.offsetHeight + 'px' ;

建议有滚动条的情况下，当拖动的行或者列超出table的容器时，滚动条可以跟着滚动，松开鼠标后该行或者列的位置应该是最终的滚动位置