• Settings
    • Locale
    • Change the locale of the datepicker, schedule and client side validation messages.

      Language
      English
      English
      English
      French
      German
      German
      German
      Italian
      Korean
      Spanish
      Catalan
      Dutch
      Portuguese
      Portuguese
      Arabic
      Arabic
      Bulgarian
      Bangla
      Bosnian
      Czech
      Greek
      Estonian
      Persian
      Finnish
      Danish
      Hindi
      Indonesian
      Icelandic
      Croatian
      Japanese
      Hungarian
      Hebrew
      Georgian
      Central Kurdish
      Khmer
      Kyrgyz
      Kazakh
      Lithuanian
      Latvian
      Malay
      Norwegian
      Polish
      Romanian
      Russian
      Slovak
      Slovenian
      Serbian
      Serbian
      Swedish
      Thai
      Turkish
      Ukrainian
      Uzbek
      Vietnamese
      Chinese
      Chinese
  • Resources

Sheet Events

Sheet fires ajax events for cell selection, changes, sorting, filtering and row or column selection. Sheet is a spreadsheet-like in-cell editing component based on Handsontable by Handsoncode.

Sheet Tag Documentation

Data sheet providing Excel like editing, frozen columns and rows, copy/paste, sorting, etc.

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

Sheetcolumn Tag Documentation

Data sheet column used to define the available columns in a Sheet component.

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

Sheet provides the ajax events cellSelect, change, sort, filter, columnSelect and rowSelect. Click a header once to select it, then you may move columns around when the hand icon appears.

Assets
Selected Row Details
Click a row to see details.
Outside Click Deselects

When outsideClickDeselects is false, clicking outside the sheet keeps the current selection.

Assets

Usage


<style>
    .positive {
        color: Green !important;
    }

    .negative {
        color: Red !important;
    }
</style>

<div class="card">
    <h5>Ajax Events</h5>
    <p>Sheet provides the ajax events <i>cellSelect</i>, <i>change</i>, <i>sort</i>, <i>filter</i>, <i>columnSelect</i> and <i>rowSelect</i>. Click a header once to select it, then you may move columns around when the hand icon appears.</p>
    <h:form id="formAjaxEvents">
        <p:messages id="messages" showSummary="true" showDetail="true"/>

        <pe:sheet id="sheet" widgetVar="sheetEventsWidget" value="#{sheetAjaxController.assets}"
                  var="row" height="400" rowKey="#{row.assetId}" showRowHeaders="true"
                  sortBy="#{row.assetId}" sortOrder="ascending" width="1000"
                  stretchH="all" movableCols="true" movableRows="true"
                  filteredValue="#{sheetAjaxController.filteredAssets}">

            <p:ajax event="change" listener="#{sheetAjaxController.cellChangeEvent}" update="messages"/>
            <p:ajax event="columnSelect" listener="#{sheetAjaxController.columnSelectEvent}" update="messages"/>
            <p:ajax event="rowSelect" listener="#{sheetAjaxController.rowSelectEvent}" update="detailPanel messages"/>

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

            <f:facet name="footer">
                <h:outputText value="#{sheetAjaxController.filteredAssets.size()} Records"/>
            </f:facet>

            <pe:sheetcolumn headerText="Id (readOnly)" readOnly="true" value="#{row.assetId}" colWidth="150"/>
            <pe:sheetcolumn headerText="Type (readOnly)" value="#{row.assetType}" readOnly="true" colWidth="100"/>
            <pe:sheetcolumn headerText="Platform (readOnly)" value="#{row.platform}" readOnly="true" colWidth="100"/>
            <pe:sheetcolumn headerText="Arch (readOnly)" value="#{row.platformArch}" readOnly="true" colWidth="100"/>
            <pe:sheetcolumn headerText="Editable" value="#{row.value1}" colWidth="100" styleClass="htRight" colType="numeric"/>
        </pe:sheet>

        <p:panel id="detailPanel" header="Selected Row Details" style="margin-top:1rem">
            <h:panelGrid columns="2" rendered="#{sheetAjaxController.selectedAsset != null}">
                <h:outputText value="ID:"/>
                <h:outputText value="#{sheetAjaxController.selectedAsset.assetId}"/>
                <h:outputText value="Host Name:"/>
                <h:outputText value="#{sheetAjaxController.selectedAsset.hostName}"/>
                <h:outputText value="Platform:"/>
                <h:outputText value="#{sheetAjaxController.selectedAsset.platform}"/>
                <h:outputText value="Type:"/>
                <h:outputText value="#{sheetAjaxController.selectedAsset.assetType}"/>
                <h:outputText value="Arch:"/>
                <h:outputText value="#{sheetAjaxController.selectedAsset.platformArch}"/>
                <h:outputText value="Purchase Price:"/>
                <h:outputText value="#{sheetAjaxController.selectedAsset.purchasePrice}"/>
                <h:outputText value="Active:"/>
                <h:outputText value="#{sheetAjaxController.selectedAsset.active}"/>
            </h:panelGrid>
            <h:outputText value="Click a row to see details." rendered="#{sheetAjaxController.selectedAsset == null}"
                          style="color:#888"/>
        </p:panel>
    </h:form>
