diff --git a/packages/oui-datagrid/README.md b/packages/oui-datagrid/README.md index 7aec3a6a..fbc511b3 100644 --- a/packages/oui-datagrid/README.md +++ b/packages/oui-datagrid/README.md @@ -145,6 +145,99 @@ Clicked row action 1: {{$ctrl.action1Row.lastName ``` +### Pagination + +By default the page size is 25. + +You can override this value by configuring it: + +```javascript +app.config(ouiDatagridConfigurationProvider => { + ouiDatagridConfigurationProvider.setPageSize(10); +}); +``` + +Or you can use the `page-size` property. It takes precedence over value configured by provider. + +```html + + + + +``` + +### Custom cell templates + +```html + + + {{$row.firstName}} {{$row.lastName}} + + + {{$value}} + + + + {{$value | date:shortDate}} + + +``` + +### Remote data + +```html + + + + + + + +``` + +```javascript +class YourController { + loadData ({ offset, pageSize, sort }) { + // Make what you want here + return fetch("/path/to/you/api", { + method: "POST", + body: { offset, pageSize, sort } + }).then(response => response.json()); + } +} +``` + +Your method must: + + * return a promise or a compatible object + * this promise must resolve a value of this shape: + +```javascript +{ + data: page, // your data (an array) + meta: { + totalCount // total number of items + } +} +``` + +### Remote partial data + +Sometimes you will have to get remote data, but you want to fill other cell from separate API calls or by calculating these new values. + +You can use `row-loader`. It take the current row as argument and must return a promise that resolves to the transformed row. + +```html + + + + + + + +``` + ## API ### oui-datagrid