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

# Multiple data views

There are scenarios that multiple data sources are displayed in a single page.

In such cases, assign a unique ID for each data source as the first argument when using `useDataView`, such as the `DataView` object knows when to persist and restore the current view.

## Multiple views

Same data source can be splitted into different views:

function Component() {
    const items = [/* ... */];

    const dv1 = useDataView('dv1', {});
    const [pagedItems1] = dv1.getView(items);

    const dv2 = useDataView('dv2', {});
    const [pagedItems2] = dv2.getView(items);
    
    /* ... */
}

## Switching data in a single view

By associating a unique ID to each data source, the switching of state associated to each data source are automatically handled.

function Component() {
    const items1 = [/* ... */];
    const items2 = [/* ... */];
    const [tab, setTab] = useState(0);

    const dv = useDataView(`dv${tab}`, {});
    const items = tab === 0 ? items1 : items2;
    const [pagedItems] = dv.getView(items);
    
    /* ... */
}