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

Is there a way to make sure that the antd datepicker response is sent to the backend only after I click on the submit button?

After receiving a response from the antd datepicker and successfully sending it to the backend, I encountered an issue. The response is automatically sent to the backend as soon as a date is selected. However, I want the request to be sent only after click ...

reactjsantd

The variable "tankperson" is not recognized

While attempting to run an AJAX request upon page load, I encountered a particular error even though I have ensured that all the necessary libraries are included. The variable tankperson is derived from $_GET['name'] An unhandled ReferenceErr ...

javascriptjqueryhtmlajax

What are some effective ways to align an image to the left and text to the right within a table

I need to display a member with a higher rank, showing the user image along with their username. However, I am struggling to align the image and text properly due to varying username lengths causing them to appear in a zig-zag position. Here is what I hav ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

What are the essential tools needed to extract, interact, and evaluate information from a webpage?

Just trying to figure out the most effective plan of action and required tools/frameworks for this task: 1. Access webpage 2. Navigate to specific page by clicking buttons and filling in text boxes for search 3-4 Repeat 3. Retrieve HTML from page and s ...

htmlpython-2.7seleniumscrapy

"Exploring the capabilities of React Native with an Https Agent

Can the HTTPS Agent be used in a React Native app? This is my current code: import axios from 'axios'; import ip from './ip'; import https from 'https'; const httpsAgent = new https.Agent({rejectUnauthorized: false}); con ...

reactjsreact-nativehttpsaxios

HTML5 document type declarations

After switching my site's doctype from XHTML to HTML5, I have made the following changes: I currently have: <!DOCTYPE html> <html lang="en-GB" xml:lang="en-GB" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> Now my question is, do I sti ...

htmldoctype

What could be causing my .load() function to fail when attempting to target a specific div element?

My goal is to retrieve and display a div tag from another aspx page within my container div. Here is the jQuery code: function GetDocumentInfo(url) { $('MyContainer').load(url + ".otherdiv"); } This operation is triggered by a click event. ...

javascriptjqueryhtmlasp.net

Is getElementById() returning null?

I'm currently working on a JavaScript program that takes an image URL and displays it on the page by creating an <img> tag. This way, I can easily add multiple images to the page. Here is my code: <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlimagesrccreateelement

Creating a Vue component that renders within an iframe, even without specifying a src attribute

<iframe id="frame" width="100%" height="100%"> </ifrme> Is there a way to render a component within this iframe by creating an HTML element or using another method? new Vue({ el:'#frame', store:store, router:router, ren ...

htmliframevue.js

Using WebStorm with React + MUI can be quite challenging

My experience using WebStorm 2022 with React, JavaScript, and MUI has been plagued by excruciatingly slow performance, making it nearly impossible to work efficiently. Autocomplete functionality takes an agonizingly long time to load, and my CPU usage sky ...

reactjsintellij-ideamaterial-uiwebstorm

Generate JSON on-the-fly with ever-changing keys and values

I am new to coding and I'm attempting to generate JSON data from extracting information from HTML input fields. Can anyone guide me on how to create and access JSON data in the format shown below? { Brazilians**{ John**{ old: 18 } ...

javascripthtmljsonobject

What is the process for retrieving information from a JSON document?

When working on my project using Next.js, I encountered an issue with fetching and displaying data from a JSON file named mainMenu. Could someone please guide me on how to correctly implement this? I have shared my code below: function MyApp({ Component, ...

reactjsnext.js

Expanding the Window Object in Typescript with Next.js Version 13

Within my Next.js 13 project, I am looking to enhance the Window object by adding a property called gtag I created an index.d.ts file in the root folder with the following content: index.d.ts declare module '*.svg' { const content: any; exp ...

reactjstypescriptnext.jsnext.js13

Bootstrap classes not aligning with individual elements

image My content is aligned with the text on the left and the form on the right, which is exactly what I intended. However, everything seems to be outside of my jumbotron container. Below is my HTML and CSS code. Your feedback is greatly appreciated. & ...

htmlcssbootstrap-4

Troubleshooting problem with toggling menu in ReactJS using Material UI

I've been working on a feature that involves toggling the open state of a menu using both a button and menu items. However, I'm facing an issue where the menu expands when clicked but doesn't close upon a second click. class Topbar extends R ...

reactjsmaterial-ui

Executing a React component from HTML: A step-by-step guide

I have decided to start creating a React component in order to enhance my skills. My goal is to integrate it into an existing HTML page (using ERB) but I am facing some challenges when trying to make it execute properly. Refreshing the page doesn't t ...

reactjserb

The data exists in the state but is not being displayed/rendered on the screen

Could you help me figure out why my React code is behaving strangely? Here's the Component class: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table&a ...

reactjsrestrendering

Ways to ensure even spacing in a responsive header design

On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than i ...

cssmobileresponsive-designresponsive-images

Is it possible to categorize elements for focus and onblur events?

In my search feature, I have implemented an autocomplete div that appears when the user types in a search field. The issue I am facing is that I want the div to disappear when the user clicks outside of it. Here is what I have attempted: //SHOW THE DIV WH ...

javascriptjqueryhtmlcss

Assurance of access granted through token

Currently, I am working with jwt authentication that involves access and refresh tokens. However, a problem arises when the access token expires and a new access token is generated on the frontend (react). This process returns a promise. In the backend/ro ...

reactjsexpressauthenticationjwt