How to adjust parent height for Table component in Material UI?

I am looking to make the height of the table fit the available space within its parent. Specifically, I would like:

  • The footer to always be anchored at the bottom of the parent container.

  • If the table has only a few rows, I want the footer to stay at the bottom.

  • If the table has more rows than can fit in the parent's height and overflow is necessary, I want the overflow to only show for the body of the table while keeping the footer anchored at the bottom without being pushed down.

  • To explore using a flexbox approach if feasible (as it seems like a flex scenario).

What I do not want:

  • An approach based on setting height to 100vh.

  • Using calc(100vh - ***px) because I prefer a methodology that can be applied across different component hierarchies in my solution.

  • Setting fixed heights for the table.

  • Relying on absolute/fixed positioning.

  • Third-party solutions, if possible.

  • Using .offsetHeight.

Example: https://stackblitz.com/edit/react-8h5dpy

Visual Examples:

https://i.sstatic.net/hRv7V.png

javascriptcssreactjsmaterial-uijsx

Answer №1

Expanding an element to fill all available space without exceeding the height of its parent can be achieved with the following approach:

.parent {
   // Implement flexbox layout for children
   display: flex;
   flex-direction: column;
}
.childThatExpands: {
   // Occupy all available space
   flex-grow: 1;        

   // Ensure it does not exceed available space (elements are as tall as their content by default)
   min-height: 0;       
   overflow: scroll;
}

Why use min-height: 0? Find out more at .

In your case, the implementation may resemble this: https://stackblitz.com/edit/react-wgbzpb.

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

A gap only appears in the drop-down navigation when the page is scrolled

After finally completing my first website, I encountered a frustrating issue. When scrolling down the page, a gap appears in the navigation bar, making it impossible to access the dropdown menus. I've been struggling to fix this problem on my own. Any ...

htmlcssnav

Is there a way to retrieve text content from a modal using JavaScript?

I am using ajax to fetch values from my table. $(data.mesIzinTanimList).each(function (index, element) { if (element.izinTanimiVarmi == 'yok') tr = "<tr class='bg-warning text-warning-50' row='" + element. ...

javascriptajaxbootstrap-modalgetvalue

using dynamic CSS classes in a Vue app

I am currently in the process of developing a component with vuejs and tailwindcss. I have run into an issue where the colors for the background and text are not being applied properly. <template> <div :class="[isDark ? `bg-${color}-900 t ...

cssvue.jstailwind-css

Achieving a consistent border-radius effect during hover transitions

I designed a div that initially displays an image, but upon hovering over it, a second div with text and a solid colored background appears to mask the original content. To see what I'm talking about, check out my jsfiddle: 'Mask on Hover' ...

htmlcsscss-transitions

Deactivate the date when it reaches 8 in the current date count using ajax, php, and mysql

I want to prevent users from selecting a specific date after it has been chosen 8 times. Currently, when the date is selected for the 9th time, an alert box pops up. Instead of the alert box, I would like to disable that particular date selection altogethe ...

javascriptphpjquerymysqlajax

What is the process for implementing a loading state during the next auth signin on my application?

After submitting the form, the signin function is triggered and everything happens in the background without allowing me to set a state for it. To enable the signin functionality, I have imported the following: import { signIn } from "next-auth/react ...

reactjsnext.js

Ajax returns with a successful response, yet the specified action is never executed

Currently assisting with a plugin build on Wordpress and facing an issue with a basic ajax call. I am attempting to pass an object through the method 'grab_object_from_ajax_call,' but the method is not executing as expected. Below is the JavaScri ...

javascriptphpajaxwordpressplugins

Using React and React MUI, here's a guide on implementing scrollIntoView after expanding an accordion:

Is there a way to trigger the el.scrollIntoView() event without relying on setTimeout? I find this method somewhat hacky in SPAs, as I have used it in Angular and React before in similar scenarios. Any alternate solutions? I've noticed that when one ...

material-ui

Is the concept of Controlled and Uncontrolled Components in VueJs similar to that of React?

When it comes to React, there is a distinction between controlled and uncontrolled components explained in detail at this link. Controlled components function within the React model where state is managed in the virtual DOM. In contrast, uncontrolled com ...

javascriptreactjsvue.jsvuejs2

Unable to interpret data from JSON file

I have written the following code to read a JSON file. It is not throwing any errors, but I am receiving a null value in the variable: var myData = null; $.ajax({ type: 'GET', async: false, url: 'myJson.json', dataType: ...

javascriptjqueryjson

Display Contentful items with GatsbyJS

I have been successfully pulling data from the Contentful API into my Gatsby project, and everything appears to be working correctly. However, when I try to display the Contentful data on my index.js file using a component, I keep encountering an undefined ...

reactjscontentfulgatsby

Struggling with the challenges of utilizing @media only screen to conceal a div in mobile view

I need to toggle the visibility of the "tiled-map" div when viewing on mobile devices, while ensuring that all 3 divs (base-map, overlay-map, tiled-map) within the "map-wrapper" div are displayed on desktop view. Currently, I am using Bootstrap CSS withou ...

javascripthtmlcsstwitter-bootstrap-3leaflet

Enabling the dark theme does not replace the existing theme

When I modify a color in the theme, the theme remains unchanged. However, when I attempt to update the palette type, it does not work. Instead, a new theme is created. Unfortunately, this means that any previous modifications are lost. Current Scenario ...

reactjsmaterial-uithemes

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

htmlcssangular

Converting PHP variables to JavaScript variables: A step-by-step guide

I'm trying to figure out the most efficient method for retrieving PHP variables using AJAX and then transforming them into JavaScript variables. Imagine I have the following code in my PHP file: echo $total; echo $actual; Edit: JSON echo json_enco ...

javascriptphpjqueryajax

CSS Hue Rotate is causing the image to appear darker

The CSS filter hue-rotate seems to be darkening my image according to my observations. For an example, visit: https://jsfiddle.net/m4xy3zrn/ Comparing images with and without the filter applied, it’s clear that the filtered one appears much darker than ...

csscss-filters

Receiving an error when attempting to utilize a value from the .env file in createSecretKey function

Currently, my code looks like this: const secretKey = crypto.createSecretKey( Buffer.from(process.env.SECRET, "hex") ); However, I am encountering the following error message: "The value of 'key.byteLength' is out of range. It must be > ...

javascriptnode.jsnext.jscryptography

Tips on using Visual Studio Code to troubleshoot Angular 4 unit tests

I am working on an Angular 4 project with Material design in Visual Studio Code. The setup is done using angular/cli. Currently, I have been writing unit tests using Karma and Jasmine. However, when trying to debug the tests by setting breakpoints, it doe ...

javascriptangulartypescriptkarma-jasmine

Using the moment library in Angular to convert date and time can sometimes lead to errors

Whenever I attempt to convert a Gregorian date to a Persian date, the minute value in the conversion ends up becoming an error. For instance, let's say I want to convert this specific date and time to a Persian date: 2020-09-14T16:51:00+04:30 should ...

javascriptangulartypescriptmomentjsjalali-calendar

Bootstrap is causing issues with unidentified div elements

I recently embarked on creating a slideshow using HTML, CSS, and jQuery. After completing the slideshow, I decided to add an interactive page beneath it. To streamline the layout process, I opted to utilize Bootstrap. However, upon loading Bootstrap, I en ...

javascriptjqueryhtmlcsstwitter-bootstrap