Skip to main content

defaultToolbarButtons

Description​

An array of objects with default configuration parameters for toolbar buttons

Default config​

defaultToolbarButtons = [
  {
    id: "add-row",
    comp: "button",
    icon: "wxi-plus",
    text: "New row",
    type: "primary",
  },
  {
    id: "open-editor",
    comp: "icon",
    icon: "wxi-edit",
    menuText: "Edit",
  },
  {
    id: "delete-row",
    comp: "icon",
    icon: "wxi-delete",
    menuText: "Delete",
  },
  {
    id: "copy-row",
    comp: "icon",
    icon: "wxi-content-copy",
    menuText: "Copy",
  },
  {
    id: "cut-row",
    comp: "icon",
    icon: "wxi-content-cut",
    menuText: "Cut",
  },
  {
    id: "paste-row",
    comp: "icon",
    icon: "wxi-content-paste",
    menuText: "Paste",
  },
  {
    id: "move-item:up",
    comp: "icon",
    icon: "wxi-angle-up",
    menuText: "Move up",
  },
  {
    id: "move-item:down",
    comp: "icon",
    icon: "wxi-angle-down",
    menuText: "Move down",
  },
  { comp: "spacer" },
  {
    id: "undo",
    comp: "icon",
    icon: "wxi-undo",
    menuText: "Undo",
  },
  {
    id: "redo",
    comp: "icon",
    icon: "wxi-redo",
    menuText: "Redo",
  },
];

Parameters​

The array includes objects with the next parameters for each button:

  • id - (optional) the id of a button
  • comp - (required) specifies the type of the button item that can be one of the following: button, separator, spacer, label, icon
  • text - (optional) the text for a button
  • icon - (optional) sets the icon for a button, and the 'css' property applies a CSS class to the item
  • type - (optional) the following types of buttons are available: 'default', 'primary', 'secondary', 'danger', 'link'
  • menuText - (optional) the text for the option in the dropdown menu that appears when the screen size is small

Some buttons appear only when specific DataGrid modes are enabled:

  • Buttons with id: "move-item:up" and id: "move-item:down" are displayed when Grid is initialized with the reorder mode:
<Grid {data} {columns} reorder />
  • Buttons with id: "undo" and id: "redo" are displayed when Grid is initialized with the undo mode:
<Grid {data} {columns} undo />

Related articles: