Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines in the header stick to the top of the page as users scroll.

In my sandbox example, the issue arises when I scroll down - only the last row of the table head sticks to the top while the "Value" and "Another Value" rows do not. What I actually need is for all rows in the table head to stay fixed at the top regardless of how many there are or their variable heights.

If you'd like to take a look at the specific problem, you can view it here: https://codesandbox.io/s/condescending-roman-hqkpj

htmlcssreactjsmaterial-ui

Answer №1

We have found the perfect solution for you: 

<TableCell style={{ top: "52px" }}>
, which involves adding the 'top' css property to each cell in the second header row. Additionally, we recommend checking out this closed issue: https://github.com/mui/material-ui/issues/23090

Answer №2

While I still utilize the stickyHeader feature for ensuring the correct visual styles, I have implemented my own custom sticky behavior. Additionally, I have made a modification to the header's background color by leveraging the themes background paper variable.

<TableContainer sx={{ height: "100%" }}>
    <Table size="small" stickyHeader>
        <TableHead
            sx={{
                position: "sticky",
                top: 0,
                zIndex: 1,
                "& .MuiTableCell-root": { backgroundColor: "background.paper" },
            }}
        >

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 request to generate a worker from 'blob:<URL>' was denied due to infringement of the Content Security Policy rule "child-src 'self' *.website.com."

I am currently developing a Chrome extension (MV3) that involves loading libraries which use workers. I have added the worker files (.js and .wasm) to the resource folder in order to load them "locally" into the Chrome extension, and they are also included ...

reactjsgoogle-chromegoogle-chrome-extensionworkergltf

Using ReactJS to dynamically load data based on the previously loaded data

On my ReactJS page, I am using axios to fetch a list of IDs and image URLs from an API, storing this data in the component's state. For example: [ {id: 21321321, img_url: }, {id: 97777798, img_url: } .... ] Once the data is retrieved, I display the ...

reactjs

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

javascripthtmlcss

Execution of Ajax call fails to occur synchronously

I have created a unique weather website that utilizes the flickr API as well as the yahoo API to gather weather data. However, I am facing an issue where the ajax call from the yahoo API does not retrieve the necessary data in time for the content of the p ...

javascriptjqueryhtmlajaxperformance

The Jest test encounters a SyntaxError due to an unexpected token Export causing it to fail

I am encountering an issue where my test is failing with the error message Unexpected token 'export' that stems from code imported from the swiper package. I have attempted to solve this by adding node_modules to the transformIgnorePatterns in my ...

reactjsnpmjestjs

The Zustand store does not reflect changes when the URL is updated

I have a Zustand store connected to the URL. See the code snippet provided below. import { create } from "zustand"; import { persist, StateStorage, createJSONStorage } from "zustand/middleware"; const pathStorage: StateStorage = { ge ...

javascriptreactjsdomnext.jszustand

JavaScript code to toggle the navigation bar on mobile devices

I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

I am having trouble installing semantic-release because it requires a specific Node version that I am unable to update

Having trouble installing the "node_modules" in my React Native project due to the interference of the "semantic-release" package. Despite my efforts to find a solution, I am unable to pinpoint the source of the problem. This compatibility conflict or conf ...

node.jsreactjsreact-nativenode-modulessemantic-release

Modifying the HTML attribute value (of input) does not impact the value property

After inputting a single tag, I ran the following code in my Chrome console: https://i.stack.imgur.com/ySErA.jpg The result was unexpected for me. According to what I have read in a book, when I change an HTML attribute, the corresponding property should ...

javascripthtmlgoogle-chromeattributes

Angular is having trouble with the toggle menu button in the Bootstrap template

I recently integrated this template into my Angular project, which you can view at [. I copied the entire template code into my home.component.html file; everything seems to be working fine as the CSS is loading correctly and the layout matches the origina ...

javascripthtmlangulartypescript

When using HTML select, text alignment may not be centered properly in the Chrome

Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...

htmlcss

Having trouble with next.js and MongoDB integration? Encountering an error during the `next build` process?

Having trouble setting up a next.js project with MongoDB integration. The issue seems to be related to the build process and the error logs are not very helpful in pinpointing the problem. Here is a snippet from the log: 0 info it worked if it ends with ok ...

node.jsreactjsmongodbnpmnext.js

What is the best way to ensure the width of the div is adjusted to fit the table it contains?

What is the best way to adjust the width of a div containing a potentially wider-than-screen table? Despite setting padding: 10px for the div, the right padding disappears when the table exceeds the screen width. Below is an example code snippet: <div ...

htmlcss

Tips for creating a vertical scrollbar within a row component

Is there a way to create a scrollable parent v-row with a child v-row overflowing with content so that I can nest another v-row inside the v-col and ensure it remains within the scroll element? <v-row> <v-col> <v-row> <p ...

htmlcssvue.jsoverflow

Utilizing ng-class with Boolean values in AngularJS

On my page, I have a pair of buttons that control the visibility of elements using ng-hide and ng-show. <a ng-click="showimage=true" ng-class="{ 'activated': showimage}" class="button">Images</a> <a ng-click="showimage=false" ng-c ...

javascriptcssangularjs

"Utilizing FileReader to seamlessly integrate data into FormData without the risk

Currently, I'm in the process of constructing an ajax file uploader. This is made possible thanks to the recently introduced FormData interface. Everything seems to work as expected when using the original file. However, I encounter issues when conver ...

javascriptajaxhtml

Is there an HTML editing tool that has the ability to collapse code blocks by tags and rearrange them?

I'm in search of a text editor or IDE that includes syntax highlighting and allows me to collapse HTML code blocks by tag. I currently use Eclipse, but its "folding" feature only works on top level tags like TABLE, not child tags like TD and TR. Are t ...

phphtmleditorfolding

Upgrade from version 4 to version 5 causes issues with the appearance of standard Material-UI components

Transitioning from v4 to v5 has presented me with various issues that seem to be inconsistent. On the Login page, the <Button> component displays correctly. However, once logged in, the <Button> components appear without any MUI styling, such ...

reactjsmaterial-ui

Tips for maintaining the height of the outer div consistent with that of the inner div

I am encountering an issue with an inner div that is used for overlay and set to a min-height property. Despite changes in the overlay's height, the height of the outer div remains unaffected. #outer { width: 70px; height: 70px; background-co ...

htmlcss

Updating image URL for grouped objects with Fabric JS

Check out this link :http://jsfiddle.net/mishragaurav31/ang58fcL/#base I created two groups of objects; one consisting of a circle and text, and the other with two images. When I try to change attributes for group 1, it works fine. However, when attempt ...

javascripthtmlfabricjs