Hi I was wondering if there is a way to edit the original data of a datatable without losing the whole input ( e.g the original input data is 0.345 but I want it to be 0.34 so I only want to delete the 5 at the end) / if there is a way to correct the input without having to rewrite the whole input.
Why don’t you round the data to the decimal you’re wanting to display before displaying in table?
If it’s just a specific column you want to round do
df['Column1'] = df['Column1'].round(2)
or if you want to round the whole df you can do
df = df.round(2)
If you want to keep the original df with the full values as it’s used somewhere else in your script/app then copy the df when do you do rounding step
dff = df.copy().round(2)
Thanks
Payton
Hey Payton,
Thanks for your answer 
but I would like to make the editing process easier. Therefor i want to be able to delete single values. I would want it to be like you‘re google search( delete the whole input or just change a view characters)
You haven’t provided any code so I’m unsure what you’re currently doing but you can already do what you’re asking with Dash data_table
If you single click the editable cell and start typing it will delete the whole input and key in what you’ve entered. If you want to modify the existing data double click the cell
Try the first data table on this page: Editable DataTable | Dash for Python Documentation | Plotly
Key in 0.345 to one of the cells. Then when you single click it you will have the red outline, if you type now it will clear the full input
Then if you double click it goes into the cell and lets you modify any of the values
After editing with double click
Thanks
Payton
I think @Here_to_learn is trying to be able to edit mid-string, which both the double-click and the single-click only allow for editing the whole cell at a time.
The double-click gives a little nicer interface with the cursor and allowing for backspaces.
My guess is that this would take some manipulation of how the ReactJS script acts with this.
You can do that with the double click already use the arrow to navigate the values in the cell and you can delete the middle value of the string without deleting the rest of the values:
Ooo, I think that:
1 - this is not native feeling (cursor position should respond to mouse position somehow) (mousedown toggles focused)
2 - this should be highlighted on the documents
1 Like
Here is a javascript file that will do these things (Couldnt figure out the ReactJS):
- Active input cells will now copy the justification of their parent (td cell)
- Cells, even when editable will be locked until double-clicked or entering editing mode (spacebar)
- Once in edit mode, the input box is now given a white background.
- Once in edit mode, you can click inside the cell and the cursor will move to the position
- Once in edit mode, you can navigate with left and right arrows the cursor
- Up, down, enter, tab will submit your changes
- Once in edit mode, if you make a change, and you want to undo, hit ESC (once the old value is there, you will need to make an edit to for the sync) *working on this
function coolEffects() {
$(".cell-table td").on("click", function(e){
if (e.target.tagName == 'INPUT') {
if ($(e.target).hasClass('unfocused')) {
cellAlign = this.style.textAlign
newStyle = {}
newStyle['background-color'] = 'white'
if (cellAlign) {
newStyle['text-align'] = cellAlign
}
$(e.target).css(newStyle)
setTimeout(function() {
$(e.target).removeClass('unfocused')
$(e.target).removeClass('focused')
$(e.target).val(oldVal)
$(e.target).attr('readonly', false)
$(e.target).parent().find('.cell-value-shadow').text(oldVal)
$(e.target).on('keydown keyup mousedown mouseup click', function (e) {
if (e.key == 'Escape') {
$(this).parent().find('.cell-value-shadow').text(oldVal)
$(this).val(oldVal)
e.stopPropagation();
}
else if (!['ArrowUp', 'ArrowDown', 'Tab', 'Enter'].includes(e.key)) {
e.stopPropagation();
}
})
$(e.target).on("blur", function () {
this.handleKeyDown
})
}, 10)
} else if ($(e.target).hasClass('focused')) {
try {
oldVal = $('td.focused').find('.input-active').val()
setTimeout(function() {
try {
$(e.target).removeClass('unfocused')
$(e.target).removeClass('focused')
e.target.style.textAlign = this.style.textAlign
oldVal = $(this).val()
$(e.target).attr('readonly', true)
$(e.target).on('keydown', function (e) {
if (e.key == " " || e.code == "Space" || e.keyCode == 32 ) {
e.stopPropagation()
$(this).click()
}
})
} catch{}
}, 10)
}
catch {}
}
else {
try {
oldVal = $(e.target).val()
setTimeout(function() {
try {
$(e.target).find('.input-active')[0].style.textAlign = e.target.style.textAlign
$(e.target).attr('readonly', true)
$(e.target).find('.input-active').on('keydown', function (e) {
if (e.key == " " || e.code == "Space" || e.keyCode == 32 ) {
e.stopPropagation()
$(this).click()
}
})
} catch {}
}, 10)
}
catch {}
}
}
else {
try {
oldVal = $(e.target).text()
setTimeout(function() {
try {
$(e.target).find('.input-active')[0].style.textAlign = e.target.style.textAlign
$(e.target).find('.input-active').attr('readonly', true)
$(e.target).find('.input-active').on('keydown', function (e) {
if (e.key == " " || e.code == "Space" || e.keyCode == 32 ) {
e.stopPropagation()
$(this).click()
}
}) } catch {}
}, 10)
}
catch {}
}
})
$(".cell-table td").on("keyup", function(e){
try {
oldVal = $('td.focused').text()
setTimeout(function() {
try {
$('td.focused').find('.input-active')[0].style.textAlign = $('td.focused')[0].style.textAlign
$('td.focused').find('.input-active').attr('readonly', true)
$('td.focused').find('.input-active').on('keydown', function (e) {
if (e.key == " " || e.code == "Space" || e.keyCode == 32 ) {
e.stopPropagation()
$(this).click()
}
})
} catch {}
}, 10)
}
catch {}
})
}
window.fetch = new Proxy(window.fetch, {
apply(fetch, that, args) {
// Forward function call to the original fetch
const result = fetch.apply(that, args);
// Do whatever you want with the resulting Promise
result.then((response) => {
if (args[0] == '/_dash-update-component') {
setTimeout(function() {coolEffects()}, 500)
}})
return result
}
}
)
$(document).ready(function() {
setTimeout(function() {coolEffects()}, 500)
})
2 Likes