</div>

<div class="card">
    <h5>Outside Click Deselects</h5>
    <p>When <code>outsideClickDeselects</code> is <code>false</code>, clicking outside the sheet keeps the current selection.</p>
    <h:form id="formOutsideClickDeselects">
        <p:importEnum type="org.primefaces.extensions.showcase.model.sheet.AssetType" var="AssetType"/>
        <p:importEnum type="org.primefaces.extensions.showcase.model.sheet.PlatformType" var="PlatformType"/>

        <h:panelGroup style="display:block; margin-bottom: 1rem;">
            <p:outputLabel for="platformFilter" value="Filter Platform: " style="margin-right: 0.5rem;"/>
            <p:selectOneMenu id="platformFilter" filter="true" style="width: 200px;">
                <f:selectItem itemLabel="All" itemValue=""/>
                <f:selectItems value="#{PlatformType.ALL_VALUES}" var="pt" itemLabel="#{pt}" itemValue="#{pt}"/>
            </p:selectOneMenu>
        </h:panelGroup>

        <pe:sheet id="sheet" widgetVar="sheetOutsideWidget" value="#{sheetController.assets}" var="row" height="400"
                  rowKey="#{row.assetId}" showRowHeaders="true" sortBy="#{row.assetId}" sortOrder="ascending"
                  outsideClickDeselects="false" filteredValue="#{sheetController.filteredAssets}">

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

            <f:facet name="footer">
                <h:outputText value="#{sheetController.filteredAssets.size()} Records"/>
            </f:facet>

            <pe:sheetcolumn headerText="Id (read-only)"
                            readOnly="true"
                            value="#{row.assetId}"
                            sortBy="#{row.assetId}"
                            colWidth="150"
                            filterBy="#{row.assetId}"/>
            <pe:sheetcolumn headerText="Icon"
                            readOnly="true"
                            styleClass="text-center"
                            value="#{row.icon}"
                            colWidth="80"/>
            <pe:sheetcolumn headerText="Type" value="#{row.assetType}" colWidth="100"
                            sortBy="#{row.assetType}" filterBy="#{row.assetType}"
                            filterOptions="#{sheetOptionProducer.assetTypes}"
                            colType="dropdown"
                            selectItems="#{AssetType.ALL_VALUES}"/>
            <pe:sheetcolumn headerText="Platform" value="#{row.platform}" colWidth="100"
                            sortBy="#{row.platform}" filterBy="#{row.platform}"
                            filterOptions="#{sheetOptionProducer.platformTypes}"
                            colType="autocomplete"
                            selectItems="#{PlatformType.ALL_VALUES}"
                            autoCompleteStrict="false"
                            autoCompleteVisibleRows="4"/>
            <pe:sheetcolumn headerText="Arch" value="#{row.platformArch}" readOnly="true"
                            colWidth="100" sortBy="#{row.platformArch}"
                            filterBy="#{row.platformArch}"
                            filterOptions="#{sheetOptionProducer.archTypes}"/>
            <pe:sheetcolumn headerText="Active" value="#{row.active}" colWidth="60" colType="checkbox"/>
            <pe:sheetcolumn headerText="Price" value="#{row.purchasePrice}" colWidth="100"
                            styleClass="htRight #{row.purchasePrice gt 0 ? 'positive' : 'negative'}"
                            colType="numeric"
                            numericLocale="de-DE"
                            numericPattern="$0,0.00"
                            required="true"
                            requiredMessage="Price is required!">
                <f:converter converterId="jakarta.faces.BigDecimal"/>
            </pe:sheetcolumn>
        </pe:sheet>
    </h:form>
</div>