Grid Button

Overview

If you need to include one or more buttons in a responsive table or grid cell, use one of the following button components. These components have minimal, lightweight formatting that fits well into a grid cell. These buttons display only an icon, with no text.

Use the simple grid button if you need to display up to 3 buttons in a grid cell. The grid button action must be easily recognized and understood when using one of our enterprise icons.

Use the grid “more” button to roll up options in a dropdown that displays when the user presses the button. This button displays the Ellipsis ("…") icon. Use this component when you need to display more than around 3 buttons in a grid cell, or if there isn’t an easily recognizable enterprise icon to indicate a button’s action.

Here are some guidelines for using grid buttons:

• Do not display grid buttons in the same grid cell as data.
• If a grid row includes more than one grid button, place them all in the same grid cell.
• You’ll typically use either the simple grid button or the grid “more” button, but if for any reason you’re using both types of buttons in the same grid row, the grid “more” button should be to the right of all other grid buttons.
• Never use more than one grid “more” button in the same grid row.
• Grid buttons should typically display in the rightmost column of a grid row. One exception to this is if the grid row is too wide to fit and horizontal scrolling prevents the user from seeing the button. In this case you can put the cell with grid buttons on the left side of the grid. Note that if your grid includes an expand/collapse button in the leftmost column, any other grid buttons should display in a column somewhere to the right of that.
• The simple grid button works well for actions that have an easily recognizable icon, such as “Edit” and “Delete”. If the button’s action can’t be readily understood with one of the enterprise icons, then use the grid “more” button and specify the text in the dropdown.
• If you’re displaying up to about 3 options and have the space for it, you can use multiple simple grid buttons. Otherwise use the grid “more” button.

Development

Web component development

Component reference

rui-grid-button

rui-grid-more-button

rui-button-menu-option

rui-button-menu-template

rui-button-menu-separator

Implementation

Begin by importing the rui-buttons module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-buttons/rui-buttons-imports';

Add a new column to the grid header for the button cell. The grid buttons will be centered in their cell, so you should center the header title as well so it lines up nicely with the grid buttons.

<th class="rui-responsive-cell-center">
    Actions
</th>

Add a new column to each grid row to contain the grid button(s). Add the rui-grid-button-container CSS class to the grid cell’s element; this is important in order for the grid buttons to display properly.

<td class="rui-grid-button-container">
</td>

For simple grid buttons, add a rui-grid-button element to the cell. Specify its iconType and the action to perform when clicked. It can also be helpful to specify a tooltip for the button with the title property, since the button doesn’t display text.

<td class="rui-grid-button-container">

    <rui-grid-button iconType="edit" title="Edit this item" (rui-click)="editItem()">
    </rui-grid-button>

</td>

For grid “more” buttons, nest instances of rui-button-menu-option within a rui-grid-more-button in the cell. Set alignment to a value of 'right' if the button appears at the right side of the grid; this aligns the dropdown menu to the right edge of the button. (Leave this property at its default value of 'left' otherwise.) It can also be helpful to specify a tooltip for the button with the title property, since the button doesn’t display text.

<td class="rui-grid-button-container">

    <rui-grid-more-button alignment="Right" title="Options for this item">
        <rui-button-menu-option text="Edit" (rui-click)="editItem()"></rui-button-menu-option>
        <rui-button-menu-option text="Archive" (rui-click)="archiveItem()"></rui-button-menu-option>
        <rui-button-menu-option text="Delete" (rui-click)="deleteItem()"></rui-button-menu-option>
    </rui-grid-more-button>

</td>

Use the rui-button-menu-separator component if you need to separate options in the grid button’s dropdown menu into groups.

<td class="rui-grid-button-container">

    <rui-grid-more-button alignment="Right" title="Options for this item">
        <rui-button-menu-option text="Edit" (rui-click)="editItem()"></rui-button-menu-option>
        <rui-button-menu-option text="Archive" (rui-click)="archiveItem()"></rui-button-menu-option>
        <rui-button-menu-separator></rui-button-menu-separator>
        <rui-button-menu-option text="Delete" (rui-click)="deleteItem()"></rui-button-menu-option>
    </rui-grid-more-button>

</td>

Displaying templated options in the grid ‘more’ button dropdown menu

In some (rare) cases you may need to display a template with multiple data in each dropdown option for a grid “more” button. Nest instances of rui-button-menu-template within rui-grid-more-button for this case. Embed the template for each option within the rui-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

<td class="rui-grid-button-container">

    <rui-grid-more-button text="Grid 'More' Button with Templated Options">

        <rui-button-menu-template *ngFor="let account of accounts" (rui-click)="accountClick(account)">
            <div class="template-options">
                <div class="button-template-name">{{account.name}}</div>
                <div class="button-template-account-number rui-bright-text-label">{{account.number}}</div>
                <div class="button-template-account-desc">{{account.description}}</div>
            </div>
        </rui-button-menu-template>

    </rui-grid-more-button>

