AG Grid example with table data edit support

[devtud]

In the company I work for we'd need an easy way to show a data frame to the users which he/she can edit and submit to the server.

The data from that data frame is gathered from many sources and may be a very complex work to detect changes and push them to the correct databases. Wondering if this project could be an appropriate solution for such use case.

Any advice is appreciated!

[violit-dev]

Hi! Thanks for the feedback. 🙌

Yes, this is a perfect use case for Violit. I actually built a quick PoC for your exact scenario, merging data from disparate sources, editing them in one view, and routing updates back to the correct databases.

Here is a demo of it in action:

I am planning to polish this code and add it to the official examples in the repository soon.

For now, here is a minimal snippet to help you understand the core concept. The key is that app.data_editor returns a reactive state, which you can access directly in your save callback to handle complex backend logic.

# Pseudo-code demonstrating the pattern

# 1. Load and merge your complex data
merged_df = load_data_from_multiple_sources()

# 2. Render the editor
# 'edited_state' holds the realtime changes from the UI
edited_state = app.data_editor(merged_df, key="editor")

# 3. Define the Save Logic
def save_action():
    # Access the modified data directly from the state
    new_data = edited_state.value
    
    # Your custom logic: Compare changes and push to specific DBs
    sync_changes_to_databases(original=merged_df, new=new_data)
    
    app.success("Databases updated!")

# 4. Bind the callback
app.button("Save Changes", on_click=save_action)

Stay tuned for the full example code!