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.
Related
I have a weird problem. I'm mapping options for a submenu inside of a div (container for the submenu). And I set width of the DIV to be '100%'. However, the following submenu divs take the same width, even though they do not need it.
I have provided some screenshot to describe it better. You see the first submenu reaches max-width which is 400. And automatically, the second div has 400px width even though it clearly does not need it.
I tried using width='fit-content', or not assigning width ( so that it calculates it itself ). But they do not help at all, the submenu collapses completely and has like 50px width - which is unreadable.
Is there any way to achieve different width for all the submenus?
EDIT (code):
{showNestedOptions && (
<Box
w="100%"
maxW="400px"
>
{map(props.data.nestedOptions, (nestedOption, index: number) => {
return (
<Box>
<Option textAlign="left">
<Box h={'100%'} whiteSpace="normal">
{label}
</Box>
</Option>
</Box>
);
})}
<Box> = <div>
<Option> = <option>
all the options have the width of the widest element, and I'd like them to each adapt to the biggest element of each submenu
I have a bottom navigation that contains 5 elements. When you resize the window lower than 400px, the bottom navigation doesn't "squeeze", so to say; it remains at a minimum 400px which means a scrollbar appears for the x axis.
You can see a minimal reproducible example here: https://codesandbox.io/s/eloquent-sanderson-epuhdf?file=/src/index.js&resolutionWidth=400&resolutionHeight=675
In the example, the min width actually seems to be marginally wider and it always overflows a little, but the principle is still the same.
What I need to do is ensure the padding/whitespace ebtween the elements squeezes together when there's a screen smaller than 400px. I've tried manually overriding the padding both in the sx of the BottomNavigation component, and with the styled utility. With styled I removed the padding from the last child, but then all of the padding of the rest of the items grew to always fill 400px.
I understand there's always a limit; I can't expect to have 5 items on a 200px wide screen. But I should be able to go a bit lower than 400px. Note: If I jsut have 4 items, it resizes jsut fine.
Here' my code currently:
<BottomNavigation
value={value}
onChange={(_, index) => {
getPageIndex(index);
}}
sx={{ maxWidth: "100vw" }}
>
// 5 nav icons
</BottomNavigation>
I found a solution: change the minWidth of action items to 70px. By default it's 80px.
const CustomisedBottomNavigationAction = (props: any) => (
<BottomNavigationAction sx={{ minWidth: "70px" }} {...props} />
);
then, each child of your BottomNavigation:
<CustomisedBottomNavigationAction
label={PageNames.Home}
icon={<HomeIcon />}
component={RouterLink}
to={NavigationRoutes.Home}
/>
I'm using react-window to implement a chat message list, but I'm getting stuck trying to set the right itemSize to each item. Happens that a chat message, based on his text length and window width, hasn't always a prefixed height (or a height that i can calculate in a simple way).
I'm currently using a VariableSizeList and the code looks like this
<AutoSizer>
{({ height, width }) => (
<List
height={height}
itemCount={messages.length}
itemSize={(index) => messages[index].isReply ? 118 : 79} /* THIS IS CURRENTLY WRONG, DOESN'T PICK ALL CASES!*/
width={width}
>
{({ index, style }) => (
<ChatMessage
key={index}
style={style}
...
/>
)}
</List>
)}
Is there a way to set the item height of the list row equal to the ACTUAL height of its content?
That's a little tricky and not officially supported by react-window as discussed in this issue. Apparantly one way to trick this is by using Element.getBoundingClientRect().height and setting the size of this Element via itemSize. An example is given here https://codesandbox.io/s/dynamic-size-of-react-window-list-items-64o9p?file=/src/ChatMessage.js
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.
I'm trying to add full width in Semantic React UI, but it's not taking full width.
Code:
<Table.Row>
<Table.HeaderCell style={{Width: '600px'}}>
<Search/>
</Table.HeaderCell>
</Table.Row>
Use props name 'colSpan' to defined number of who column
<Table.HeaderCell colSpan={8}>
<Search/>
</Table.HeaderCell>
Looks like you aren't modifying the first header cell for that column (which is actually Company Name, not search).
Here is an example on how to properly modify column widths in a table
https://codesandbox.io/s/5v800vplmk?module=/example.js
If your intent is to not make the search bar part of the table column structure, then you probably don't want to put it in a row / cell.