---
tags: zeta-dom-react
---

# Overview

`DataView` provides a simple way to filter, sort and pagingate data. It provides interfaces for components to read and update the data view configuration.

## Example

function Component() {
    const items = [/* ... our data */];
    const dataView = useDataView(
        /* filters */   { type: '' },
        /* sort by */   'date', 'desc',
        /* page size */ 100);
    
    const [pagedItmes] = dataView.getView(items, (items, filters) => {
        /* apply filters */
        if (filters.type) {
            items = items.filter(v => v.type === filters.type);
        }
        return dataView.sort(items);
    });
    /* ... */
}

When there is no applicable filters nor custom sorting, the callback can be omitted:

function Component() {
    const items = [/* ... our data */];
    const dataView = useDataView(
        /* filters */   {},
        /* sort by */   'date', 'desc',
        /* page size */ 100);
    
    const [pagedItmes] = dataView.getView(items);
    /* ... */
}