Use Range Selection for Filtering - React Range Selector

import React, { useCallback, useState } from 'react'; import RangeSelector, { Margin, Scale, Label, Behavior, Format, } from 'devextreme-react/range-selector'; import DataGrid from 'devextreme-react/data-grid'; import { employees } from './data.ts'; const columns = ['FirstName', 'LastName', 'BirthYear', 'City', 'Title']; const App = () => { const [selectedEmployees, setSelectedEmployees] = useState(employees); const filterEmployees = useCallback(({ value }) => { setSelectedEmployees( employees.filter( (employee) => ( employee.BirthYear >= value[0] && employee.BirthYear <= value[1]) || !value.length, ), ); }, [setSelectedEmployees]); return ( <React.Fragment> <RangeSelector id="range-selector" title="Filter Employee List by Birth Year" dataSource={employees} dataSourceField="BirthYear" onValueChanged={filterEmployees} > <Margin top={20} /> <Scale tickInterval={1} minorTickInterval={1}> <Label> <Format type="decimal" /> </Label> </Scale> <Behavior valueChangeMode="onHandleMove" /> </RangeSelector> <h2 className="grid-header">Selected Employees</h2> <DataGrid dataSource={selectedEmployees} columns={columns} showBorders={true} columnAutoWidth={true} /> </React.Fragment> ); }; export default App;

import React, { useCallback, useState } from 'react'; import RangeSelector, { Margin, Scale, Label, Behavior, Format, } from 'devextreme-react/range-selector'; import DataGrid from 'devextreme-react/data-grid'; import { employees } from './data.js'; const columns = ['FirstName', 'LastName', 'BirthYear', 'City', 'Title']; const App = () => { const [selectedEmployees, setSelectedEmployees] = useState(employees); const filterEmployees = useCallback( ({ value }) => { setSelectedEmployees( employees.filter( (employee) => (employee.BirthYear >= value[0] && employee.BirthYear <= value[1]) || !value.length, ), ); }, [setSelectedEmployees], ); return ( <React.Fragment> <RangeSelector id="range-selector" title="Filter Employee List by Birth Year" dataSource={employees} dataSourceField="BirthYear" onValueChanged={filterEmployees} > <Margin top={20} /> <Scale tickInterval={1} minorTickInterval={1} > <Label> <Format type="decimal" /> </Label> </Scale> <Behavior valueChangeMode="onHandleMove" /> </RangeSelector> <h2 className="grid-header">Selected Employees</h2> <DataGrid dataSource={selectedEmployees} columns={columns} showBorders={true} columnAutoWidth={true} /> </React.Fragment> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const employees = [ { LastName: 'Davolio', FirstName: 'Nancy', BirthYear: 1948, City: 'Seattle', Title: 'Sales Representative', }, { LastName: 'Fuller', FirstName: 'Andrew', BirthYear: 1952, City: 'Tacoma', Title: 'Vice President, Sales', }, { LastName: 'Leverling', FirstName: 'Janet', BirthYear: 1963, City: 'Kirkland', Title: 'Sales Representative', }, { LastName: 'Peacock', FirstName: 'Margaret', BirthYear: 1937, City: 'Redmond', Title: 'Sales Representative', }, { LastName: 'Buchanan', FirstName: 'Steven', BirthYear: 1955, City: 'London', Title: 'Sales Manager', }, { LastName: 'Suyama', FirstName: 'Michael', BirthYear: 1963, City: 'London', Title: 'Sales Representative', }, { LastName: 'King', FirstName: 'Robert', BirthYear: 1960, City: 'London', Title: 'Sales Representative', }, { LastName: 'Callahan', FirstName: 'Laura', BirthYear: 1958, City: 'Seattle', Title: 'Inside Sales Coordinator', }, { LastName: 'Dodsworth', FirstName: 'Anne', BirthYear: 1966, City: 'London', Title: 'Sales Representative', }, ];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const employees = [ { LastName: 'Davolio', FirstName: 'Nancy', BirthYear: 1948, City: 'Seattle', Title: 'Sales Representative', }, { LastName: 'Fuller', FirstName: 'Andrew', BirthYear: 1952, City: 'Tacoma', Title: 'Vice President, Sales', }, { LastName: 'Leverling', FirstName: 'Janet', BirthYear: 1963, City: 'Kirkland', Title: 'Sales Representative', }, { LastName: 'Peacock', FirstName: 'Margaret', BirthYear: 1937, City: 'Redmond', Title: 'Sales Representative', }, { LastName: 'Buchanan', FirstName: 'Steven', BirthYear: 1955, City: 'London', Title: 'Sales Manager', }, { LastName: 'Suyama', FirstName: 'Michael', BirthYear: 1963, City: 'London', Title: 'Sales Representative', }, { LastName: 'King', FirstName: 'Robert', BirthYear: 1960, City: 'London', Title: 'Sales Representative', }, { LastName: 'Callahan', FirstName: 'Laura', BirthYear: 1958, City: 'Seattle', Title: 'Inside Sales Coordinator', }, { LastName: 'Dodsworth', FirstName: 'Anne', BirthYear: 1966, City: 'London', Title: 'Sales Representative', }, ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#range-selector { height: 140px; } h2.grid-header { font-size: 20px; margin: 38px 0 10px; text-align: center; }

React Range Selector - Use Range Selection for Filtering