PrimeFaces Extensions Showcase

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="jakarta.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>


@Named
@ViewScoped
public class SheetDynamicController implements Serializable {

    private static final long serialVersionUID = 20120224L;

    private List<DynaSheetRow> sheetRows = new ArrayList<>();
    private List<DynaSheetRow> filteredSheetRows = new ArrayList<>();
    private List<Integer> hoursOfDay = new ArrayList<>();

    public SheetDynamicController() {
        addRows(24);
    }

    private void addRows(final int count) {
        for (int i = 0; i < count; i++) {
            final DynaSheetRow row = new DynaSheetRow();
            row.setId(RandomUtils.secure().randomLong());
            row.setReadOnly(false);
            final Integer hourOfDay = Integer.valueOf(i);
            hoursOfDay.add(hourOfDay);
            for (int j = 0; j < count; j++) {
                row.getCells().add(DynaSheetCell.create(Integer.valueOf(j), RandomUtils.secure().randomInt(1, 1000)));
            }
            getSheetRows().add(row);
        }
    }

    public List<DynaSheetRow> getSheetRows() {
        return sheetRows;
    }

    public void setSheetRows(final List<DynaSheetRow> sheetRows) {
        this.sheetRows = sheetRows;
    }

    public List<Integer> getHoursOfDay() {
        return hoursOfDay;
    }

    public void setHoursOfDay(final List<Integer> hoursOfDay) {
        this.hoursOfDay = hoursOfDay;
    }

    public List<DynaSheetRow> getFilteredSheetRows() {
        return filteredSheetRows;
    }

    public void setFilteredSheetRows(final List<DynaSheetRow> filteredSheetRows) {
        this.filteredSheetRows = filteredSheetRows;
    }

}


public class DynaSheetRow implements Serializable {

    private static final long serialVersionUID = 1L;

    private Long id;
    private List<DynaSheetCell> cells = new ArrayList<>();
    private boolean readOnly;

    /**
     * Gets the {@link #id}.
     *
     * @return Returns the {@link #id}.
     */
    public Long getId() {
        return id;
    }

    /**
     * Sets the {@link #id}.
     *
     * @param id The {@link #id} to set.
     */
    public void setId(final Long id) {
        this.id = id;
    }

    /**
     * Gets the {@link #cells}.
     *
     * @return Returns the {@link #cells}.
     */
    public List<DynaSheetCell> getCells() {
        return cells;
    }

    /**
     * Sets the {@link #cells}.
     *
     * @param cells The {@link #cells} to set.
     */
    public void setCells(final List<DynaSheetCell> cells) {
        this.cells = cells;
    }

    /**
     * Gets the {@link #readOnly}.
     *
     * @return Returns the {@link #readOnly}.
     */
    public boolean isReadOnly() {
        return readOnly;
    }

    /**
     * Sets the {@link #readOnly}.
     *
     * @param readOnly The {@link #readOnly} to set.
     */
    public void setReadOnly(final boolean readOnly) {
        this.readOnly = readOnly;
    }

}


public class DynaSheetCell implements Comparable<DynaSheetCell>, Serializable {

    private static final long serialVersionUID = 1L;

    private Integer value;
    private String style;
    private Integer hourOfDay;

    public static DynaSheetCell create(final Integer hourOfDay, final Integer value) {
        final DynaSheetCell cell = new DynaSheetCell();
        cell.setHourOfDay(hourOfDay);
        cell.setValue(value);
        cell.setStyle(StringUtils.EMPTY);
        if (hourOfDay == 2) {
            cell.setStyle("cell-blue");
        }
        if (hourOfDay == 3) {
            cell.setStyle("cell-orange");
        }
        return cell;
    }

    /**
     * Gets the {@link #hourOfDay}.
     *
     * @return Returns the {@link #hourOfDay}.
     */
    public Integer getHourOfDay() {
        return hourOfDay;
    }

    /**
     * Sets the {@link #hourOfDay}.
     *
     * @param hourOfDay The {@link #hourOfDay} to set.
     */
    public void setHourOfDay(final Integer hourOfDay) {
        this.hourOfDay = hourOfDay;
    }

    /**
     * Gets the {@link #value}.
     *
     * @return Returns the {@link #value}.
     */
    public Integer getValue() {
        return value;
    }

    /**
     * Sets the {@link #value}.
     *
     * @param value The {@link #value} to set.
     */
    public void setValue(final Integer value) {
        this.value = value;
    }

    /**
     * Gets the {@link #style}.
     *
     * @return Returns the {@link #style}.
     */
    public String getStyle() {
        return style;
    }

