devextreme-react

import React from 'react'; import DataGrid, { Column, Paging, Pager, Editing, Popup, Form, RequiredRule } from 'devextreme-react/data-grid'; import 'devextreme/dist/css/dx.material.blue.light.css'; // Or another theme const employees = [ { id: 1, firstName: 'John', lastName: 'Doe', city: 'New York', position: 'Developer' }, { id: 2, firstName: 'Jane', lastName: 'Smith', city: 'London', position: 'Designer' }, { id: 3, firstName: 'Peter', lastName: 'Jones', city: 'Paris', position: 'Manager' }, // More data... ]; function App() { const onRowInserting = (e) => { // Simulate API call for adding a new employee console.log('Inserting row:', e.data); employees.push({ ...e.data, id: employees.length + 1 }); e.component.refresh(true); }; const onRowUpdating = (e) => { // Simulate API call for updating an employee console.log('Updating row:', e.newData, 'for:', e.oldData); Object.assign(employees.find(emp => emp.id === e.key), e.newData); e.component.refresh(true); }; const onRowRemoving = (e) => { // Simulate API call for removing an employee console.log('Removing row with key:', e.key); const index = employees.findIndex(emp => emp.id === e.key); if (index > -1) { employees.splice(index, 1); } e.component.refresh(true); }; return ( <div className="app-container" style={{ margin: '20px' }}> <h2>DevExtreme DataGrid with Basic CRUD</h2> <DataGrid dataSource={employees} keyExpr="id" showBorders={true} onRowInserting={onRowInserting} onRowUpdating={onRowUpdating} onRowRemoving={onRowRemoving} > <Paging defaultPageSize={10} /> <Pager showPageSizeSelector={true} allowedPageSizes={[5, 10, 20]} showInfo={true} /> <Editing mode="popup" allowAdding={true} allowUpdating={true} allowDeleting={true} useIcons={true} > <Popup title="Employee Info" showTitle={true} width={700} height={340} /> <Form> <RequiredRule message="First Name is required" /> <RequiredRule message="Last Name is required" /> <RequiredRule message="Position is required" /> </Form> </Editing> <Column dataField="firstName" caption="First Name" /> <Column dataField="lastName" caption="Last Name" /> <Column dataField="city" caption="City" /> <Column dataField="position" caption="Position" /> </DataGrid> </div> ); } export default App;