Creating collapsible column functionality for the <td> element within a <tr> in mobile view using React

Ensuring my websites have a consistent look across various devices is a top priority for me.

I currently have a table that is displayed like this: https://i.sstatic.net/a91LL.png

Is there a way to modify this table so that when viewed on mobile, the <td> within a <tr> will be arranged in columns with the corresponding <th> adjacent to each table data like shown here: https://i.sstatic.net/JE3oA.png

The website I am working on is built using React, so if there is a method of achieving this in React that I am not familiar with, I would love to explore it.

htmlcssreactjsmobilecss-tables

Answer №1

Managed to achieve this using media queries:

/* applied for mobile breakpoint */
@media (max-width: 1024px) {
    /* hiding th on mobile only, visible on desktop */
    .desktop {
        display: none;
    }
    
    /* arranging td in column layout within the tr */
    .mobile-flex {
        display: flex;
        width: 100%;
    }

    /* creating pseudo-headers by reading "data-header" attribute of each td*/
    td:before {
    content: attr(data-header);
    display: block;
    font-weight: bold;
    margin-right: 10px;
    max-width: 110px;
    min-width: 110px;
    word-break: break-word;
    }
}
<table>
  <thead>
    <tr>
      <th class="desktop">Title</th>
      <th class="desktop">Author</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mobile-flex" data-header="Title">Sample book title 1</td>
      <td class="mobile-flex" data-header="Author">Sample author name 1</td>
    </tr>
    <tr>
      <td class="mobile-flex" data-header="Title">Sample book title 2</td>
      <td class="mobile-flex" data-header="Author">Sample author name 2</td>
    </tr>
  </tbody>
</table>

Answer №2

Instead of relying on media queries in this situation, it would be more beneficial to directly modify the html structure. One potential solution is utilizing a library like https://www.npmjs.com/package/react-breakpoints to dynamically render content based on whether the user is accessing the site from a desktop or mobile device.

Answer №3

Transform your table into a responsive design using a single class

@media (max-width: 576px) {
  .tbl-responsive th {
    display: none;
  }

  .tbl-responsive td {
    display: flex;
  }

  .tbl-responsive td .btn{
    position: relative;
    left: -10px;
  }

  .tbl-responsive td:before {
    content: attr(data-header);
    font-weight: bold;
    color: #000;
    margin-right: 10px;
  }
}
<table class="tbl-responsive">
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-header="Title: ">Sample book title 1</td>
      <td data-header="Author">Sample author name 1</td>
    </tr>
    <tr>
      <td data-header="Title: ">Sample book title 2</td>
      <td data-header="Author: ">Sample author name 2</td>
    </tr>
  </tbody>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the functionality of arrays in Jest's cli option --testPathIgnorePatterns

Looking to exclude multiple folders, one in the src folder and another in node_modules, when using the --testPathIgnorePatterns option. Does anyone have an example of how to use this pattern effectively? I am unable to configure an array in the package.js ...

javascriptreactjsjestjs

Hide button for the last input form to dynamically remove in jQuery

At first, I hide the remove button when there is only one form. However, if there are multiple forms and the user deletes all of them, I want the last form to remain visible and not be deleted. Can someone assist with this issue? Here is my code: <! ...

javascriptjqueryhtml

Tips on filtering out empty rows when sorting in a material ui datagrid

I need some help with filtering out empty rows in the response I am receiving. I am currently using material UI's data grid component and would like to know how to exclude these empty rows when sorting. Any suggestions or advice would be greatly appre ...

reactjsmaterial-ui

Styling the footer of a webpage using CSS to adapt to different browser

I am currently working on a webpage that includes a footer. The footer is positioned correctly, but I encounter an issue when resizing the browser from bottom to top. For further details, please refer to the image below: Below is the CSS code for my foote ...

csshtmlfooter

Vue-Router functions only on specific routes

While my vue-router correctly routes the URL for all menu buttons, it's not displaying each Vue component properly. You can see a demonstration here. Here is a snippet of my HTML (using Vuefy) <div class="navbar-start"> <a ...

