DataPage - Menu Items

MenuItems Component

The MenuItems component defines the action menu for a DataPage.

Basic Usage

import { DataPage, MenuItem } from '@cratis/components/DataPage';
import { Column } from 'primereact/column';
import { FaPlus, FaPencil, FaTrash } from 'react-icons/fa';

<DataPage title="Products" query={ProductsQuery} emptyMessage="No products">
    <DataPage.MenuItems>
        <MenuItem label="Create Product" icon={FaPlus} command={handleCreate} />
        <MenuItem label="Edit" icon={FaPencil} disableOnUnselected command={handleEdit} />
        <MenuItem label="Delete" icon={FaTrash} disableOnUnselected command={handleDelete} />
    </DataPage.MenuItems>

    <DataPage.Columns>
        {/* ... columns */}
    </DataPage.Columns>
</DataPage>

MenuItem Props

Required Props

• label: Text displayed for the menu item
• command: Callback function when item is clicked

Optional Props

• icon: Icon component type (e.g. a react-icons icon like FaPlus) — DataPage renders it as <Icon />, so pass the component reference, not a CSS-class string or a JSX element
• disableOnUnselected: Disable when no row is selected (default: false)
• All PrimeReact MenuItem props are supported

Context-Aware Actions

Use disableOnUnselected to disable actions that require a selection:

import { FaPlus, FaPencil, FaTrash, FaArchive } from 'react-icons/fa';

<DataPage.MenuItems>
    {/* Always enabled */}
    <MenuItem
        label="Create New"
        icon={FaPlus}
        command={() => setShowCreateDialog(true)}
    />

    {/* Disabled when no selection */}
    <MenuItem
        label="Edit Selected"
        icon={FaPencil}
        disableOnUnselected={true}
        command={() => setShowEditDialog(true)}
    />

    <MenuItem
        label="Delete Selected"
        icon={FaTrash}
        disableOnUnselected={true}
        command={() => handleDelete()}
    />

    {/* Conditional actions */}
    <MenuItem
        label="Archive"
        icon={FaArchive}
        disableOnUnselected={true}
        command={() => handleArchive()}
    />
</DataPage.MenuItems>

Icons

The icon prop takes a component type — DataPage renders it internally as <Icon />. Pass the component reference (for example, an icon from react-icons), not a string CSS class and not an already-rendered JSX element.

import { FaSave, FaDownload, FaUpload } from 'react-icons/fa';

<MenuItem label="Save" icon={FaSave} command={handleSave} />
<MenuItem label="Download" icon={FaDownload} command={handleDownload} />
<MenuItem label="Upload" icon={FaUpload} command={handleUpload} />

Caution

Don’t pass icon="pi pi-save" (a PrimeIcons CSS class) or icon={<FaSave />} (a JSX element). DataPage instantiates the icon itself, so the prop must be the component type: icon={FaSave}.

Accessing Selected Item

The selected item is available through the DataPage context:

const handleEdit = () => {
    // Access selected item from parent component state
    if (selectedItem) {
        setEditItem(selectedItem);
        setShowEditDialog(true);
    }
};

Separators and Grouping

Use PrimeReact MenuItem features for separators:

import { FaPlus, FaPencil, FaTrash, FaFileExport } from 'react-icons/fa';

<DataPage.MenuItems>
    <MenuItem label="New" icon={FaPlus} command={handleNew} />
    <MenuItem separator />
    <MenuItem label="Edit" icon={FaPencil} disableOnUnselected command={handleEdit} />
    <MenuItem label="Delete" icon={FaTrash} disableOnUnselected command={handleDelete} />
    <MenuItem separator />
    <MenuItem label="Export" icon={FaFileExport} command={handleExport} />
</DataPage.MenuItems>

Dropdown Menus

Create nested menu structures:

import { FaFile, FaPlus, FaFolderOpen, FaPencil, FaCopy, FaClipboard } from 'react-icons/fa';

<DataPage.MenuItems>
    <MenuItem label="File" icon={FaFile}>
        <MenuItem label="New" icon={FaPlus} command={handleNew} />
        <MenuItem label="Open" icon={FaFolderOpen} command={handleOpen} />
    </MenuItem>

    <MenuItem label="Edit" icon={FaPencil}>
        <MenuItem label="Copy" icon={FaCopy} command={handleCopy} />
        <MenuItem label="Paste" icon={FaClipboard} command={handlePaste} />
    </MenuItem>
</DataPage.MenuItems>

Action Handlers

Simple Actions

const handleCreate = () => {
    setShowCreateDialog(true);
};

Actions with Selected Item

const handleEdit = () => {
    if (!selectedItem) return;

    setEditItem(selectedItem);
    setShowEditDialog(true);
};

Confirmation Dialogs

const handleDelete = () => {
    if (!selectedItem) return;

    setDeleteItem(selectedItem);
    setShowConfirmDialog(true);
};

Async Actions

const handleArchive = async () => {
    if (!selectedItem) return;

    try {
        await archiveItem(selectedItem.id);
        // Refresh data
    } catch (error) {
        console.error('Failed to archive item:', error);
    }
};