Proposal: Enhance Pynecone with data grid functionality

[karndeb]

Hi Pynecone team, Brilliant work so far. To take datatables to the next level, we need something like javascript data grid. I have doing some research and AG Grid can be one of the options. Have also been using it in streamlit as part of its components. This solves a lot of the smaller asks and opened issues that I am seeing here. AG Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance and has no 3rd party dependencies and integrates smoothly with React as React Component

Features

Besides the standard set of features you'd expect from any grid:

• Column Interactions (resize, reorder, and pin columns)
• Pagination
• Sorting
• Row Selection

Here are some of the features that make AG Grid stand out:

• Grouping / Aggregation *
• Accessibility support
• Custom Filtering
• In-place Cell Editing
• Records Lazy Loading *
• Server-Side Records Operations *
• Live Stream Updates
• Hierarchical Data Support & Tree View *
• Customizable Appearance
• Customizable Cell Contents
• State Persistence
• Keyboard Navigation
• Data Export to CSV
• Data Export to Excel *
• Excel-like Pivoting *
• Row Reordering
• Copy / Paste
• Column Spanning
• Pinned Rows
• Full Width Rows
• Integrated Charting
• Sparklines

The features marked with an asterisk are available in the enterprise version only

Please let me know if this makes sense and should we wrap the react ag grid component. Will need help as this component looks complex

[Alek99]

Nice suggestion I'll take a look at this it may be better than gridjs. I'll get back to you on this

[ilyoungkim]

AG grid is great~

[iron3oxide]

Is there any update on this? The current datatable implementation lacks some important features IMHO; the most prominent being that you can't trigger event handlers by selecting rows/columns.

[robingie]

Any update on this? This feature is highly appreciated. It would allow us to implement many other use cases.

Maybe someone could help me out how to implement all the event handlers / callbacks. The following code at least displays the grid already.

Maybe we could take a look how it got implemented in another python project. https://github.com/PablocFonseca/streamlit-aggrid/blob/main/st_aggrid/frontend/src/AgGrid.tsx

from typing import Any, Callable, List, Set
import pynecone as pc
import os
from pynecone.var import Var
 
class AgGrid(pc.Component):
    library = "ag-grid-react"
    tag = "AgGridReact"
 
    columnDefs: Var[list]
    rowData: Var[list]
    animateRows: Var[bool] = True
    enableRangeSelection: Var[bool] = True
    rowSelection: Var[str] = "multiple"
 
    defaultColDef: Var[dict] = {
        "editable": True,
        "sortable": True,
        "flex": 1,
        "minWidth": 100,
        "filter": True,
        "resizable": True,
        "headerComponentParams": {
            "menuIcon": "fa-bars",
        },
    }
 
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
 
    @staticmethod
    def on_cell_value_changed(event: dict[str, Any]):
        # Handle the event here
        print(f"Cell value changed: {event}")
 
    @classmethod
    def get_controlled_triggers(cls) -> dict[str, pc.Var]:
        return {"onCellValueChanged": pc.EVENT_ARG}
 
    def _get_imports(self):
        return {}
 
    def get_custom_code(self) -> Set[str]:
        return {
            "import { AgGridReact } from 'ag-grid-react';",
            "import 'ag-grid-community/styles/ag-grid.min.css';",
            "import 'ag-grid-community/styles/ag-theme-alpine.css';",
        }.union(super().get_custom_code())

[macropas]

@Alek99 Tables/DataGrids of this kind (at least with the ability to select a row) are very often used in various business applications. If you can implement this, then the number of people using your framework will definitely increase! We are begging you! 🙏

[Alek99]

@Alek99 Tables/DataGrids of this kind (at least with the ability to select a row) are very often used in various business applications. If you can implement this, then the number of people using your framework will definitely increase! We are begging you! 🙏

Working on a better datatable, probably won't be ready for the next release this Friday, but the one after next Friday should be out.

[macropas]

@Alek99 I found that ag-grid-react is not free code. But this nice component could be used for the wrapping: https://www.npmjs.com/package/react-data-table-component 😇

[Alek99]

Oh nice will check it out. Thanks for the suggestion

[robingie]

Any update on this? This functionality just keeps holding me back from switching over from Streamlit.

[macropas]

@robingie

And thus the native hue of resolution Is sicklied o'er with the pale cast of thought, And enterprises of great pith and moment With this regard their currents turn awry And lose the name of action. © 😈