Add example of advanced table functionality

[sylvoslee]

It would be great if there is an example of operating the table, such as ag-grid？

[rmorshea]

It looks like ag-grid has some React bindings. You could probably just use it out of the box:

import idom

ag_grid = idom.web.module_from_template("react", "ag-grid-react")
AgGridColumn, AgGridReact = idom.web.export(ag_grid, ["AgGridColumn", "AgGridReact"])

There may be some limitations, but from what I can tell basic things should just work.

[rmorshea]

I'm also working on a complete rewrite of the documentation. It'll probably be a while before I get to add more advanced examples.

[sylvoslee]

Forgive my ignorance. under your guidance, I still can't make it work. How to write the correct code?

import idom

ag_grid = idom.web.module_from_template("react", "ag-grid-react", resolve_exports=True)
AgGridColumn, AgGridReact = idom.web.export(ag_grid, ["AgGridColumn", "AgGridReact"])


@idom.component
def AgGrid():
    state, set_state = idom.hooks.use_state(False)

    return idom.html.div(
        idom.html.link(
            dict(
                rel="stylesheet",
                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/ag-grid.css",
                type="text/css",
            )
        ),
        AgGridReact(
            {
                "rowData": [
                    {"name": "Tom", "age": 1},
                    {"name": "Tom", "age": 2},
                    {"name": "Tom", "age": 3},
                ],
            },
            AgGridColumn(
                {"field": "name"},
            ),
            AgGridColumn(
                {"field": "age"},
            ),
        ),
    )


idom.run(AgGrid)

[rmorshea]

Sorry for missing this. Would you still like help? If so, I can try and work through this.

[sylvoslee]

Of course, looking forward to your advice