    /**
     * Sets the {@link #style}.
     *
     * @param style The {@link #style} to set.
     */
    public void setStyle(final String style) {
        this.style = style;
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public int compareTo(final DynaSheetCell other) {
        return new CompareToBuilder().append(value, other.value).toComparison();
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public boolean equals(final Object other) {
        if (!(other instanceof DynaSheetCell)) {
            return false;
        }
        final DynaSheetCell castOther = (DynaSheetCell) other;
        return new EqualsBuilder().append(getValue(), castOther.getValue())
                    .append(getHourOfDay(), castOther.getHourOfDay()).isEquals();
    }

    /**
     * {@inheritDoc}
     */
    @Override
    public int hashCode() {
        return new HashCodeBuilder().append(getValue()).append(getHourOfDay())
                    .toHashCode();
    }

}

Use Cases

Documentation

pe:sheet
pe:sheetcolumn

Attributes (move mouse over the names to see data types)

Name	Description
activeHeaderStyleClass	Active header style class.
allowTabOffSheet	Allow tab off sheet.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
caseSensitiveSort	Case sensitive sort.Default is false.
commentedCellStyleClass	Commented cell style class.
converter	EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage
currentColStyleClass	Current column style class.
currentHeaderStyleClass	Current header style class.
currentRowStyleClass	Current row style class.
currentSortBy	ID of column currently used for sorting (internal).
emptyMessage	Message when no records.
errorMessage	Global error message when sheet is in error.
extender	JavaScript function to extend Handsontable options.
filteredValue	Filtered and sorted list of values.
fixedCols	Number of fixed columns when scrolling.
fixedRows	Number of fixed rows when scrolling.
fixedRowsBottom	Number of fixed rows at bottom.
height	Height in pixels.
id	Unique identifier of the component in a namingContainer.Default is generated.
immediate	When set true, process validations logic is executed at apply request values phase for this component.Default is false.
invalidCellStyleClass	Invalid cell style class.
locale	Locale.Default is en-US.
maxCols	Maximum number of columns.
maxRows	Maximum number of rows.
minCols	Minimum number of columns.Default is 0.
minRows	Minimum number of rows.Default is 0.
movableCols	Allow columns to be moved.Default is false.
movableRows	Allow rows to be moved.Default is false.
noWordWrapStyleClass	No word wrap style class.
nullSortOrder	Null sort order placement.Default is 1.
origSortOrder	Original sort order for reset (internal).
placeholderCellStyleClass	Placeholder cell style class.
readOnly	Sheet read only.Default is false.
readOnlyCellStyleClass	Read only cell style class.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
required	Marks component as required.Default is false.
requiredMessage
resizableCols	Allow columns to be resizable.Default is false.
resizableRows	Allow rows to be resizable.Default is false.
rowHeader	An el expression resolving to a header for each row. Optional.
rowKey	Unique identifier of row data.
rowStyleClass	Style class for each row (EL).
selectedColumn	Selected column index.
selectedLastColumn	Last selected column index.
selectedLastRow	Last selected row index.
selectedRow	Selected row index.
selectionMode	Selection mode: single, range, multiple.Default is multiple.
showColumnHeaders	Show column headers.Default is true.
showRowHeaders	Show row headers.Default is true.
sortBy	Column/value expression to sort by (Object for correct type).
sortOrder	Sort direction.Default is ASCENDING.
stretchH	Handsontable stretchH.
style	Inline style of the component.
styleClass	Style class of the component.
tabindex	Tab index.Default is 0.
validator	A method expression referring to a method validating the input.
validatorMessage
value	The value of the sheet (java.util.List).
valueChangeListener	A method binding expression referring to a method for handling a valuchangeevent.
var	Request-scope attribute name for the current row data.
widgetVar	Name of the client side widget.
width	Width in pixels.

Attributes (move mouse over the names to see data types)

Name	Description
autoCompleteAllowInvalid	Autocomplete allow invalid.Default is false.
autoCompleteFilter	Autocomplete filter.Default is true.
autoCompleteStrict	Autocomplete strict mode.Default is true.
autoCompleteTrimDropdown	Autocomplete trim dropdown.Default is true.
autoCompleteVisibleRows	Autocomplete visible rows.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
colType	Column type (text, numeric, date, etc).Default is text.
colWidth	Column width.
converter	EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage
dateFormat	Moment.js date format.Default is DD/MM/YYYY.
datePickerConfig	JSON config for date picker.
filterBy	Filter by value expression.
filterMatchMode	Filter match mode.
filterOptions	Filter options.
filterValue	Submitted filter value.
headerText	Header text for the column.
id	Unique identifier of the component in a namingContainer.Default is generated.
immediate	When set true, process validations logic is executed at apply request values phase for this component.Default is false.
numericLocale	Numeric locale.Default is en-US.
numericPattern	Numeric format pattern.Default is 0 a.
onvalidate	Client-side cell validation script.
passwordHashLength	Password fixed length.
passwordHashSymbol	Password mask symbol.Default is *.
readOnly	Column read only.Default is false.
readonlyCell	Cell read only.Default is false.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
required	Marks component as required.Default is false.
requiredMessage
selectItems	Select items for dropdown/autocomplete.
sortBy	Column/value expression to sort by (Object for correct type).
sortOrder	Sort direction.Default is ASCENDING.
styleClass	Style class for the cell.
timeFormat	Moment.js time format.Default is h:mm:ss a.
trimWhitespace	Whether to trim whitespace in cell contents.Default is true.
validator	A method expression referring to a method validating the input.
validatorMessage
value	Value of the component.
valueChangeListener	A method binding expression referring to a method for handling a valuchangeevent.
visible	Column visible.Default is true.
wordWrap	Word wrap.Default is true.