If we have an GraphQL query injection like this

class ExampleScope
{
    @observable
    foos = injection(
        // language=GraphQL
        `query iQueryFoo($config: QueryConfigInput!)
        {
            iQueryFoo(config: $config)
            {
                type
                columnStates{
                    name
                    enabled
                    sortable
                }
                queryConfig{
                    id
                    condition
                    currentPage
                    pageSize
                    sortOrder{
                        fields
                    }
                }
                rows{
                    id
                    name
                    num
                    owner{
                        id
                        login
                    }
                    
                }
                rowCount
            }
        }`,
        {
            "config": {
                "pageSize": 20
            }
        }
    );
}

You can use a DataGrid component like this

    <DataGrid
        value={ scope.foos }
    >
        <DataGrid.Column
            heading={ "Action" }
        >
            {
                foo => (
                    <Button
                        className="btn btn-secondary text-nowrap"
                        icon="fa-edit"
                        text="Detail"
                        action={ () => alert("Button for " + JSON.stringify(foo)) }
                    />
                )
            }
        </DataGrid.Column>
        <DataGrid.Column name="name" filter="containsIgnoreCase"/>
        <DataGrid.Column name="num" filter="eq"/>
        <DataGrid.Column name="owner.login" filter="containsIgnoreCase" />
    </DataGrid>

The columns render the scalar value when being self-closing and being given a field name.

Otherwise you can use a render function to render content. The render function receives the current row object as only argument.

Simple filter comparisons can be given with the filter attribute.

The standard iQuery implementation is able to follow "to One" relations of object and request those with a single joined SQL query.

Here we follow a relation named owner to a corresponding AppUser object and display owner.login as column.

A client-side custom filter can be defined by giving a function to filter.

<DataGrid.Column
    heading={ i18n("Sum") }
    filter={ (min,max) => (
        field("numa")
            .add(
                field(
                    "numb"
                )
            )
            .between(
                value(
                    "Int",
                    min
                ),
                value(
                    "Int",
                    max
                )
            )
    ) }
>
{
    (row) => row.sumA + row.sumB
}

The function can have one or more arguments.

</DataGrid.Column>

The tree can be used with both mouse and keyboard.

The care-buttons open and close tree groups and load additional data on demand.

Clicking on the name of the item executes the default action or first action in the actions definition.

( See Tree.Objects and Tree.IndexedObjects )

The context-menu can be opened by right-clicking the name or combining a normal click with either ctrl, shift or alt.

With the keyboard the menu can be opened by either pressing ctrl, shift or alt while pressing the return key or by tabbing onto a visually hidden context menu button with opens the same menu.

Navigation within the tree works via cursor keys. Up and Down move the selection one item up or down. 'Home' and 'End' key select the first or last item in the tree.

Cursor left closes the current tree group or jumps to the current parent if the group is already closed or the item has no descendants.

Cursor right opens the current tree group or jumps to the first descendant if the group is already open.