Column Width in Rich:Datatable

column width in rich:datatable

Try the <rich:column>'s headerClass attribute, as so:

<rich:column headerClass="myWidth">
...
</rich:column>

Then, in your CSS (embedded or linked):

.myWidth {width:150px}

You may also have some contravening "white-space" CSS property coming into play somewhere, so you might want to specify the .myWidth selector as so:

.myWidth {width:150px; white-space:normal!important}

Rich Extended DataTable column widths

<rich:extendedDataTable> really doesn't handle horizontal scrolling very well. In fact, it seems like the developers set out to make horizontal scrolling next to impossible.

You can put <rich:extendedDataTable> in a <div> with horizontal scrolling enabled, but it's not going to work if you leave it at that. One of the nested <div>s in <rich:extendedDataTable> (div.extdt-innerdiv) is absolutely positioned, removing it from the flow of the document.

For reference, this is the basic output structure of <rich:extendedDataTable>, assuming three <rich:column> elements with a width of 100px and two records:

<div id="form_id:edt_id" class="extdt-maindiv rich-extdt-maindiv">
    <div id="form_id:edt_id:od" class="extdt-outerdiv">
        <div id="form_id:edt_id:innerd" class="extdt-innerdiv">
            <table id="form_id:edt_id:tu" class="extdt-table-layout">
                <colgroup id="form_id:edt_id:colgroup:header">
                    <col width="100" />
                    <col width="100" />
                    <col width="100" />
                </colgroup>
                <thead id="form_id:edt_id:header" class="extdt-thead">
                    <tr class="extdt-subheader rich-extdt-subheader">
                        <th id="form_id:edt_id:column_1_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 1</th>
                        <th id="form_id:edt_id:column_2_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 2</th>
                        <th id="form_id:edt_id:column_3_id" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell">Column Header 3</th>
                    </tr>
                    <tr class="extdt-table-filterrow rich-extdt-subheader"> <!-- only if filtering is enabled -->
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                        <th class="extdt-subheadercell rich-extdt-subheadercell"><!-- omitted for example purposes --></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="3">
                            <div id="form_id:edt_id:sd" class="extdt-content">
                                <table id="form_id:edt_id:n" class="extdt-table-layout">
                                    <colgroup id="form_id:edt_id:colgroup:body">
                                        <col width="100" />
                                        <col width="100" />
                                        <col width="100" />
                                    </colgroup>
                                    <tbody id="form_id:edt_id:tb">
                                        <tr id="form_id:edt_id:n:0" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:0:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 1</div>
                                            </td>
                                            <td id="form_id:edt_id:0:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 1</div>
                                            </td>
                                        </tr>
                                        <tr id="form_id:edt_id:n:1" class="extdt-firstrow rich-extdt-firstrow">
                                            <td id="form_id:edt_id:1:column_1_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 1, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_2_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 2, Row 2</div>
                                            </td>
                                            <td id="form_id:edt_id:1:column_3_id" class="extdt-cell rich-extdt-cell">
                                                <div class="extdt-cell-div">Column 3, Row 2</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </tbody>
                <tfoot id="form_id:edt_id:footer">
                    <tr class="extdt-footer rich-extdt-footer">
                        <td class="extdt-footercell rich-extdt-footercell" scope="colgroup" colspan="3">
                            <!-- table footer goes here if defined -->
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div id="form_id:edt_id:column_1_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_2_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
    <div id="form_id:edt_id:column_3_idmenu">
        <script type="text/javascript">
            // context menu script snipped for example purposes
        </script>
    </div>
</div>

You could add horizontal scrolling to div.extdt-innerdiv, but <rich:extendedDataTable>'s column auto-resizing functionality (ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios()) essentially gets confused by this, resizing all columns that begin past the component's maxWidth (derived from the initial width of div.extdt-maindiv) to 20px wide.

I've tried...

Wrapping <rich:extendedDataTable> with a <div> element and setting the following:
- position: relative;
- width: 100%;
- overflow-x: auto;
- a desired height, otherwise you'll just see scrollbars due to the next bullet point.
Making div.extdt-maindiv absolutely-positioned
Giving both div.extdt-outerdiv and div.extdt-innerdiv static positioning and auto widths

...but that doesn't seem to have any effect.

I'm thinking it may be due to the fact that I'm making most of these changes in Firebug, and mainDiv.getWidth() (from calculateWidthsFromRatios()) is retrieving a cached value, mainDiv.element.boxWidth. This value is being set in ClientUI.common.box.Box.setWidth() (common-scrollable-data-table.js), and it's only called once; it does not get called again if I resize the browser window (the <rich:extendedDataTable> in my case has 100% width).

I will try making these changes in my CSS file to see if everything just magically works. The JavaScript for <rich:extendedDataTable> is pretty complex, though, and it's not documented, so I could be missing something somewhere. I'll follow up with my results.

EDIT: After making the changes in my CSS, I still experienced the column-shortening problem.

So, to avoid having to create a wrapper div, I added horizontal scrolling to div.extdt-innerdiv:

.extdt-innerdiv { overflow-y: hidden; overflow-x: auto !important; }

Then, in the footer of the <rich:extendedDataTable>, I disabled the calculateWidthsFromRatios() function:

<rich:extendedDataTable id="edtId">
    <!-- rest of extended data table -->
    <f:facet name="footer">
        <script type="text/javascript">
            jQuery(function() {
                // Disable ratio-based column resizing.
                ExtendedDataTable.DataTable_formId_edtId.calculateWidthsFromRatios = function() {};
            });
        </script>
    </f:facet>
</rich:extendedDataTable>

I used the footer of the table in order to force this JavaScript to execute every time the component reRendered.

Even with this solution, the user won't be able to manually expand the widths of the columns, because the JavaScript in extended-data-table.js prevents columns from being resized wider than mainDiv.element.boxWidth. In order to enable resizing like this, one might as well just submit a patch to JBoss to fix <rich:extendedDataTable>, as there are currently no plans to modify its behavior in RichFaces 3.X (according to #RF-4871 in the JBoss Community JIRA).

Good luck.

JSF rich:datatable column display very long text in multiple lines

For displaying long text in multiple line you can use width attribute of rich:column:

<rich:column width="150" ...>

or the same for h:column:

<h:column width="110">

If you don't want to display text of datatable cell in multiple lines, then

1) you can use columnClasses attribute of rich:dataTable and specify no-wrap style for that column. For example combination

<rich:dataTable columnClasses="nowrap,">

with CSS

.nowrap {
    white-space: nowrap;
}

will be resulted as table with non wrapped first column.

2) You can use style or styleClass attributes of rich:column for the same result (with the same CSS).

Fixing width of rich:dataTable

You can apply the css style to the rich:dataTable using the style attribyte . For example ,

<rich:dataTable id="table"  style="width:750px" >

rich:dataTable headerClass attribute issue

When you investigate the rendered XHTML-code, you will recognize

the headerClass content is added to the tr of the header row
the columnClassES content is, tokenized by space, added to the appropriate columns td

To have the commands of your class1 CSS on the same layer like rf-dt-hdr-c, just change the CSS definition to

.class1 th {
  text-align:left;
  color:#000;
  font-weight:normal;
}

Hope it helps...

rich:dataTable header height

The background image starts repeating itself, which it shouldn't do.

You can fix that with this:

.rf-dt-hdr-c {
    background-repeat: repeat-x;
}

Column Width in Rich:Datatable