Customize the content

[lughino]

I congratulate you for this module, it is really very well done!

But I need to customize the UI by changing the graphics (and here just edit css) and adding a pager (to bootstrap) both above and below the grid.
Also I'd like to put the box of filters over the grid always open.

Could you advise me a way to make these changes without the need to fork the project and modify it massively?

[bencripps]

Currently, there's not a way of adding a custom component to the top of the grid but this could be amended very easily. I will try to get to this shortly, but for now you are able to pass a custom component to bottom of the grid (through the pager plugin). Try the following code:

const props = {
    data,
    store,
    plugins: {
        PAGER: {
            pagerComponent: <CustomComponent />
        }
};

const grid = <Grid { ...props } />

The custom component can be any jsx element. I can add this same kind of functionality to the top of the grid.

[bencripps]

You can now add a custom component to the top of the grid:

const props = {
    data,
    store,
    plugins: {
        FILTER_CONTAINER: {
            component: <CustomComponent />
        }
};

const grid = <Grid { ...props } />
`

[bencripps]

Closing this issue as the pager is customizable, and the grid no longer ships a filter container component.