javascriptcssvue.jsvuejs2vue-router

Maintaining the position of the screen as you type in information that is located outside of the container

I am encountering an issue with the input/text-area element in absolute position extending halfway outside the container. The screen position seems to follow the caret as I type, but I'd prefer to keep writing and have part of the text hidden beyond t ...

javascriptjqueryhtmlcss

Guide on how to show an icon in Meteor when a link is clicked

Is there a way to display a viewed icon upon clicking a link in Meteor? On my list of jobs page, when a user clicks on a job, they are taken to the description page. I would like to add an icon to the post indicating that the user has viewed it. ...

javascriptjqueryhtmlcssmeteor

Exclusive Checkbox Update

My code is causing me some trouble. When I click the update button, I want to only display the checked fields from the checkboxes on the redirected page. Below, I will share the code from the initial page, followed by the code from the second page where t ...

phphtml

What is the best way to generate dynamic components on the fly in ReactJS?

Could you please guide me on: Techniques to dynamically create react components, such as from simple objects? Is it possible to implement dynamic creation in JSX as well? Does react provide a method to retrieve a component after its creation, maybe b ...

javascriptreactjs

I could use some help understanding how to identify the parent file so I can elevate a state

I'm facing a challenge in lifting up a state so that I can utilize it across various pages. The confusion lies in determining where to reference the states, given the uncertainty regarding the parent location. Since this is my first attempt at designi ...

javascriptreactjsreact-nativereact-context

Tips for concealing a Div in an HTML document with the help of Angular

I need a solution to hide a div that contains only titles, while the div with the actual content is located in a different section <div> <b>Delivery Info\</b> <div class="custom-control">Delivery ID: </div ...

javascripthtmlangularhide

The Bootstrap 4 navigation bar is failing to extend fully across the width when a dropdown menu

Here is the code I am using for the navigation bar. When I click on the dropdown button, this is how it appears on my webpage: Click here <nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3"> <a class="navbar-brand" ...

htmlcssbootstrap-4

Issue with React Material-UI Popper - unable to reference popper element

I am attempting to create a specific behavior where the popper's placement changes from 'right' to 'right-end' when its bottom exceeds the window bottom while open. I have been trying to retrieve the bottom position from the refer ...

reactjsmaterial-ui

Utilize the setState function in React using the useState hook

Why does the React setter function wait for the function to execute completely before re-rendering the app? function handlePhone(num){ setPhone(num) console.log('hello') console.log('hello') console.log('hello') } ...

reactjs

Setting up a checkbox to accept either a 0 or 1 value from a database

I am trying to integrate an HTML table where each table data cell contains a drop-down menu and a checkbox. These elements are connected to a database table named "checkbox" which contains values of 1s and 0s. I want to dynamically display the check box as ...

phphtmlcheckbox

What is the best way to modify a step within a child component?

I am exploring ways to customize a stepper without relying on traditional previous/next buttons. Initially, I used the material UI stepper as a reference but now I am figuring out how to incorporate a button in my PlanSelection component to navigate to th ...

reactjsmaterial-uistepper

Enhancing performance with NextJS 13 memoization for fetch requests

I've been tinkering with a React project using NextJS 13 and I'm facing some issues when it comes to utilizing request memoization for fetch. The problem lies in the fact that even within the same request, it still sends multiple requests to the ...

reactjsnode.jsnext.jsnext.js13memoization

Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is the ...

cssvue.jsvuetify.jsnuxt.js

What are the benefits of keeping synchronous state in the Redux store?

Is it necessary to store non-async state in the Redux store? For instance, when dealing with a modal that simply shows or hides, is it worth the extra work to toggle it within the store? Wouldn't it be simpler to just keep it as local state in the Rea ...

javascriptreactjsreduxsingle-page-applicationflux

Problem with Typescript compilation in lerna package

Presently, my project is structured with lerna/react/TS setup as shown below: . ├── lerna.json ├── package.json ├── packages │ ├── patient │ │ ├── package.json │ │ ├── src │ │ │ └── ...

reactjstypescripttsconfiglerna