5

Hi i want to display a list in table in following way..

rec1   rec2   rec3   rec4

rec5   rec6   rec7   rec8

rec9   rec19  rec11  rec12

Where the records are displayed on the next row when a certain amount of columns has been reached.

The code I'm currently using is:

<head>
    <script> ul { columns: 2; -webkit-columns: 2; -mox-columns: 2; } </script> 
</head>
<body>
    <div>
        <ul class="columns" data-columns="2" style="column-count:2">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
            <li>List 4</li>
            <li>List 5</li>
            <li>List 6</li>
            <li>List 7</li>
            <li>List 8</li>
            <li>List 9</li>
            <li>List 10</li>
            <li>List 11</li>
        </ul>
    </div>
</body>
Improve this question
3
  • What have you tried so far? Can you show us some of the code you are currently using?
    – user254875486
    Commented May 13, 2013 at 7:49
  • <head><script> ul { columns: 2; -webkit-columns: 2; -mox-columns: 2; } </script> </head> <body> <div> <ul class="columns" data-columns="2" style="column-count:2"> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> <li>List 6</li> <li>List 7</li> <li>List 8</li> <li>List 9</li> <li>List 10</li> <li>List 11</li> </ul></div></body>
    – Reddy
    Commented May 13, 2013 at 7:52
  • I don't think there is an easy way to do this using an <ul>. Can you use an HTML table instead of an unordered list?
    – user254875486
    Commented May 13, 2013 at 8:17

2 Answers 2

Reset to default
6

What you could do is loop over your records and write regular HTML. Count the rows you wish to show, and then check each cycle with a remainder division (where the divisor is the amount of columns you want) if you need to write a new tablerow.

I was a bit bored, and decided to do this:

My Controller/Extension:

public with sharing class Tester {
public List<String> records{get;set;}

public Tester()
{
    records = new List<String>();
    records.add('rec1');
    records.add('rec2');
    records.add('rec3');
    records.add('rec4');
    records.add('rec5');
    records.add('rec6');
    records.add('rec7');
    records.add('rec8');
    records.add('rec9');
    records.add('rec10');
    records.add('rec11');
    records.add('rec12');
}
}

Visualforce Page:

<apex:page controller="Tester">
    <apex:variable value="{!1}" var="counter"/>
    <table>
        <tr>
            <apex:repeat value="{!records}" var="rec">
                <td>{!rec}</td>
                <apex:outputText rendered="{!AND((MOD(counter, 4) == 0), (counter < records.size))}" value="</tr><tr>" escape="false"/>
                <apex:variable var="counter" value="{!counter + 1}"/>
            </apex:repeat>
        </tr>
    </table>
</apex:page>
Improve this answer
2
  • 1
    No it's not! Good luck using panelGrid with repeat for example (second paragraph in the help). It'll have it's uses but yours is way more flexible.
    – eyescream
    Commented May 13, 2013 at 9:40
  • If I were rendering the output to PDF, this would be my preferred solution to this situation to allow flexibility of formatting, etc. Nice job PJC!
    – crmprogdev
    Commented May 13, 2013 at 15:09
5

Sounds like a job for <apex:panelGrid>?

<apex:page>
    <apex:panelGrid columns="3" id="theGrid">
        <apex:outputText value="First" id="theFirst"/>
        <apex:outputText value="Second" id="theSecond"/>
        <apex:outputText value="Third" id="theThird"/>
        <apex:outputText value="Fourth" id="theFourth"/>
    </apex:panelGrid>
</apex:page>

Will cause the last item to "overflow" to next row.

Bit less mess than hand-crafting <tr>s and figuring out when to close them with escape="false"...

Improve this answer
2
  • Haha, this is awesome, didn't know this component existed, now i'll have to downvote my own answer :)
    – pjcarly
    Commented May 13, 2013 at 9:14
  • Hi @PJC! Leave it, there probably are some situations when you want such "few things in a row but it can't be a table" and then your technique with putting separator of some kind (close ul and make new one, put <br/> etc) might be still a valid solution...
    – eyescream
    Commented May 13, 2013 at 9:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .