Grouped column headers in table

edited February 17 in Ideas
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?
1
1 votes

Under Consideration · Last Updated

Comments

  • edited September 2018
    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.
  • edited September 2018
    Sorry, I meant Table Component. This. https://docs.skuid.com/latest/en/skuid/components/table/
  • edited September 2018
    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.
  • edited February 17
    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>



Sign In or Register to comment.