arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Sheet
Create columns dynamically and render their style and other attributes from backing beans. Also demonstrate how to customize the Handsontable instance using "updateSettings" and "extender" Javascript.
Dynamic Columns
Source

<pe:sheet id="sheet" value="#{sheetDynamicController.sheetRows}" var="row" height="400" rowKey="#{row.id}"
              showRowHeaders="true" sortBy="#{row.id}" sortOrder="ascending" width="1000"
              widgetVar="sheetWidget" filteredValue="#{sheetDynamicController.filteredSheetRows}"
              extender="sheetExtender">

        <f:facet name="header">
            <h:outputText value="Dynamic Columns"/>
        </f:facet>

        <pe:sheetcolumn headerText="Id (readOnly)" readOnly="true" value="#{row.id}" colWidth="150"/>
        <c:forEach items="#{sheetDynamicController.hoursOfDay}" var="hourOfDay" varStatus="status">
            <pe:sheetcolumn styleClass="htRight #{row.cells[status.index].style}"
                            headerText="#{hourOfDay}"
                            value="#{row.cells[status.index].value}"
                            readonlyCell="#{row.readOnly}"
                            colType="numeric">
                <f:converter converterId="javax.faces.Integer"/>
            </pe:sheetcolumn>
        </c:forEach>

        <f:facet name="footer">
            <h:outputText value="#{sheetDynamicController.filteredSheetRows.size()} Records"/>
        </f:facet>
    </pe:sheet>

    <style type="text/css">
        .cell-blue {
            color: blue
        }

        .cell-orange {
            color: darkorange
        }
    </style>
    <script type="text/javascript">
        function sheetExtender() {
            // this = widget
            // this.cfg = JSON configuration
            this.cfg.trimWhitespace = true;
        };

        $(document).ready(function () {
            var $hot = PF('sheetWidget').ht;
            $hot.updateSettings({
                contextMenu: {
                    callback: function (key, options) {
                        if (key === 'about') {
                            setTimeout(function () {
                                // timeout is used to make sure the menu collapsed before alert is shown
                                alert("PrimeFaces Extensions Rocks! This is a context menu with default and custom options mixed");
                            }, 100);
                        }
                    },
                    items: {
                        "row_above": {
                            disabled: function () {
                                // if first row, disable this option
                                return $hot.getSelected()[0] === 0;
                            }
                        },
                        "row_below": {},
                        "hsep1": "---------",
                        "remove_row": {
                            name: 'Remove this row, ok?',
                            disabled: function () {
                                // if first row, disable this option
                                return $hot.getSelected()[0] === 0
                            }
                        },
                        "hsep2": "---------",
                        "about": {name: 'About...'}
                    }
                }
            });
        });
    </script>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
No attributes available for this component.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.13,PrimeFaces Extensions: 15.0.14-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-02-23 00:32