Add Button to Grid Cells
In order to add a button to grid cells, you can use the cell template and specify condition at which button(s) will appear. You can use either the IntegralUI Button component, the standard button element or any other 3rd party component or element with similar functionalities.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to add a button to grid cells.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, the Grid has a fixed column that shows a button in column cells. Whenever the button is clicked, it removes the corresponding row from the grid.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Add a Button to Grid Cells in Angular, React and Vue
To add a button in a grid cell, you need to create a template. The grid component accepts a custom template for its rows. In this template, you can setup condition that when matched will override the default content that appears in corresponding cell.
The template is a function with two parameters: row and cell. Using these objects, you can determine under which row and cell the custom content from the template will appear in the cell. In this case, you want to show a Button under specific column, so you can use the cell.cid field to setup a condition:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
The cid field contains the same value as column's id. This means that cell is related with the column using the cell.cid and column.id value. More information about column, row and cell objects and their relations is available in Grid Data Structure.
Handling Button Events from the Grid Cells
At this stage, a button will appear in each cell for specified column, however it is not yet functional. You need to handle the click or mousedown event and add custom action that will execute whenever button is clicked. In this case, the row that contains the cell with the button is removed whenever on click:
Because the grid layout changes (a row is removed), you need to update it.
How to Customize the Button
You can change appearance of Button by modifying the built-in CSS classes for the Button component. To do this, you need to create a custom CSS file, add your changes and apply them to the Grid customStyle property. This will override the default appearance.
In this example, because the cell height is higher than the button height, the margin attribute is modified so that the button appears in the middle:
You can modify other button style attributes like background, color, padding etc. by using custom properties or directly modifying the built-in CSS classes for the button (available at styles/default/integralui.button.style.js).
Conclusion
Grid component allows you to add custom buttons to grid cells by simply providing a template where you can your own content. Depending on specific condition, this custom content will appear only in specific cells. In addition, by handling button events you can remove grid rows or add any other custom actions that may affect the grid data.
Grid is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.