</td>

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Angular wrapper development

Wrapper reference

jha-grid-button

jha-grid-more-button

jha-button-menu-option

jha-button-menu-template

jha-button-menu-separator

Implementation

Begin by importing the JhaButtonsModule module into your application.

// import into app.module
import { JhaButtonsModule } from '@jkhy/responsive-ui-angular/jha-buttons';

@NgModule({
    imports: [
        ...
        JhaButtonsModule,
        ...
    ]
})

export class AppModule(){}

Add a new column to the grid header for the button cell. The grid buttons will be centered in their cell, so you should center the header title as well so it lines up nicely with the grid buttons.

<th class="jha-responsive-cell-center">
    Actions
</th>

Add a new column to each grid row to contain the grid button(s). Add the jha-grid-button-container CSS class to the grid cell’s element; this is important in order for the grid buttons to display properly.

<td class="jha-grid-button-container">
</td>

For simple grid buttons, add a jha-grid-button element to the cell. Specify its jhaIconType and the action to perform when clicked. It can also be helpful to specify a tooltip for the button with the jhaTooltip property, since the button doesn’t display text.

<td class="jha-grid-button-container">

    <jha-grid-button jhaIconType="Edit" jhaTooltip="Edit this item" (jhaClick)="editItem()">
    </jha-grid-button>

</td>

For grid “more” buttons, nest instances of jha-button-menu-option within a jha-grid-more-button in the cell. Set jhaAlignment to a value of 'Right' if the button appears at the right side of the grid; this aligns the dropdown menu to the right edge of the button. (Leave this property at its default value of 'Left' otherwise.) It can also be helpful to specify a tooltip for the button with the title property, since the button doesn’t display text.

<td class="jha-grid-button-container">

    <jha-grid-more-button jhaAlignment="Right" jhaTooltip="Options for this item">

        <jha-button-menu-option jhaText="Edit" (jhaClick)="editItem()"></jha-button-menu-option>

        <jha-button-menu-option jhaText="Archive" (jhaClick)="archiveItem()"></jha-button-menu-option>

        <jha-button-menu-option jhaText="Delete" (jhaClick)="deleteItem()"></jha-button-menu-option>

    </jha-grid-more-button>

</td>

Use the jha-button-menu-separator component if you need to separate options in the grid button’s dropdown menu into groups.

<td class="jha-grid-button-container">

    <jha-grid-more-button jhaAlignment="Right" jhaTooltip="Options for this item">

        <jha-button-menu-option jhaText="Edit" (jhaClick)="editItem()"></jha-button-menu-option>

        <jha-button-menu-option jhaText="Archive" (jhaClick)="archiveItem()"></jha-button-menu-option>

        <jha-button-menu-separator></jha-button-menu-separator>

        <jha-button-menu-option jhaText="Delete" (jhaClick)="deleteItem()"></jha-button-menu-option>

    </jha-grid-more-button>

</td>

Displaying templated options in the grid ‘more’ button dropdown menu

In some (rare) cases you may need to display a template with multiple data in each dropdown option for a grid “more” button. Nest instances of jha-button-menu-template within jha-grid-more-button for this case. Embed the template for each option within the jha-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

<td class="jha-grid-button-container">

    <jha-grid-more-button jhaText="Dropdown Button with Templated Options">

        <jha-button-menu-template *ngFor="let account of accounts" (jhaClick)="accountClick(account)">
            <div class="template-options">
                <div class="button-template-name">{{account.name}}</div>
                <div class="button-template-account-number jha-bright-text-label">{{account.number}}</div>
                <div class="button-template-account-desc">{{account.description}}</div>
            </div>
        </jha-button-menu-template>

    </jha-grid-more-button>

</td>

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Component playground

Design

Figma design

• See the Responsive table Figma design documentation if you’re adding a grid button or grid “more” button to a responsive table in a Figma design.
• See the Data grid Figma design documentation if you’re adding a grid button or grid “more” button to a data grid in a Figma design.
• See the Tree grid Figma design documentation if you’re adding a grid button or grid “more” button to a tree grid in a Figma design.

Adobe XD design

• See the Responsive table Adobe XD design documentation if you’re adding a grid button or grid “more” button to a responsive table in an Adobe XD design.
• See the Data grid Adobe XD design documentation if you’re adding a grid button or grid “more” button to a data grid in an Adobe XD design.
• See the Tree grid Adobe XD design documentation if you’re adding a grid button or grid “more” button to a tree grid in an Adobe XD design.