How to transform a table rows into columns while using react

Question

I've got a simple react table that is currently displayed in the following format:

[1][2][3][4]
[1][2][3][4]
[1][2][3][4]
[1][2][3][4]

But I want to add a media query for it to transform in to the following format when in a mobile view:

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

Problem is I just can't get it to work. I search and search and found the only possible solution was to add a set of order CSS values to each table cell e.g.:

<td className="cell-one"> One </td>

.cell-one {
  order: 1;
}

But that still didn't work. The logic is there, I can half way see it but I just can't get it right. Any insight into how to achieve this would be very appreciated!

<table className="table-container">
  <tbody>
    <tr className="row">
      <th className="header-row">First Name</th>
      <th className="header-row">Surname</th>
      <th className="header-row">Age</th>
      <th className="header-row">Town</th>
    </tr>
    <tr className="row">
      <td className="table-content">James</td>
      <td className="table-content">Stout</td>
      <td className="table-content">35</td>
      <td className="table-content">Camden</td>
    </tr>
    <tr className="row">
      <td className="table-content">Karen</td>
      <td className="table-content">Smith</td>
      <td className="table-content">40</td>
      <td className="table-content">Stevenage</td>
    </tr>
  </tbody>
</table>

Nandita Sharma · Accepted Answer · 2018-06-11 16:26:22Z

1

Add this CSS

   @media screen and (min-width: 480px) {
     tbody tr th {
        display: none;
    }

    td, th {
        display: block;
    }

    td[data-th]:before  {
        content: attr(data-th);
        margin-right: 10px;
        font-weight: bold;
    }
}

@media screen and (min-width: 480px) {
     tbody tr th {
        display: none;
    }

    td, th {
        display: block;
    }

    td[data-th]:before  {
        content: attr(data-th);
        margin-right: 10px;
        font-weight: bold;
    }
}

<table className="table-container">
  <tbody>
<tr className="row">
  <th className="header-row">First Name</th>
  <th className="header-row">Surname</th>
  <th className="header-row">Age</th>
  <th className="header-row">Town</th>
</tr>
<tr className="row">
  <td data-th="First name" className="table-content">James</td>
  <td data-th="Surname" className="table-content">Stout</td>
  <td data-th="Age" className="table-content">35</td>
  <td data-th="Town" className="table-content">Camden</td>
</tr>
<tr className="row">
  <td data-th="First name" className="table-content">Karen</td>
  <td data-th="Surname" className="table-content">Smith</td>
  <td data-th="Age" className="table-content">40</td>
  <td data-th="Town" className="table-content">Stevenage</td>
</tr>
  </tbody>
</table>

edited Jun 11, 2018 at 16:26

answered Jun 11, 2018 at 15:59

Nandita Sharma

13.4k2 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nandita Sharma Over a year ago

Please note i added media query with min-width: 480px so as to show the effect in the snippet. you need to keep it max-width: 480px for the styles to apply only in mobile

T.Doe Over a year ago

Thanks for this, but I tried this too, and although it works for about 80% of the table, it misses out the header row of "First Name Surname Age Town" keeping those still in line whereas whatI'm looking for is: First Name James Surname Stout Age 35 Town Camden First Name Karen Surname Smith Age 40 Town Stevenage

Nandita Sharma Over a year ago

ohhhh... now i get what you want. Let me try that out

Nandita Sharma Over a year ago

Check this ans, i used this code once in a live project. Gave me no issues.

T.Doe Over a year ago

Very craftily done! Thank you so very much! I was not going to get this on my own!

Collectives™ on Stack Overflow

How to transform a table rows into columns while using react

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related