Indentation levels

To format the rows into a more readable structure, use four predefined indentation levels. Assign the .csr-level-1 (resp 2, 3, or 4) class to each <tr> element.

There are two possible styles for indentation:

Example of the default indentation:
          <table class="csr-about">
    <!-- ... -->
</table>
 
<div class="csr-content">
    <table class="csr-data">
        <thead>
            <tr>
                <td width="80%">${VAR.header_label.name}</td>
                <td width="20%" class="csr-align-right">${VAR.header_value.name}</td>
            </tr>
        </thead>
        <tbody>
 
            <!-- Section 1 -->
            <tr class="csr-level-1">
                <td class="csr-label">${VAR.var_1.name}</td>
                <td class="csr-value">${VAR.var_1.value}</td>
            </tr>
            <tr class="csr-level-2">
                <td class="csr-label">${VAR.var_1a.name}</td>
                <td class="csr-value">${VAR.var_1a.value}</td>
            </tr>
            <tr class="csr-level-3">
                <td class="csr-label">${VAR.var_1a_of.name}</td>
                <td class="csr-value">${VAR.var_1a_of.value}</td>
            </tr>
            <!-- END Section 1 -->
 
            <!-- Section 2 -->
            <tr class="csr-level-1">
                <td class="csr-label">${VAR.var_2.name}</td>
                <td class="csr-value">${VAR.var_2.value}</td>
            </tr>
            <tr class="csr-level-2">
                <td class="csr-label">${VAR.var_2a.name}</td>
                <td class="csr-value">${VAR.var_2a.value}</td>
            </tr>
            <tr class="csr-level-3">
                <td class="csr-label">${VAR.var_2a1.name}</td>
                <td class="csr-value">${VAR.var_2a1.value}</td>
            </tr>
            <!-- END Section 2 -->
 
        </tbody>
 
 
        <!-- Total all -->
        <tfoot class="csr-totalall">
            <tr>
                <td width="80%" class="csr-label">${VAR.total_all.name}</td>
                <td width="20%" class="csr-value">${VAR.total_all.value}</td>
            </tr>
        </tfoot> 
        <!-- END Total all -->
    </table>
</div> 

        
An example of how different indentation levels look like in a table created using the Country-Specific Reports SuiteApp (when default indentation is used).
Example of the deep indentation:
Note:

When using totals, the title of the section should have an empty value, and the total should have the same indentation level as the title (see the code sample below).

          <table class="csr-about">
    <!-- ... -->
</table>
 
<div class="csr-content">
    <table class="csr-data csr-indent-deep">
        <thead>
            <tr>
                <td width="80%">${VAR.header_label.name}</td>
                <td width="20%" class="csr-align-right">${VAR.header_value.name}</td>
            </tr>
        </thead>
        <tbody>
 
            <!-- Section A -->
            <tr class="csr-level-1">
                <td class="csr-label">${VAR.var_A.name}</td>
                <td></td>
            </tr>
 
            <!-- Subsection A I. -->
            <tr class="csr-level-2">
                <td class="csr-label">${VAR.var_AI.name}</td>
                <td></td>
            </tr>
            <tr class="csr-level-3">
                <td class="csr-label">${VAR.var_AI1.name}</td>
                <td class="csr-value">${VAR.var_AI1.value}</td>
            </tr>
            <tr class="csr-level-3">
                <td class="csr-label">${VAR.var_AI2.name}</td>
                <td class="csr-value">${VAR.var_AI2.value}</td>
            </tr>
            <tr class="csr-level-4">
                <td class="csr-label">${VAR.var_AI2_of.name}</td>
                <td class="csr-value">${VAR.var_AI2_of.value}</td>
            </tr>
            <!-- Total for subsection A I. -->
            <tr class="csr-level-2 csr-total">
                <td class="csr-label">${VAR.var_AI_total.name}</td>
                <td class="csr-value">${VAR.var_AI_total.value}</td>
            </tr>
            <!-- END Subsection A I. -->
 
            <!-- Subsection A II. -->
            <tr class="csr-level-2">
                <td class="csr-label">${VAR.var_AII.name}</td>
                <td class="csr-value">${VAR.var_AII.value}</td>
            </tr>
            <!-- END Subsection A II. -->
 
            <!-- Total for section A -->
            <tr class="csr-level-1 csr-total">
                <td class="csr-label">${VAR.var_A_total.name}</td>
                <td class="csr-value">${VAR.var_A_total.value}</td>
            </tr>
            <!-- END Section A -->
        </tbody>
 
        <!-- Total all -->
        <tfoot class="csr-totalall">
            <tr>
                <td width="80%" class="csr-label">${VAR.total_all.name}</td>
                <td width="20%" class="csr-value">${VAR.total_all.value}</td>
            </tr>
        </tfoot> 
        <!-- END Total all -->
     
    </table>
</div> 

        
An example of how different indentation levels look like in a table created using the Country-Specific Reports SuiteApp (when deep indentation is used).

Related Topics

Creating a Template for the Country-Specific Reports SuiteApp
Sample table
Subtotals and totals
List of accounts
Comparative column
Two-columns layout
Custom alignment
About sections

General Notices