Develop Reference

Textfields in a Grid not responsive when it is under a tab

I have a component under a tab and because of that it makes the Textfield not responsive when it is on a small screen. This is what the Textfield looks like in small screen sizes when I tried checking what it looks like in iphone 5/SE screen size.
How can I make this responsive? I have recreated this in Codesandbox

In your Grid item, add xs={12} to tell the grid item expand to 100% width of its parent, alongside with setting the fullWidth prop of the TextField. See more examples about how you can divide the grid item here.
<Grid item xs={12}>

Specify Material UI's Grid item location

CSS grid layout has the grid-column property to specify grid item location
(e.g. grid-column: 1 / 3)
I want to do the same using Material UI's Grid component, but it doesn't allow me to specify the certain starting and ending points, just the number of columns taken at all.
(e.g.
<Grid container rowSpacing={1}>
<Grid item xs={8}>
Item 1
</Grid>
<Grid item xs={4}>
Item 2
</Grid>
</Grid>
For example, I want the first Item to be located from 2 to 4 column and the second Item to be located from 7 to 10 column. How do I do that in MUI v5?

The Grid component from Material UI has a misleading name. Their Grid component is not based on CSS Grid, It's actually CSS Flexbox with added features. So you wouldn't be able to use it like CSS Grid. You can just use CSS Grid and you won't have any conflicting issues.

ReactJS - Responsive Layout using Media Queries

I am working on a web app, and I am trying to make it responsive, but I am running into a few problems. I am using media queries to detect if the screen width is > than a certain amount or < than a certain amount. Based on that, I would want to change the layout of my component, so that it does not cram and move everything out of alignment. However, it seems like if my goal is to reorder the child components within my component using conditional rendering based on the media query result, then my code would be repeated multiple times. Hence, I am checking to see if there are any other ways to accomplish this.
Below is a screenshot of the browser when the screen size gets smaller, the contents get too cramped up, and hence it messes up the alignment.
Below is a snippet of my code (this code represents the right side of the image -> Revenue and Revenue KPI)
<Row justify="space-around">
<Col span={11}>
<Statistic
title="Revenue"
value={data[metric].revenue}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
<Divider type="vertical" />
<Col span={11}>
Revenue KPI
<Button shape='circle' size='small' onClick={() => handleClick('rev', metric, 'post')} style={{ marginLeft: '5%' }}>
<PlusOutlined />
</Button>
<Statistic
value={data[metric].rev_kpi}
valueStyle={{ color: '#3f8600' }}
/>
</Col>
</Row>
What I would want to do, is to change the grid layout once the screen width is smaller than a certain amount, and instead of the components above being in the same Row, I would want each to be in their Row (stacking on top of each other). However, if I were to do this using conditional rendering, it seems like I would have to repeat the code quite a fair bit, which seems tedious and messy. Hence, I am hoping if there are any more efficient methods to achieve what I would want to make.
The UI package I am using is AntD (where I got the components for Row, Col, Statistic, Button)
https://ant.design/components/grid/
this is my media query function (I use this function to return a boolean based on the query I pass in)
import { useEffect, useState } from "react";
function useMediaQuery(
query,
defaultMatches = window.matchMedia(query).matches
) {
const [matches, setMatches] = useState(defaultMatches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) setMatches(media.matches);
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
}, [query, matches]);
return matches;
}
export default useMediaQuery;
All help is appreciated, thanks all! Do guide me along as I am new to React and especially new to implementing responsive websites!

Since Row and Col in ant design seems to be based on flex you should try to use the CSS order property to re-arrange your elements
https://developer.mozilla.org/en-US/docs/Web/CSS/order
It is also available as a prop on the Col component:
https://ant.design/components/grid/#Col
CSS order demo (use media query to change order value for various screen sizes):
div {
display: flex;
flex-direction: column;
}
#reverse:checked ~ div>p:first-child {
order: 2;
}
<input type="checkbox" id="reverse"/>
<label for="reverse">reverse</label>
<div>
<p>First text element in HTML</p>
<p>Second text element in HTML</p>
<div>
For even more complex rearrangement of your elements you could use CSS Grid:
grid-template-areas: give custom names to areas in your grid
grid-area: place element in the grid using one of your custom names
use media-queries to change grid-template-areas and it should work nicely
https://css-tricks.com/snippets/css/complete-guide-grid/

Virtualized table scroll on window like a normal table

I am currently trying to integrated a virtualized table in react using react–virtualized, however the table does not seem to render correctly and I am trying to understand as to why. I also have a few other problems that I cant find documentation on how to do as I have pointed out below.
It would be great if anyone has something or could help.
Below is the code I am using and my goal with this is to be able to:
1- Scroll with the page the table
2- Height of rows be automatic and widths
3- The numbers shown in the row need to be formatted some depending on condition and same for wealth depending on condition may show red or green using css.
Now I have been able to get scroll to partially work however at the top of the scroll it shows massive white space when I scroll down while the table is still in view.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
width={1000}
autoHeight
height={height}
headerHeight={30}
rowHeight={40}
scrollTop={scrollTop}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={this.setData.length}
rowGetter={({index}) => this.setData[index]}>
<Column label="Country" dataKey="country" />
<Column label="Flag" dataKey="flag" />
<Column label="Population" dataKey="population" />
<Column label="Wealth" dataKey="wealth" />
</Table>
)}
</WindowScroller>
Also just out of curiosity is there any library or way that you can just render content on scrolling eg infinite loading on scrolling down the screen that way it renders everything out of the screen as it comes in or as its about 200px from coming into view ?

You can use Material-UI tables for a customizable table, it's very easy and flexible.
If you prefer to use a specific table please share code.

react-virtualized dynamic table height

I am using react-virtualized.
What I want to achieve: I want the table's own height to be dynamic, such that the table will grow in height when there are added more rows to my table.
I have used CellMeasurer on the rows to compute the height of each row. It seems like the List from react-table needs a height to know how much it should render, so what is the propper way to calculate the new table height?

You can simply specify autoHeight prop as stated in docs.

You can use the height from WindowScroller component provided by react-virtualized
Example:
<WindowScroller>
{({ height, scrollTop}) => (
<AutoSizer disableHeight>
{({ width }) => (
<Table
autoHeight
height={height}
scrollTop={scrollTop}
width={width}
{...otherRequiredProps}
>
{/* Columns here*/}
</Table>
)}
</AutoSizer>
)}
</WindowScroller>
In the above code, I have also used AutoSizer component to take container width.