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!

[devtud]

Thank you for the effort! Looks very promising!
If you could include also validators (eg for email, numbers, etc), and different editor types per column (eg dropdowns, date picker, etc) that would be awesome.