@progress/kendo-react-data-tools

[![KendoReact NPM Banner](https://raw.githubusercontent.com/telerik/kendo-react/master/images/kendoreact-github-banner.png)](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools&utm_content=banner) # KendoReact Data Tools Library for React > **Important** > > - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools)—an enterprise-grade UI library with 120+ free and premium components. > - It contains both free and premium KendoReact data tools. To use the premium components, you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools). You can use the free tools even in production, no sign-up or license required. > - If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free). > - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) to learn how to configure your KendoReact licensing. > - Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools). > - The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team! > > [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) and speed up your development process! The React Data Tools package, part of KendoReact, delivers data-related components to manage and control the data in the application. How to start: ```sh npm i @progress/kendo-react-data-tools ``` What's in this package: - [React Data Tools Library Shared Features](#react-data-tools-library-shared-features) - [React Pager component](#react-pager-component) - [React Filter component](#react-filter-component) Additional information: - [Support Options](#support-options) - [Resources](#resources) - [KendoReact Data Tools API](https://www.telerik.com/kendo-react-ui/components/datatools/api) ## React Data Tools Library Shared Features - **Accessibility support**—The Data Tools are compliant with WAI-ARIA and Section 508. - [**Theme support**](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools)—The KendoReact Data Tools, as well as all 120+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, Fluent, and Default) and can be further customized to match your specific design guidelines. ## React Pager Component > This is a **free React component**—no sign-up or license required. [The KendoReact Pager component](https://www.telerik.com/kendo-react-ui/components/datatools/pager/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) provides options for splitting content into pages. It is very customizable, allowing developers to change the type of the pager, the button counts for the pages, the messages and more. How to use the Pager tool in your apps: ```tsx import { Pager, PageChangeEvent } from '@progress/kendo-react-data-tools'; ... /** * Handle the logic for changing the page. Note that you need to update the skip and the take props. */ <Pager skip={skip} take={take} total={50} onPageChange={handlePageChange} /> ``` ## React Filter Component > This is a KendoReact **premium component** and requires a commercial license or an active trial license. [The KendoReact Filter component](https://www.telerik.com/kendo-react-ui/components/datatools/filter/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) provides an intuitive interface to build out complex filter descriptions. The component can tie into any existing data model and provide an ever-expanding list of parameters to be used as a part of the filter expression. Each filter parameter can be removed as easily as it was added, by simply clicking the delete action item. ```tsx import { Filter, FilterChangeEvent } from "@progress/kendo-react-data-tools"; ... /** * Provide the data that you want to filter. * Define the fields for the filter. * Handle the logic when changing the filter. Note that you need to update the filter value. */ <Filter fields={fields} value={value} onChange={handleFilterChange} />; ``` ## Support Options For any issues you might encounter while working with the KendoReact Data Tools, use any of the available support channels: - Industry-leading technical support—KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated KendoReact support system](https://www.telerik.com/account/support-center/contact-us/technical-support?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools). - Product forums—The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) are part of the free support you can get from the community and from the KendoReact team. - Feedback portal—The [KendoReact feedback portal](https://feedback.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) is where you can request and vote for new features to be added. ## Resources - [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) - [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free) - [Getting Started with the KendoReact Data Tools](https://www.telerik.com/kendo-react-ui/components/datatools/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) - [API Reference of the KendoReact Data Tools](https://www.telerik.com/kendo-react-ui/components/datatools/api/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) - [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) - [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) - [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) - [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) - [Changelog](https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-datatools) High-level component overview pages: - [React Filter Component](https://www.telerik.com/kendo-react-ui/filter) - [React Pager Component](https://www.telerik.com/kendo-react-ui/pager) _Copyright © 2025 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved._ _Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries._