Grouped column headers in table

  • 1
  • Idea
  • Updated 1 month ago
  • Under Consideration
We have a page that uses a table control. The table has six columns. The columns can be logically organized into two groups of three. We would like to display a second-level header above the normal column headers that spans the three columns that make up each group. Can this be done within the table control? If not, is there a good way to fake it?
Photo of Peter Larsen

Peter Larsen

  • 412 Points 250 badge 2x thumb

Posted 2 months ago

  • 1
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
What do you mean by table control? I'm not following. Can you share pictures to describe what you're experiencing and what you're wanting.
Photo of Peter Larsen

Peter Larsen

  • 412 Points 250 badge 2x thumb
Sorry, I meant Table Component. This. https://docs.skuid.com/latest/en/skuid/components/table/
Photo of Peter Larsen

Peter Larsen

  • 412 Points 250 badge 2x thumb
Here's a very simple schematic of what I'm trying to do. 

https://docs.google.com/spreadsheets/d/16zWAhcKMx51EOgl5hKrIL883EPuFDQJ3N9rWmG3oa9I/edit?usp=sharing

The first row of the spreadsheet represents the part that I'm unable to do in Skuid.
Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
Hi Peter

If this not meant to be dynamic then here is a sample page using the responsive grid component to group the columns. Let us know if this works?

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true" theme="Paper">
    <models>
        <model id="OppModel1" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity">
            <fields>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="Amount"/>
                <field id="Campaign.Name"/>
                <field id="Id"/>
                <field id="CloseDate"/>
                <field id="Description"/>
                <field id="ExpectedRevenue"/>
                <field id="Pricebook2Id"/>
                <field id="Pricebook2.Name"/>
                <field id="Probability"/>
                <field id="TotalOpportunityQuantity"/>
                <field id="StageName"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-rrX-569">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1">
                    <components>
                        <richtext multiple="false" uniqueid="sk-rrT-560">
                            <contents>&lt;p style="text-align: center;"&gt;&lt;strong&gt;Group 1&lt;/strong&gt;&lt;/p&gt;
</contents>
                        </richtext>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <richtext multiple="false" uniqueid="sk-rrZ-591">
                            <contents>&lt;p style="text-align: center;"&gt;&lt;strong&gt;Group 2&lt;/strong&gt;&lt;/p&gt;
</contents>
                        </richtext>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
        <grid uniqueid="sk-rrP-498">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1">
                    <components>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="OppModel1" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-rrG-301" emptysearchbehavior="query">
                            <fields>
                                <field id="Account.Name" uniqueid="fi-rrG-303"/>
                                <field id="Probability" hideable="true" uniqueid="fi-rs1-748"/>
                                <field id="Amount" uniqueid="fi-rrG-304"/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                            <searchfields/>
                        </skootable>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="OppModel1" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-rrR-528" emptysearchbehavior="query">
                            <fields>
                                <field id="Account.Name" uniqueid="sk-rrR-529"/>
                                <field id="Probability" hideable="true" uniqueid="fi-rs8-777"/>
                                <field id="Amount" uniqueid="sk-rrR-530"/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                            <searchfields/>
                        </skootable>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-rr7-240"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>