search

olifolkerd / tabulator

Interactive Tables and Data Grids for JavaScript
http://tabulator.info
MIT License
6.71k stars 818 forks source link

Few issues and ideas #545

Closed jsEveryDay closed 7 years ago

jsEveryDay commented 7 years ago

2 years ago I needed a good grid for a project finance related. I mostly needed features like progress bars, on/off switches etc etc. exactly what tabulator has. After researching for 3 months i settled with Kendo and I had to build most of those features myself. Regardless, ill try to contribute as much as I can.

Issues

  1. Dropdowns Every table grid out there has it's own issue with them. But this is mostly css related, just noticed that dropdown on main page works perfect but all the ones on http://olifolkerd.github.io/tabulator/examples/ are a off in terms of dimensions and interactivity.
  2. Column Resize This is very weird. After clicking around a bit, when resizing "Favorite Colour" the cursor binds and never releases. Like, as we speak, I can switch tab form github to tabulator and if I move the mouse left and right anywhere on the screen it resizes the column continuously. I can click on anything else, works fine, while that column keeps dragging along as soon I pass it's x(axis). Yes I was able to reproduce it, just click around randomly for 20 sec on different tables then resize "Favorite Colour" (maybe other columns as well). First time it happened on "Selectable Rows" , second time "Movable Rows". Even if I launch the dev tools CTRL + Shift +J the cursor still won't unbind. Like it's missing a stoppropagation() or preventdefault or something.

Ideas

  1. Full row highlight based on a value. Reorder / resort on change. Like let's say im organizing things by good or bad, green or red rows. First they are neutral, upon assigning value, lets say "false" > row becomes red and goes to the bottom, and then on top of those come the green rows and then the neutral. Very useful in corporate / real life scenarios. (for now, Tabulator is good enough tho) compared to others.
  2. Date Picker > Calendar
  3. Dropdown + Input = Combo Where dropdown allows manual value entry, after which it is automatically added to the dropdown values list. Similar to dHtmlxCombo.
  4. Multi column search / filter. Or even all columns... but that's inefficient. It is usually 2 or 3 columns that the user would wont to search given a big report. It is too time consuming to search by column therefore having to do the same thing 3 times.
  5. Integration with a Calendar (maybe) ? What if you could instantly change the view from tabular to calendar where everything is plotted by the dates and maybe hoovering over "events" displays all the details in a tooltip....

Hope this helps, I've had to deal with all these stuff back in Angular 1.0 days.

jsEveryDay commented 7 years ago

Just reproduced it again. Column Resize issue.

Console error: (index):3011 Uncaught TypeError: Cannot read property 'getData' of undefined at Object.rowMoved ((index):3011) at r.moveRow (tabulator.min.js?i=1:1) at _.endMove (tabulator.min.js?i=1:4) at HTMLBodyElement.dispatch (jquery-2.2.4.min.js:3) at HTMLBodyElement.r.handle (jquery-2.2.4.min.js:3) rowMoved @ (index):3011 r.moveRow @ tabulator.min.js?i=1:1 _.endMove @ tabulator.min.js?i=1:4 dispatch @ jquery-2.2.4.min.js:3 r.handle @ jquery-2.2.4.min.js:3

olifolkerd commented 7 years ago

Hey,

Thanks for the info, could i ask for a few more details to help locate where the issues are coming from:

Thanks for the console log there, there was a typo in the event handler binding in one of the examples, this has now been fixed.

With regards to your ideas, the good news is Tabulator can already do a lot of them,

  1. You can already change row styling based on the data using the Row Formatter

  2. There are loads of great date picker widgets out there already and you could use your own Custom Formatter to add one to your tables. the reason this isnt included is because there are a lot out there to choose from, and people will most likely pick one that fits in with the rest of their site, so i dont want to reinvent the wheel or force choices on people.

  3. This could also be completed with a Custom Formatter at present, though i may look at adding something like this, i am trying to only include standard HTML element as standard and allowing users to add their own functionality to meet their needs.

  4. You can already search by multiple columns by using the Filter Functions you can either apply multiple filters one at a time, or write a custom filter function to filter the columns you want. most Tabulator users will combine this with an input element and a change event to trigger filtering of the table. I will improve the filter data example to add an example of this in action.

  5. It is not in the roadmap to turn tabulator into a calendar, there a number of great plugins out there for managing that and i would rather that tabulator remains focused on being an awesome table, and let the calendar widgets focus on being awesome calendars.

Thanks for the great feedback,

let me know if you have any other ideas

Cheers

Oli

jsEveryDay commented 7 years ago

Wow thanks for finding the time to write all this, I didn't expect this. Again, I found Tabulator a few hours ago, I haven't really tried the code, I was just judging by the examples on your website.

Dropdown works fine, it's just a minor css fix. Maybe is not even worth mentioning. See here http://olifolkerd.github.io/tabulator/ is good 2017-08-31_19-33-07 But on all dropdowns on http://olifolkerd.github.io/tabulator/examples/ notice the double line on select? and the dropdown doesn't respect the full height of the cell. 2017-08-31_19-30-31

The column resize issue has been FIXED. Now that I started recording, I am not able to reproduce the issue. But yet again I see the mouseup and other mouse events are firing properly on the console.

Specs:

DatePicker - yes there's a ton out there, you can find some as old as 1995 lol. What I meant to say was that from experience, when trying to integrate the datepicker on grids there would always be some sort of a hickup. Even on grids that already included their own datepicker. But Tabulator being jquery should be very easy to do as you said. My bad experience was with Ng-Grid and Dojo / dHtmlx and this was years ago.

I'll def contribute on this project, I just need to start using the code first. I need a cool idea to motivate me and get me started lol. I'm thinking perhaps a live feed from google finance of stocks or indexes ... lmk any live integration ideas the community may find beneficial or that you may want to publish as examples.

jsEveryDay commented 7 years ago

i would like to mention that Tabulator is the best open source code ready for deployment I have found

olifolkerd commented 7 years ago

Thanks for the video there, big help.

That was an issue with the custom gender editor used on the example page, i have updated the editor definition to make it respect the line height and it should now be fixed.

Cheers

Oli