0

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.

Horizontal table Overflow

1
  • 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.
    – Hudri
    Mar 29, 2022 at 8:02

1 Answer 1

3

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

enter image description here

Simple Responsive Table

enter image description here

4
  • 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. Mar 29, 2022 at 7:09
  • 1
    @miststudent2011 To my knowledge, there is no such core function. Another possibility could be to copy core's table.html.twig 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
    Mar 29, 2022 at 7:27
  • @miststudent2011 Since you control the code, I guess if you go the <div>s route, you might as well create your own custom template rather than using '#type' => 'table',.
    – No Sssweat
    Mar 29, 2022 at 7:45
  • @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
    – Clive
    Mar 29, 2022 at 8:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.