DataSource State Management

Premium

The KendoReact DataSource hooks provide comprehensive state management capabilities for handling data operations in your React applications. This includes managing states for sorting, filtering, grouping, and paging operations.

Built-in State Management

The DataSource hooks come with built-in state management that automatically handles:

• Data operation states (sorting, filtering, grouping, paging)
• Change tracking for data modifications
• State synchronization between the data source and UI components

jsx

const dataSource = useDataSource({
    data: products,
    sort: [{ field: 'ProductName', dir: 'asc' }],
    filter: {
        logic: 'and',
        filters: [{ field: 'UnitPrice', operator: 'gt', value: 20 }]
    },
    skip: 0,
    take: 10
});

Here's a complete example demonstrating built-in state management with persistence:

Change Theme

Theme

Loading ...

Controlled State Management

For more fine-grained control, you can manage the state externally:

jsx

const [sort, setSort] = React.useState([{ field: 'ProductName', dir: 'asc' }]);
const [filter, setFilter] = React.useState({
    logic: 'and',
    filters: [{ field: 'UnitPrice', operator: 'gt', value: 20 }]
});

const dataSource = useDataSource({
    data: products,
    sort,
    filter
});

Here's a complete example demonstrating controlled state management:

Change Theme

Theme

Loading ...

State Persistence

The DataSource state can be persisted and restored:

jsx

// Save state
localStorage.setItem('dataSourceState', JSON.stringify(dataSource.dataState));

// Restore state
const savedState = JSON.parse(localStorage.getItem('dataSourceState'));
dataSource.setDataState(savedState);

Suggested Links

• DataSource Overview
• Data Operations
• Remote Data Operations
• API Reference