Show Report In Two Columns

Question

Apex 3.2
I have a report and it has 1 column and 22 rows.
At the moment, I show the first 15 rows and then you must paginate.
The report will not grow much, may be to 30 rows.
Is there a way to display the first 15 rows in 1 column and the second in another column, side by side etc
Gus

Answer 1

GusC wrote:
Apex 3.2
I have a report and it has 1 column and 22 rows.
At the moment, I show the first 15 rows and then you must paginate.
The report will not grow much, may be to 30 rows.
Is there a way to display the first 15 rows in 1 column and the second in another column, side by side etc
This is a presentation problem so the correct place to solve it is in the presentation layer using CSS. CSS3 introduces multiple column layouts, but this feature is only supported in recent browser versions—in particular requiring IE10+ in standards mode, which I suspect will be a problem as (a) you're not likely to be using IE10, and (b) APEX 3.2 themes aren't HTML5 and won't trigger standards mode (and aren't likely to be fully compatible even if forced to).
Nonetheless, I think it's a technique that's worth demonstrating (if only for me to get some experience of using it), before considering an alternative option using interleaved row ordering and CSS floats that might be of more immediate use to you.
Start with a standard report using a basic query on the [OE]HR EMPLOYEES table:
select
    first_name
  , last_name
  , phone_number
from
    oehr_employees
order by
    last_name
  , first_name
The appropriate structure for a single column report with a predefined sort order is an ordered list, so we create a custom generic row report template, as a copy of the Standard report template with the following modifications:
Before Rows
<table cellpadding="0" border="0" cellspacing="0" id="report_#REGION_STATIC_ID#" class="pagination-container">
  #TOP_PAGINATION#
</table>
<ol class="single-value-list" #REPORT_ATTRIBUTES#>
Before Each Row
<li>
Column Template 1
#COLUMN_VALUE#
After Each Row
</li>
After Rows
</ul>
<div class="t17CVS">#EXTERNAL_LINK##CSV_LINK#</div>
<table cellpadding="0" border="0" cellspacing="0" class="pagination-container">
  #PAGINATION#
</table>
This report template is generic enough to be used in both solutions, and although it appears you don't need pagination in the solution, I've retained it to provide more flexibility and because it involves an interesting problem in creating balanced columns on the last page in the interleaved row order option.
As the template only displays one column per row, and to exercise the column layout break properties, all of the table columns are hidden and we create a derived column that uses an HTML Expression containing some hCard microformat markup to make the list item content span 2 lines:
<div class="vcard">
  <span class="fn n"><span class="given-name">#FIRST_NAME# <span class="family-name">#LAST_NAME#</span></span>
  <div class="tel">#PHONE_NUMBER#</div>
</div>
We can then implement some basic list/hCard formatting using CSS:
  Basic list/hCard formatting common to both CSS3 multi-column and interleaved rows/CSS float solutions
ol {
  margin-left: 0;
  padding-left: 0;
  width: 44em;
  white-space: nowrap;
  list-style-type: square;
  ol li {
    margin: 0 0 0.5em 2em;
.vcard .family-name {
  font-weight: 600;
  text-transform: uppercase;
The CSS3 multi-column rules used in the first report region are pretty straightforward, although they have to take account of the current level of browser support by using vendor-specific properties where appropriate:
  CSS3 multi-column formatting
.multi-col ol {
/* Safari/Chrome/Opera */
  -webkit-column-count: 2;
  -webkit-column-gap: 0;
  /* Firefox */
  -moz-column-count: 2;
  -moz-column-gap: 0;
  /* IE10+ */
  column-count: 2;
  column-gap: 0;
  .multi-col ol li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    /* Workaround for FF as break-inside doesn't work. */
    page-break-inside: avoid;
For the interleaved row ordering workaround used in the second report, the query has to be modified to calculate the page each row will appear on, and the position in each column on the page it will occupy:
with emps_ordered_unique as (
    select
-- If you need distinct rows then just restrict them at the start
        distinct
        first_name
      , last_name
      , phone_number
      , row_number()
          over (
            order by last_name, first_name) row#
    from
        oehr_employees
    order by
        last_name
      , first_name)
  , emps_interleaved as (
      select
          first_name
        , last_name
        , phone_number
        , row#
          -- 30 is overall number of rows per page
        , ceil(row# / 30) page#
          -- 30 is overall number of rows per page; 15 maximum number of rows per column
        , mod(row# - 1, least(ceil(count(*) over (partition by ceil(row# / 30)) / 2), 15)) col_row#
      from
          emps_ordered_unique)
select
    first_name
  , last_name
  , phone_number
from
    emps_interleaved
order by
    page#
  , col_row#
  , row#
The trick here is to interleave the rows, with those that have the same position in each column appearing in pairs so that they can be laid out side-by-side using element widths and CSS floats.
The CSS for this report is:
  Interleaved rows/CSS float formatting
#interleaved .pagination-container {
  clear: both;
#interleaved ol {
  #interleaved ol li {
    float: left;
    width: 20em;
The drawback with the latter option is that although the list entries are visually ordered down and across the columns, they are not semantically ordered thus in the HTML markup, so any user perceiving the list without this CSS (for example via a screenreader, or a mobile device with an alternative style sheet) gets the list in a weird order. For that reason I probably wouldn't use this approach. At present I'd implement the CSS3 multi-column approach as a progressive enhancement for users with up-to-date browsers, and allow it to gracefully degrade to a basic 1-column list in legacy versions.