The <zg-button> element is used both for core, internal buttons as well as offering a styled and flexible component for custom use. Depending on how it is used, ZingGrid interprets how to render the button accordingly.

Internal Buttons

You can style and modify internal buttons without changing their behavior. Add text labels or change the default icon. Anything you don't change is rendered normally.

Adding a Text Label

The simplest modification is to add a text label and have the rest of the button render normally. To do this, just add your text label inside the button, like so:

<zg-button action="editrecord">Edit</zg-button>

Internal buttons always have an action attribute which tells ZingGrid how to interpret its functionality. See all button actions here.


Here is a list of ZingGrid's internal icons:


Slotted Content

To modify the internal button's icon or checkbox, you must directly tell the button which piece of it you are replacing. You do this by adding the appropriate slot to your replacement.

To replace the default icon, add your replacement <zg-icon> inside the button with the correct slot, like so:

<zg-button action="createrecord">
  <zg-icon name="close" slot="icon"></zg-icon>

To replace the default checkbox, add your replacement inside the button with the correct slot, like so:

Replaced Icon Grid

Here is a complete grid with "close" icons rather than the default "removerecord" icons:


Custom Content

Use the same <zg-button> for your own custom use (see below). Since it doesn't have an action attribute, ZingGrid knows it is custom and will render your button "as-is" without the internal icon, checkbox, and label elements.

  <img src="..." alt="..."/>
  <span>My Button</span>

Custom buttons also come with their own styling which makes them look more like buttons.

Custom Button Grid

Here is a complete grid with custom buttons:


Button Placement

Not all buttons can be placed in all places within your grid. The list below shows what button action can be used where.

Context Menu

The following button actions will only work in the context menu: copycell, editcell, editrecord, editrow, pagecell, and removerecord.

Head Cell

The following button action will only work in a zg-head cell: sortcolumn.

Free Placement

The following button actions can be used anywhere in the grid: cancelrecord, checkbox, createrecord, createrecordstart, createrecordend, firstpage, fixedmenu, insertrow, lastpage, layoutrow, layoutcard, menu, nextpage, prevpage, reload, submitrecord, and about.


Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: button]