You have selected {{ $selectedRows.length }} row(s).
```
When selectable-rows is provided, you can listen to checkboxes changes with the on-row-select event. It provides $row as the triggered row and $rows as the complete list of rows selected so far.
### Empty datagrid
```html:preview
{{$row.parents.mother.lastName}}, {{$row.parents.mother.firstName}}
{{$row.parents.father.lastName}}, {{$row.parents.father.firstName}}
{{$ctrl.label}}: {{$value}}
{{$value|date:short}}
```
### Dynamic columns
Columns can be dynamically rendered using the `columns` attribute of datagrid.
Using this attribute, a new column property `hidden` is available.
```html:preview
```
```html:preview
```
All the properties of a column also become dynamic.
### Customizable columns
```html:preview
{{$row.parents.mother.lastName}}, {{$row.parents.mother.firstName}}
{{$row.parents.father.lastName}}, {{$row.parents.father.firstName}}
{{$value}}
Birth: {{$row.birth}}
Phone: {{$row.phone}}
```
### 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
```
You can also add custom behaviour on pagination changes
```html:preview
Page size : {{ $ctrl.pageSize }}
Offset : {{ $ctrl.offset }}
```
### Custom cell templates
```html
{{$row.firstName}} {{$row.lastName}}
{{$value}}
{{$value | date:shortDate}}
```
### Access row index
```html:preview
{{$rowIndex}}
{{$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
```
### 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
```
### Search and filtering
```html:preview
{{ $value ? 'Yes' : 'No' }}
```
### Filtering using dynamic column
```html:preview
```
### Refresh
Datagrid has inbuilt refresh button. Clicking on it, calls row-loader and rows-loader. This will re-fetch the data. To enable this icon, set refreshable attribute on oui-datagrid.
```html:preview
```
### Refresh via code
#### Local datagrid
Local datagrid can be refreshed by simply mutate `rows` value.
To refresh asynchronous data, you need to define an id for the datagrid and use `ouiDatagridService` to refresh it.
```html:preview
```
In your controller:
```javascript
class YourController {
constructor(ouiDatagridService) {
this.ouiDatagridService = ouiDatagridService;
}
refreshDatagrid (datagridId, showSpinner) {
this.ouiDatagridService.refresh(datagridId, showSpinner);
}
}
```
#### Remote datagrid
For a remote datagrid, the whole page is refreshed with `ouiDatagridService.refresh` as it will firstly
call `rows-loader` and then a `row-loader` call for each line.
```html:preview
```
### Extra top content
```html:preview
{{$row.parents.mother.lastName}}, {{$row.parents.mother.firstName}}
{{$row.parents.father.lastName}}, {{$row.parents.father.firstName}}
{{$value}}
{{$value|date:short}}
```
## API
### oui-datagrid
| Attribute | Type | Binding | One-time binding | Values | Default | Description
| ---- | ---- | ---- | ---- | ---- | ---- | ----
| `id` | string | @? | no | n/a | n/a | id of the datagrid
| `page-size` | number | @? | no | n/a | `25` | maximum number of rows to show on each pages
| `rows` | array | {
ouiDatagridConfigurationProvider.setPageSize(25); // default page size (when page-size attribute is not set)
ouiDatagridConfigurationProvider.setTranslations({ // Translations (double curly braces for placeholders)
emptyPlaceholder: "No data available"
});
});
```
### Types
Types are associated to operators. Here's the list of all availables types and operators:
- `boolean`
- `is`
- `isNot`
- `date`
- `is`
- `isAfter`
- `isBefore`
- `number`
- `is`
- `smaller`
- `bigger`
- `options`
- `is`
- `isNot`
- `string`
- `contains`
- `containsNot`
- `startsWith`
- `endsWith`
- `is`
- `isNot`