React List - Item Context Menu

If you want to offer the user a set of commands related to a List item, you can do so with the context menu. To specify the commands, use the menuItems array. Each object in this array configures a single command.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  • import List, {
  • MenuItem
  • } from 'devextreme-react/list';
  • import notify from 'devextreme/ui/notify';
  •  
  • const fruits = [
  • { fruit: "Apples", count: 10 },
  • { fruit: "Oranges", count: 12 },
  • { fruit: "Lemons", count: 15 }
  • ];
  •  
  • const ListItem = (data) => {
  • return (
  • <b>{ data.fruit }</b>
  • );
  • };
  •  
  • const addToCart = (e) => {
  • // ...
  • notify(e.itemData.fruit + " are added to cart");
  • };
  • const showDetails = (e) => {
  • // ...
  • };
  • const complain = (e) => {
  • // ...
  • };
  •  
  • export default function App() {
  • return (
  • <List
  • dataSource={fruits}
  • itemRender={ListItem}>
  • <MenuItem
  • text="Add to Cart"
  • action={addToCart}
  • />
  • <MenuItem
  • text="View Details"
  • action={showDetails}
  • />
  • <MenuItem
  • text="Register a Complaint"
  • action={complain}
  • />
  • </List>
  • );
  • }

The user can access the commands in one of the following ways depending on the value of the menuMode property.

  • "context"
    The user right-clicks or performs a long tap on an item to open the context menu with the commands.

  • "slide"
    The user swipes an item to access the commands. If the menuItems array contains a single command, swiping the item reveals the button executing this command. If there are several commands in the menuItems array, swiping the item reveals the "More" button that opens a pop-up window with these commands.

App.js
  • // ...
  • export default function App() {
  • return (
  • <List ...
  • menuMode="context"> {/* or "slide" */}
  • {/* ... */}
  • </List>
  • );
  • }
See Also