[Resolved] Tables With Two Headers

[Author]

Posts

[Joe]

Hello,

I am wondering how I could create a loop for a table with multiple headers, one header as rows and one header as a columns. An example of what I'm trying to accomplish can be found on W3.org at the following url hidden link

My table may end up having 30 rows+ of data, and perhaps 10+ columns.

Thanks.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Joe,

Thank you for contacting our support forum.

Let me see how best I can assist you with this one 🙂

Actually the link you provided gave us an example to work with.

<table>
  <caption>Delivery slots:</caption>
  <tr>
    <td></td>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>
  <tr>
    <th scope="row">09:00 - 11:00</th>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">11:00 - 13:00</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
</table>

All you need to do is follow the above example and adapt it to you view output.

So it should look something like this in your view.

<table>
  <caption>Delivery slots:</caption>
  <tr>
    <td></td>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>

<wpv-loop>

<tr>
    <th scope="row">Some shortcode with info</th>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>

</wpv-loop>
</table>
[/php]

Please let me know if this helps.
Thanks,
Shane

[Joe]

Hi Shane,

Thank you, but that's not quite what I'm looking for. I think I made my question too simple in regards to what I need to accomplish.

My table does need to have a row header and a column header as depicted on the example url I sent.

Your example however, is largely hard coding data like with the example url I gave. Hard coded data is not what I'm after. .

Let me try to explain this better.

The first row in my table needs to be a header row. The first item in the row can be hard coded or simply left blank <td></td>. The remaining items in the row will be post titles. The post titles can't be hard coded, they need to be filled in by a loop.

The first column in the table needs to be a header as well. The first item will probably be blank like above. The header names will have to be hard coded and sortable. Data going into each row will have to be inputted via a loop which reads the post meta field associated with that particular rows header.

Hopefully this is more clear now. Thanks.

[Joe]

I'm starting to wonder if there is a bug in toolset and that is the reason I cannot get this to work correctly. If you have a solution to my question, please post here. If you need to see more, please enable private fields and I'll send a URL over with name and password. Thanks.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Joe,

I believe I understand what you are trying to achieve.

Notice that I placed the tables structural codes outside of the <wpv-loop> tags.

The table headers will generally be static and should be placed outside of the loop, the top headers that is.

I assume that the left headers will be dynamic as this is the only way to have it work correct.

So this leaves us with the dynamic sections that will be placed within the loop. This should look like.

 <wpv-loop>
<tr>
    <th scope="row"></th>
    <td>shortcode</td>
    <td>shortcode</td>
    <td>shortcode</td>
    <td>shortcode</td>
    <td>shortcode</td>
  </tr>
</wpv-loop>

Notice i have the th blank, the th will be the left header and in the td you can replace the word shortcode with an actual shortcode.

Please let me know if this is a bit clearer for you.

I've also enabled the private fields for your next response for you to provide the credentials.

Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Joe,

I don't believe that this one is a bug, if you're not able to get a certain format of a table.

Based on your screenshot I say that this you wont be able to achieve.

The reason is that the Table headers are define outside of the loop. In your screenshot you depict that these table headers at the top would be dynamic, which means that they are going to be apart of the loop.

Secondly the table headers to the left appear to be somewhat static and in order for that to be achieved then they must be hardcoded.

So having a static table header to the left won't be possible because of how this table structure must be defined.

It would be better if the static (sortable) headers be at the top rather than to the left and the dynamic headers be at the left as these headers can be populated by the post loop.

Please let me know if this was clear.

Thanks,
Shane

[Joe]

Hi Shane,

Thank you.

We are getting closer to an understanding but I'm not sure if we are quite there yet.

There should be no top table headers or at least a no row of table headers. There should only be one column of table headers. This column of table headers should indeed be hard coded.

Let's call column 1 the header column. In the picture I highlighted this in yellow. Everything in column 2 and beyond would then be dynamically coded and data filled in via a loop. There are no headers in column 2 or beyond.

You are saying this isn't achievable in toolset via loop?

I almost have this working on my site but toolset insists on creating an extra row, even though I have not coded a <tr>.

What's happening is column 1 row 1 is a header like it should be. Toolset is then creating a new row and putting the dynamic data into column 1 row 2, then column 2 row 2, then column 3 row 2 and so forth, as opposed to putting the dynamic data in column 2 row 1, column 3 row 1, column 4 row 1 etc.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Shane is on holiday today. This is Minesh here to help you today. Hope this is OK.

What's happening is column 1 row 1 is a header like it should be. Toolset is then creating a new row and putting the dynamic data into column 1 row 2, then column 2 row 2, then column 3 row 2 and so forth, as opposed to putting the dynamic data in column 2 row 1, column 3 row 1, column 4 row 1 .
=> Actually, as Shane explain to you in his previous reply, Wth views, the header row should have been added outside the loop.

I think you should go through the following link that may help you to understand how view loop output works.
https://toolset.com/documentation/user-guides/digging-into-view-outputs/

[Joe]

Hello Minesh,

I made a mistake with my initial thread and post. This isn't my first time working with views and tables, I have built another website around it successfully. I think at this point, my question can be made straight forward here.

"Actually, as Shane explain to you in his previous reply, Wth views, the header row should have been added outside the loop."

Yes, I know headers go outside of the loop, this is clear and has nothing to do with my question, outside of I did not make my question clear initially. I do not want my table to have a header row. It should just be a row of dynamic data.

My question is:

Is Toolset capable of creating one column and one column only filled with headers? Toolset seems to be ignoring my code when I try to make this happen.

Please see the following link for an exact example of what I need:

hidden link

I would like to build a table like in the url that is called a "Responsive table with the flip mode:"

Is this possible with Toolset?

Thanks.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Joe,

Would it be possible for your to send me a link to the page ? or allow me to have access to the page so I can see what you have done so far?

I'll be enabling the private fields for your next response.

Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Joe,

I took another look at this for you.

But I can say that this is not a bug. The reason why this is not possible is because of how views loop output works.

In order for you to have 2 headers essentially on your table 1 of them must be outside the view loop and the other within the view loop.

This means that one of your headers will be repeating for as many items you have within your custom post type.

Also the table headers that are going to be within the view loop need to be generated from fields within the posts.

I'm not sure i'm explaining this correctly so please let me know if you're confused or unsure about why it isn't exactly possible.

Thanks,
Shane

[Joe]

Hi Shane,

So are you saying that it is hard coded into the toolset plugin that the first row must always be considered a header that contains data coming from outside of a views loop?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Joe,

No tables are not hardcoded. There isn't any hardcoding in any way here.

Its about how the information for the table is generated.

Any item within the wpv-loop tags will always repeat as long as there are posts to display. This means that a static or dynamic table header here will repeat 10 times if there are 10 posts to display.

Because of how the loops work within toolset you will need to do a custom php solution in order to get a table like this.

Thanks,
Shane