Sheet provides a spreadsheet experience you are already familiar with. You can finally work with large volumes of data without worrying about performance issues. Notice the fixed columns and rows, and the custom cell styling. Validation is per cell, try and enter "abc" into the Price column which is expecting a BigDecimal.

<p:importEnum type="org.primefaces.extensions.showcase.model.sheet.AssetType" var="AssetType"/>
    <p:importEnum type="org.primefaces.extensions.showcase.model.sheet.PlatformType" var="PlatformType"/>

    <pe:sheet id="sheet" widgetVar="sheetWidget" value="#{sheetController.assets}" var="row"
              height="400" rowKey="#{row.assetId}" fixedCols="2" fixedRows="3" showRowHeaders="true"
              resizableCols="true" resizableRows="true" filteredValue="#{sheetController.filteredAssets}"
              sortBy="#{row.assetId}" sortOrder="ascending" readOnly="false" rowStyleClass="#{row.purchasePrice gt 0 ? 'positive' : 'negative'}">

        <p:ajax event="change" listener="#{sheetController.cellChangeEvent}"/>

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

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

        <pe:sheetcolumn headerText="Id (read-only)"
        <pe:sheetcolumn headerText="Icon"
        <pe:sheetcolumn headerText="Type" value="#{row.assetType}" colWidth="100"
                        sortBy="#{row.assetType}" filterBy="#{row.assetType}"
        <pe:sheetcolumn headerText="Platform" value="#{row.platform}" colWidth="100"
                        sortBy="#{row.platform}" filterBy="#{row.platform}"
        <pe:sheetcolumn headerText="Arch" value="#{row.platformArch}" readOnly="true"
                        colWidth="100" sortBy="#{row.platformArch}"
        <pe:sheetcolumn headerText="Active" value="#{}" colWidth="60" colType="checkbox"/>
        <pe:sheetcolumn headerText="Price" value="#{row.purchasePrice}" colWidth="100"
                        styleClass="htRight #{row.purchasePrice gt 0 ? 'positive' : 'negative'}"
                        requiredMessage="Price is required!">
            <f:converter converterId="javax.faces.BigDecimal"/>
        <pe:sheetcolumn headerText="Password" value="#{row.password}" colWidth="100" styleClass="password"
        <pe:sheetcolumn headerText="Date" value="#{row.purchaseDate}" colWidth="110"
            <f:convertDateTime type="date" pattern="yyyy-MM-dd"/>
        <pe:sheetcolumn headerText="Time" value="#{row.purchaseTime}" colWidth="110"
                        timeFormat="h:mm:ss a">
            <f:convertDateTime type="time" pattern="h:mm:ss a"/>
        <pe:sheetcolumn headerText="Value 1" value="#{row.value1}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 2" value="#{row.value2}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 3" value="#{row.value3}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 4" value="#{row.value4}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 5" value="#{row.value5}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 6" value="#{row.value6}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 7" value="#{row.value7}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 8" value="#{row.value8}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 9" value="#{row.value9}" colWidth="100" colType="numeric"/>
        <pe:sheetcolumn headerText="Value 10" value="#{row.value10}" colWidth="100" colType="numeric"/>

    <style type="text/css">
        .positive {
            color: Green !important;

        .negative {
            color: Red !important;

        .password {
            color: DarkViolet !important
Components and more
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
binding An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
converter An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's a static text, it must refer to a converter id.
converterMessage Message to display when conversion fails.
currentColClass The style class to apply dynamically to the selected column.
currentRowClass The style class to apply dynamically to the selected row.
emptyMessage The message to be displayed if no records exist in the sheet.
errorMessage A global error message to be added when the Sheet is invalid. If not specified, no global message is added. If specified, a global message will be added with this value.
filteredValue List to keep the filtered/sorted data if filtering/sorting is enabled.
maxRows Maximum number of rows. Default is infinity.
minRows Minimum number of rows. At least that many of rows will be created during initialization. Default is 0.
maxCols Maximum number of columns. Default is infinity.
minCols Minimum number of columns. At least that many of columns will be created during initialization. Default is 0.
fixedCols The number of columns to fix or freeze on the left when scrolling.
fixedRows The number of rows to fix or freeze on the top when scrolling.
fixedRowsBottom The number of rows to fix or freeze on the bottom when scrolling.
locale The IL8N Locale langauge. Default is en-US.
resizableCols Allow the columns to be manually resizable. Default to false
resizableRows Allow the rows to be manually resizable. Default to false
movableCols Allow the columns to be manually moved. Default to false
movableRows Allow the rows to be manually moved. Default to false
height The height of the sheet in pixels. It is recommended you use this property instead of a style class to ensure it is applied to the proper element. This can be left empty, but performance may suffer.
immediate When set true, process validations logic is executed at apply request values phase for this component. Default is false.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
required Marks component as required.
requiredMessage Message to display when required field validation fails.
rowKey An el expression resolving to a unique key value for each row. Required.
rowStyleClass The style class to apply each row.
showColumnHeaders Boolean value to specify the rendering of the column headers.
showRowHeaders Boolean value to specify the rendering of the row headers.
rowHeader An el expression resolving to a header for each row. Optional.
readOnly Boolean value to specify whether the sheet should be rendered as a read only. This is more efficient than cell by cell, but renders the entire sheet as read only.
sortBy How the sheet rows should be sorted initially. If it is an expression, it must evaluate to the property to be used for sorting - this will not work when columns are specified dynamically. Otherwise, it can also be the ID (without any naming containers prefixed, ie. no parent elements with colons) of a sheet column by which the sheet rows should be sorted. In this case, you also need to set the sortBy attribute on the sheet column.
sortOrder Sets sorting order. Default is "ascending". Valid values are "ascending" and "descending".
caseSensitiveSort Case sensitivity for sorting, insensitive by default.
nullSortOrder Defines where the null values are placed in ascending sort order. Default value is "1" meaning null values are placed at the end in ascending mode and at beginning in descending mode. Set to "-1" for the opposite behavior.
stretchH The Handsontable StretchH value. Affects rendering of the column widths. Valid values are "none", "hybrid", "last", "all".
selectionMode Choose between selecting a single cell, a range of adjacent cells and multiple ranges of non-contiguous cells.. Valid values are "single", "multiple", "range".
style Style of the html container element. Width and Height can be configured here in viewport units
styleClass The additional style classes for the rendered table. Multiple classes may be specified delimited by a space.
validator A method expression referring to a method validationg the input.
validatorMessage Message to display when validation fails.
value Datasource of the component.
valueChangeListener A method binding expression referring to a method for handling a valuchangeevent.
var Name of the iterator variable used to refer each data.
width The width of the sheet in pixels. For auto width, leave empty.
allowTabOffSheet Allowing focusing the next component if the sheet is currently on the first or last cell.
tabindex Position of the element in the tabbing order.
extender Name of javascript function to extend the options of the underlying Handsontable plugin.
activeHeaderStyleClass CSS class name for all active headers in selections. The header will be marked with this class name only when a whole column or row will be selected.
commentedCellStyleClass CSS class name added to the commented cells.
currentColStyleClass CSS class name for all visible columns in the current selection.
currentHeaderStyleClass CSS class name for all visible headers in current selection.
currentRowStyleClass CSS class name for all visible rows in the current selection.
invalidCellStyleClass CSS class name for cells that did not pass validation.
noWordWrapStyleClass CSS class name added to cells with cell meta wordWrap: false
placeholderCellStyleClass CSS class name for cells that have a placeholder in use.
readOnlyCellStyleClass CSS class name for read-only cells.
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55