ScrollableDataTable show extra column in Richfaces

Question

I used scrollableDateTable for scrolling data without hide headers, after populating the data in dataTable shows an extra column. How to hide the extra column or remove that column in scrollableDataTable.

Here is my code:

<rich:scrollableDataTable value="#{GameZoneBean.challenge}" var="challenge" rowClasses="gridEvenRow,gridOddRow" headerClass="gridheader" height="110" width="310">
        <rich:column width="120px" sortable="false">
            <f:facet name="header">
                <h:outputText value="Start Time"></h:outputText>
            </f:facet>
            <h:outputText value="#{challenge.startTimeStamp}"></h:outputText>
        </rich:column>
        <rich:column width="80px" sortable="false">
            <f:facet name="header">
                <h:outputText value="Game Status"></h:outputText>
            </f:facet>
            <h:outputText value="#{challenge.gameStatus}"></h:outputText>
        </rich:column>
        <rich:column width="40px" sortable="false">
            <f:facet name="header">
                <h:outputText value="Home"></h:outputText>
            </f:facet>
            <h:outputText value="#{challenge.homeTeam}"></h:outputText>
        </rich:column>
        <rich:column width="40px" sortable="false">
            <f:facet name="header">
                <h:outputText value="Away"></h:outputText>
            </f:facet>
            <h:outputText value="#{challenge.awayTeam}"></h:outputText>
        </rich:column>
</rich:scrollableDataTable>

Answer 1

After increase the width of scrollableDataTable the extra column is not displayed.

<rich:scrollableDataTable value="#{GameZoneBean.challenge}" var="challenge" 
                rowClasses="gridEvenRow,gridOddRow" headerClass="gridheader" height="110" width="285">
                <rich:column width="120px" sortable="false">
                    <f:facet name="header">
                        <h:outputText value="Start Time"></h:outputText>
                    </f:facet>
                    <h:outputText value="#{challenge.startTimeStamp}"></h:outputText>
                </rich:column>
                <rich:column width="80px" sortable="false">
                    <f:facet name="header">
                        <h:outputText value="Game Status"></h:outputText>
                    </f:facet>
                    <h:outputText value="#{challenge.gameStatus}"></h:outputText>
                </rich:column>
                <rich:column width="40px" sortable="false">
                    <f:facet name="header">
                        <h:outputText value="Home"></h:outputText>
                    </f:facet>
                    <h:outputText value="#{challenge.homeTeam}"></h:outputText>
                </rich:column>
                <rich:column width="40px" sortable="false">
                    <f:facet name="header">
                        <h:outputText value="Away"></h:outputText>
                    </f:facet>
                    <h:outputText value="#{challenge.awayTeam}"></h:outputText>
                </rich:column>
</rich:scrollableDataTable>

the reason for showing extra column:

1. This column is used to fill table space when overall width of columns is not enough to cover table space. When columns are resized, they are taking space from this extra column.

So, set width for the first & second columns to the appropriate values.

1. In general this extracolumn used for resizing functionality.