Score:0

Drupal

How to create a vertical table

miststudent2011

7/29/23, 6:36 AM

Can anyone please help me to render theme_table data in vertical format instead of horizontal format ? Currently horizontal table is overflowing the page and breaking breaking points.

My current code :

    $build['table'] = [
      '#type' => 'table',
      '#header' => $header,
      '#rows' => $rows,
      '#empty' => $this->t('No content has been found.'),
    ];

    return $build;

It generates following table but I wanted it in vertical table format.Where header is in left and row is in right instead of header in top and rows at bottom.

I am using Drupal 9.3.9 with Bartik theme.

I can think of a way where I can process array of header and rows and format it to render in vertical format. Before proceeding to that I am searching if we have any core functions which can provide the same functionality. As It would not be efficient to completely rewrite array data.

0 + 0

theming

Hudri

7/29/23, 8:02 AM

Drupal does not really care what data and how many cells you put into rows.... if you want multiple rows instead of cells, provide the corresponing data structure with multiple `$rows` instead of just one.

Score:3

Drupal

No Sssweat

7/29/23, 7:05 AM

Sadly Drupal core does not provide responsive tables.

You'll need to use contrib or custom library solution to solve this issue.

Have a look at these contribs:

Responsive Tables Filter

Simple Responsive Table

0 + 0

miststudent2011

7/29/23, 7:09 AM

thanks for the answer but unfortunately it is not what i am looking for. I am mainly looking for a way Where header is in left and row is in right instead of header in top and rows at bottom using core functions if any exists.

No Sssweat

7/29/23, 7:27 AM

@miststudent2011 To my knowledge, there is no such core function. Another possibility could be to copy core's [table.html.twig](https://api.drupal.org/api/drupal/core%21modules%21system%21templates%21table.html.twig/9.3.x) into your theme and adjust as you like. You could make them `<divs>` instead of `<table>`, and theme it with CSS to look like a table.

No Sssweat

7/29/23, 7:45 AM

@miststudent2011 Since you control the code, I guess if you go the `<div>`s route, you might as well [create your own custom template](https://www.drupal.org/docs/theming-drupal/twig-in-drupal/create-custom-twig-templates-for-custom-module) rather than using `'#type' => 'table',`.

Clive

7/29/23, 8:13 AM

@miststudent2011 this is all just CSS - Drupal’s included themes don’t have any styles for alternative table layouts so you’ll have to find/provide your own if you still want to use tables. Or create your own markup/styles to fit exactly what you need as suggested. Or take a step back and see if `word-wrap: ellipsis` doesn’t cover your needs. Drupal won’t help you here as this is fundamentally a styling issue

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How to create a vertical table

TH: วิธีสร้างตารางแนวตั้ง

RO: Cum se creează o masă verticală

RU: Как сделать вертикальный стол

VI: Cách tạo bảng dọc

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.