Home/ Questions/Q 7811491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T04:10:54+00:00

Is there a way to split a column into sub columns for a table?

  • 0

Is there a way to split a column into sub columns for a table? For example, the main columns are the iterations for a release, but then there would be sub-columns of Resources|Planned|Accepted for each iteration.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do this fairly simply with a little CSS and a couple of spans. A quick example is below. You could probably get fancier with your CSS and draw some borders around the sub columns, but this gives the idea. Note that the sorting of the entire column is dictated by the value in the first sub column when you do things this way…

        <html>
        <head>
        <title>Table With Sub Columns Example</title>
        <meta name="Name" content="Table With Sub Columns Example" />

        <style type="text/css">

            .subColumnLeft {
                float: left;
                text-align: center;
                width: 200px;
            }

            .subColumnRight {
                float: right;
                text-align: center;
                width: 200px;
            }


        </style>


        <script type="text/javascript" src="https://rally1.rallydev.com/apps/1.31/sdk.js"></script>
        <script type="text/javascript">

            rally.addOnLoad(function(){

                var table = new rally.sdk.ui.Table({
                    columns: [
                        {key: 'name', header: 'Name', width: 100},
                        {key: 'subColumnData', header: '<span class="subColumnLeft">Sub Column 1 Header</span>' +
                                '<span class="subColumnRight">Sub Column 2 Header</span>', width: 430}
                    ]
                });

                table.addRows([
                    {
                        name: 'Test 1',
                        subColumnData: '<span class="subColumnLeft">Sub Column 1 Data Here</span>' +
                                '<span class="subColumnRight">Sub Column 2 Data Here</span>'
                    },
                    {
                        name: 'Test 2',
                        subColumnData: '<span class="subColumnLeft">Sub Column 1 Data Here</span>' +
                                '<span class="subColumnRight">Sub Column 2 Data Here</span>'
                    }
                ]);

                table.display('tableDiv');

            });

        </script>
    </head>
    <body>
    <div id="tableDiv"></div>
    </body>
    </html>
    • 0