Row Actions in React Grid

    The Ignite UI for React Row Actions feature in React Grid enables developers to use an АctionStrip and utilize CRUD for row/cell components and row pinning. There are several predefined UI controls for these operations that are applicable to a specific row in the IgrGrid – editing and pinning.

    Usage

    The predefined actions UI components are:

    • IgrGridEditingActions - includes functionality and UI specifically designed for the IgrGrid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the rowEditable option and row deletion of the IgrGrid.

    • IgrGridPinningActions - includes functionality and UI specifically designed for the IgrGrid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.

    They are added inside the IgrGrid and this is all needed to have an IgrActionStrip providing default interactions.

    <IgrGrid id="grid" rowEditable="true" primaryKey="ID">
    <IgrColumn field="field">
    </IgrColumn>
    <IgrActionStrip name="actionStrip">
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

    [!Note] When ActionStripComponent is a child component of the IgrGrid, hovering a row will automatically show the UI.

    <IgrGrid>
    <IgrActionStrip name="actionStrip">
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions editRow="true" deleteRow="true"></IgrGridEditingActions>
    </IgrActionStrip>
</IgrGrid>

    API References

    Our community is active and always welcoming to new ideas.