admin管理员组

文章数量:1418087

In my web application, I'm taking liberties with the design of primefaces datatable to optimize data layout on the screen. Particularly faking two-level rows per item. Like this:

<p:datatable>
    <p:columnGroup type="header">
        <p:row>
            <p:column headerText="Number" />
            <p:column headerText="Type" />
            <p:column headerText="Date" />
            <p:column headerText="Amount" />
        </p:row>
        <p:row>
            <p:column headerText="Status" />
            <p:column headerText="Description" colspan="3" />
        </p:row>
    </p:columnGroup>

    <p:column>
         [Number]<br />
         [Status]
    </p:column>
    <p:column colspan="3">

         <table>
             <tr>
                 <td>[Type]</td>
                 <td>[Date]</td>
                 <td>[Amount]</td>
             </tr>
             <tr>
                 <td colspan="3">[Description]</td>
             </tr>
         </table>

    </p:column>

</p:datatable>

To get this sort of layout:

|----------------------------------------|
| Number   | Type | Date        | Amount |
| Status   | Description                 |
|----------------------------------------|
| 1        | A    | Feb 2, 2025 |    $10 |
| Active   | Number 1 description        |
|----------------------------------------|
| 2        | B    | Feb 1, 2025 |    $20 |
| Inactive | Number 2 description        |
|----------------------------------------|

Now I'm getting 508 issues because the table headers obviously don't match the table cell content.

What alternatives can I do to preserve the layout and provide the reader with the information to read the table data properly? Is it possible to generate a separate table with the same data just for the reader?

本文标签: html508 alternative to primefaces datatableStack Overflow