I have a question about this. The ‘input’ component does not seem to be defined anywhere? So, where is that coming from?
Hello @pjaol
l just noticed a problem with the new version. Editing a cell doesn’t seem possible anymore. Even when using your example code:
{ “title”: “Name”, “field”: “name”, “width”: 150, “headerFilter”:True, “editor”:“input”},
If I try to edit that cell, the input box appears briefly and then disappears. Same with ‘textarea’. Any idea?
Also, I don’t think you implemented select/unselect all buttons did you? I tried to do some DIY but failed (multiRowsClicked can be read but not applied apparently).
Thanks for the support.
N
I noticed the cell yesterday, didn’t have time to test. But suspect that there’s a conflict between milti-row selection check box and individual cell clicking.
I’m going to take a look at it today.
The select / unselect all is in the current version of usage.py, it’s a column formatter
I did a couple of pushes yesterday, so you might need to update.
columns = [
{"formatter":"rowSelection", "titleFormatter":"rowSelection", "hozAlign":"center", "headerSort":"false"},
....
]
@mail8 @ndupuis good catch - thank you!
Just updated the documentation and usage.py example, should be consistent now
np. I’m rebuilding the whole readme.md to my taste :-). Let’s see if you like it, I’ll push soon.
About the row selection, I’ll stay tuned ! thanks
Ohhh this is wonkey
So it seems that selecting the row, creates a highlight that disables the editor on the mouseUp
Clicking and holding the mouseDown allows you to edit and that then kicks off the cellEdited callback.
Yeah somethings afoul in that row selector
Yep
rowSelectionChanged Tabulator callback is breaking it
And another reply to myself – I need to get a hobby
Alright I’ve tracked this issue down to something I’m not sure how to fix
as i’m calling
rowSelected = (data, row) => {
this.props.setProps({multiRowsClicked: data })
}
To send data back to dash, it’s causing render() on the component to get called again, causing the editor to disappear.
This also looks like it causing the filters to get reset after a filter occurs.
Does anyone know how call setProps without render being invoked?
Ok this should be resolved now, i’ve used the shouldComponentUpdate method to turn on/off render in different situations.
And it appears to work.
To edit a cell, with selectable: true, a double click will enable edit.
Single click when selectable: true
Try it out and let me know if that makes sense and is an expected behavior.
It felt right at the time, but appreciate any feedback
This solution also resolved an issue with filters disappearing
I tried it，still hope single click can activate the editing function
To anyone still watching this thread
@Emil awesome pull request is committed and I’ve added a little more based on it
Any tabulator callback can now have client side javascript from dash-tabulator
Just add a js file to the assets folder containing you custom code
window.customNamespace = Object.assign({}, window.customNamespace, {
'tabulator' : {
myMethod: function (tabulator-callback-args, table) {
....
table.props.setProps({callBackName : someValue});
},
myOtherMethod: .....
})
These will function similar to tabulator examples http://tabulator.info/docs/4.8/callbacks
The only difference is the last parameter is the dash-tabulator object
Within python
from dash_extensions.javascript import Namespace
ns = Namespace("myNamespace", "tabulator")
options = {"columMoved" : ns("myColumnMoved")}
app.layout = html.Div([
dash_tabulator.DashTabulator(
id='tabulator',
options=options)])
2 Likes
Is there a way to get the current ordering or sorting? I saw the ‘dataSorting’ property, it this returns only None. I want to save the data in the current ordering of the table.
@pjaol Hi there! Thanks for all you did recently. Really helpful, I started using this component in my apps, people like it. I hope you don’t mind regular feedback…
-
The selection kinda works. I’m only using multiRowsClicked, the rowClicked looks unreliable to me. There’s one annoying thing around this. Say you have lot’s of rows and columns and you want to edit a cell. You need to get to that cell (scrolling right, scrolling down), then click on the cell. Then the tabulator takes you back to the top/left and you have to go to that cell again to finally edit it. Is there something you can improve here? It drives my users crazy :-).
-
Is there a way for the user to hide/display columns? Like in the Dash Table component. I looked at the JS tabulator and it’s not even clear to me…
-
I’m displaying the number of rows in the table after filtering. It works using dataFiltered. I’m just concerned by the amount a data round triping. All the data is passed while I just need a length… I’m of course not asking to change dataFiltered but maybe introducing something much lighter to count what’s in the table at a certain point in time.
thanks again! Have a nice day!
Nicolas
For #1 try updating to the latest version from last week where I added the single click to edit
pip install dash-tabulator -U
It appears to be working at least on chrome
For #2 checkout Tabulator
I’d suggest taking a look at how Column toggle widget · Issue #1745 · olifolkerd/tabulator · GitHub and context menu’s
Tabulator
For #3 take a look at renderStarted / renderComplete Tabulator
1 Like
Thanks @pjaol . The new update works fantastic regarding selection/editing, thanks for that!
I tried to understand how to toggle columns and add context menu, but I don’t see how. Do you have an example code for Python?
I think I found a bug also. Say that you have 10 records of data and you filter some with the header filter. Say that only 2 records remain. If then you click the select all tickbox, then multiRowsClicked returns the whole unfiltered data (the 10 records instead of the 2 that you see selected). I don’t see a workaround on my end…
Thanks for your support, really appreciate this.
Cheers
Nicolas
Hey @pjaol, one more thing I noticed. I don’t know wether it’s intentional or not (a bug or a feature ^-^) but when I click in a cell to edit the content, the row gets selected and the multiRowsClicked event is triggered. I’m wondering if that’s useful. In my case, it wasn’t and prevented cell editing in fact as it triggers the multiRowsClicked event. I think the cellEdited event should be the only one called once you click outside of the cell… Just my opinion. No harm because I’m going around that with a UI trick but maybe something to consider.
cheers
N
I now replaced all my data tables with tabulator.
… it would be nice to have an optional ‘New Row’ button.
1 Like
Hi all,
I need a bit of help figuring out how to trigger “table.redraw()” on specific tabulator table on the page from a client-side callback.
I tried everything I could, but I don’t see a way to get to the “instance” of the tabulator object from an “outside” javascript. I can do it from row or cell formatters, but this causes an infinite loop.
Any help is much appreciated,
Thank you,
Hi guys!
How can I freeze the first row so it always stay on top?