Is there a way to include a minimize button on a MaterialUi Table enclosed in a Paper component for easy table reduction?

I am trying to add a minimize button to either minimize my MaterialUi Table or the Paper component that wraps it. Here is the code I have so far:

<TableContainer component={Paper} style={{maxHeight:'inherit', maxWidth:'inherit', boxSizing:'border-box'}}>
              <Table size='small'>
                  <TableHead style={{
        backgroundColor: 'black'
      }}>
                      <TableRow>{headingsArray.map(val=><TableCell>{val}</TableCell>)}
                      </TableRow>
                  </TableHead>
                  <TableBody>
                  {
                    Object.entries(blueprint).map(([key,val]) =>
                    <TableRow>
                        <TableCell>{key}</TableCell>
                        {val.map((x)=><TableCell>{x}</TableCell>)}
                    </TableRow>
                    )
                  }
    
    
                  </TableBody>
              </Table>
          </TableContainer>

Answer №1

To easily minimize functionality, you can utilize the MUI accordion component to manage it for you and place the table within it:

<Accordion>
  <AccordionSummary
    expandIcon={<ExpandMoreIcon />}
    aria-controls="panel-content"
    id="panel-header"
  >
    <Typography className={classes.heading}>Accordion Heading</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <TableContainer
      component={Paper}
      style={{
        maxHeight: 'inherit',
        maxWidth: 'inherit',
        boxSizing: 'border-box',
      }}
    >
      <Table size="small">
        <TableHead
          style={{
            backgroundColor: 'black',
          }}
        >
          <TableRow>
            {headingsArray.map((val) => (
              <TableCell>{val}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {Object.entries(blueprint).map(([key, val]) => (
            <TableRow>
              <TableCell>{key}</TableCell>
              {val.map((x) => (
                <TableCell>{x}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  </AccordionDetails>
</Accordion>

https://codesandbox.io/s/frosty-glitter-3pccn?file=/demo.js

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

Remove the ID, class, and other attributes from an HTML string using JavaScript for sanitization purposes

Can someone help me with sanitizing HTML text provided by a user? The HTML code in question is as follows: var htmlStr = `<p id="test" class="mydemo">TEhis is test</p> <pre class="css"> &lt;html> &lt;body cl ...

Show table information from backend operations

In my program, I have a function that generates an HTML table based on data retrieved from a SQL database. getWhileLoopData(){ string htmlStr = ""; SqlConnection thisConnection = new SqlConnection(ConfigurationManager.ConnectionS ...

Discover the best way to transfer hook values to CreateContext in React

In my project, I've implemented a component called SideBarBlurChange. Within this component, there is a requirement to pass a value named values inside the BlurChangeValue array, which is nested within the CreateContext. I have searched online for ex ...

Leveraging Excel VBA to manipulate the selection in a dropdown menu on a webpage

Is there a way to select a specific value using Excel VBA? <div class="drpCompanies"> <select class="selectBox homepage selectCompanies" style="padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px"> <op ...

Refresh in AJAX, automated loading for seamless transition to a different page

Having an issue with the page not auto-refreshing, although it loads when I manually refresh. P.S Loading the page onto another page. Below is my HTML and AJAX code along with its database: The Trigger Button <?php $data = mysqli_query ...

Creating Dynamic Animations for Expanding and Collapsing Divs in React without Knowing the Content Size

Query: I'm currently facing a challenge with my React functional component that recursively generates nested lists, which is functioning properly. However, I am struggling to implement an expanding animation on the divs containing these nested lists ...

The alignment of the text next to the icons is not correct

Is it necessary to use flexbox, or is there an easier way to achieve the same result? It has been a while since I last practiced and I can't seem to remember much. .sadaka-contacts p { color: #115c9b ...

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

Place CSS elements in relation to the underlying element

This is an example of my HTML structure: <nav id="menu"> <ul> <li><a href="">Products</a></li> <li><a href="">Offers</a></li> <li><a href="">References</a>& ...

Attempting to implement a feature that will enable a blank row at the end of an input table with the help of

I'm currently working on a form that allows users to click a button to add a blank row to the bottom of a table. The issue I'm facing is that when I click the button, it redirects back to my index.php page instead of simply adding the row to the ...

Drag near the bottom of a droppable DIV to scroll inside

Within a scrollable div, I have multiple draggable divs. However, when I drag them into another scrollable div (the droppable zone), only the page scrolls and not the droppable div itself. How can I make it so that only the droppable div scrolls while drag ...

Eliminate Specific Days from Material Calendar Display

After struggling to remove selected days from the material calendar and their decorators without success, I eventually found a workaround. Instead of using removeDecorator(), I created an additional XML file to decorate the removed days. I will share my s ...

Developing an Addon for Firefox using XUL and JavaScript

I am interested in creating a Firefox Addon that dynamically generates a button in the webpage's DOM when a specific page like www.google.com is loaded. This button, when clicked, will redirect to another page such as www.stackoverflow.com. It is imp ...

Is there a way to have content update automatically?

After writing this block of code, I discovered that clicking on one of the circles activates it and displays the corresponding content. Now, I am looking for a way to automate this process so that every 5 seconds, a new circle gets activated along with its ...

Is anyone utilizing PHP variables to control the title of the HTML and the ID of the body element?

I utilize PHP variables to store the title's value and the ID of the body. The latter is a method to show which section of the page the user is currently on (in this case, the "home" section). At the start of my index.php: <?php $title = "New ...

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

How can I automatically redirect a React page once I receive a response from Express?

I'm facing an issue with redirecting from one page to another in React. The setup involves an Express server serving the required data to React, and upon receiving the data in React, the goal is to display that result on another page by triggering a r ...

What is the process for transferring selections between two select elements in aurelia?

I am attempting to transfer certain choices from select1 to select2 when a button is clicked. Below is my HTML code: <p> <select id="select1" size="10" style="width: 25%" multiple> <option value="purple">Purple</option> &l ...

Using Rails to load an image from CSS

My current approach to loading an image is using this code: <div id="bglion"><%= image_tag("BG-LION6.png")%></div>, which successfully displays the image. However, I am interested in loading the image from a CSS file instead. After resea ...

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

As a first-time GatsbyJS website builder, I am working on creating reusable components for my site. One of these components is the footer, and I have already structured it. Now, I have a dilemma - I want to change the color of a specific <div> within ...