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

The capability to scroll within a stationary container

Whenever you click a button, a div slides out from the left by 100%. This div contains the menu for my website. The problem I'm encountering is that on smaller browser sizes, some of the links are hidden because they get covered up. The #slidingMenu ...

The displayed database results will appear in the opposite order of what was originally assigned for both inline and block elements

I have a database with information that I am trying to display using a while loop. My goal is to show the results in this format... Firstname Lastname - Firstname Lastname - Firstname Lastname player1 ---------------player1-----------------------pla ...

What is the most effective way to import and load three-orbitcontrols?

Has anyone tried implementing the OrbitControls function in conjunction with ReactJS? I have included a snippet of the code below: import React, { Component } from 'react'; import 'tachyons'; import * as THREE from 'react'; im ...

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling. Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width? https://i.stack.imgur.com/HSKHH.png div { ba ...

limiting jquery selector to target only the td elements within a table

I have a table generated by asp.net that functions as a slide show. To make the slide show work properly, I need to select only the root td elements of the table. This becomes an issue when the table has multiple rows. The jquery cycle plugin is being used ...

Accessing an external API through a tRPC endpoint (tRPC Promise is resolved before processing is complete)

I want to utilize OpenAI's API within my Next.js + tRPC application. It appears that my front-end is proceeding without waiting for the back-end to finish the API request, resulting in an error due to the response still being undefined. Below is my e ...

Applying a label to a TextField component using Material-UI

Is there a way to include a label within the TextField component? Material-UI, React, Performance ...

Encountered an error while compiling following the 'npm start' command in the create-react-kotlin

Having an issue running the create-react-kotlin-app module using npm. Here's the error I'm encountering: Failed to compile multi ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/react-scripts-kotlin/config/polyfills.js kot ...

tips for positioning images and text in the center using css classes

Here's what I currently have: http://jsfiddle.net/nCs88/ Here's my goal: As a beginner, I am struggling to center the button images with the text. Any help would be greatly appreciated as this has been frustrating me for hours. ...

Is there a way to customize the styles for the material UI alert component?

My journey with Typescript is relatively new, and I've recently built a snackbar component using React Context. However, when attempting to set the Alert severity, I encountered this error: "Type 'string' is not assignable to type 'Colo ...

Finding the current div based on the scrolling position can be achieved without the use of jQuery

Seeking assistance with a coding challenge. I have a solution in jQuery, but we require the solution in plain JavaScript or Angular. It seems like something is missing. Take a look at this fiddle. The objective is to highlight the corresponding left panel ...

Trouble arises in next.js containers when their content exceeds the specified limits due to @media rules adaptation

I've been working tirelessly for the past 2 days to resolve an issue with my next.js project. This is my first time using this technology and I feel like I might be overlooking something crucial. The problem revolves around three layers (as seen in t ...

Guide to binding input type= 'email' in Knockout.js

My project utilizes KnockoutJS with MVC. I am seeking assistance on determining whether an emailId is valid or invalid. Based on this validation, I need to dynamically enable/disable a button and set an error title for the corresponding textbox. Below is ...

The ternary operator is malfunctioning when it comes to the condition

I've encountered an issue while trying to integrate a custom MUI button into my project. My goal is to have the button enabled only when 2 specific objects are not empty, otherwise it should remain disabled. Despite my efforts, the code I've writ ...

Creating clickable links to MySQL data in Reactjs frontend

Required feature: The project names fetched from the MySQL database and displayed in a table column should serve as links leading to the corresponding information on the /projects page. Current status: Unfortunately, the project names extracted from the M ...

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

Div elements containing identical content and styled in the same manner exhibit distinct dashed borders

After designing a pen with a unique twist, you'll notice that the first div has a border-bottom, while the second has a border-top. What's interesting is that the border on the second div is not the same as the first. Visit this link to see for ...

Looking to create a calculator using React.js?

I seem to have encountered a bug in my calculator. Is there anyone who can help me fix it? The issue is that after entering any digit, when I click on the '-' button, the value cannot be set and no operation is performed. However, this works perf ...

Navigate to the homepage section using a smooth jQuery animation

I am looking to implement a scrolling feature on the homepage section using jquery. The challenge is that I want the scrolling to work regardless of the page I am currently on. Here is the HTML code snippet: <ul> <li class="nav-item active"> ...

The Ajax success function is failing to trigger after receiving a 200 network response

I have a basic HTML page that loads jquery 3.3.1 and an external script file called script.js. I am using a simple node http-server to serve the static page. The data.json file is also in the same folder as the HTML file. However, even though the network c ...