I'm using Ant Design to get a data Table with pagination. My desired result is to have this component stretched over the entire height of a parent container and adjust the number of rows according to the available space. But, since I have to think about different end users' screen sizes I can't simply assume how many rows would be there in a single page, like this:
<Table
pagination={{ pageSize: 6 }}
columns={columns}
dataSource={sampleData}
/>
Is there any recommended approach to make the pageSize property react to a screen's height changes dynamically? Or should I just set certain breakpoints manually?
There is no antd API for such behavior, you need to calculate it by yourself.
Useful functions to determine the screen height are:
clientHeight
getBoundingClientRect
Notice that those element functions, in React you should access them via a reference, for example with useRef.
The way I solve this UX problem is by to set the scroll property:
scroll={{ y: "calc(100vh - 250px)" }}
With this, the height of the Table will adapt to the user's client height, you'll just need to change 250px to whatever works for you.
Related
When using textarea fields in a row, the row can become very tall in height. Is there a way to initially set a max-height of cell/rows and just make them bigger when necessary?
To extend on your initial answer, that wont work for all rows if you have the virtual DOM enabled.
It is extremely bad practice to try and manipulate elements inside the table as they could be replaced at any time, tabulator only renders the visible rows, others are created and destroyed as the table is scrolled so trying to apply heights like that will not work reliably in most cases.
In your case I would suggest setting it in CSS after you have imported the tabulator.css file:
.tabulator .tabulator-row tabulator-cell{
height:24px
}
I'm using DetalisList within ScrollablePane component to keep the header in view, and let the rows scrollable. However, this requires me to manually set the height of the scrollable container.
div.scrollable-container
ScrollablePane
DetailsList
When I investigate the DOM elements for DetalisList, I can see that it's wrapped inside a ViewPort element. The height of this element is the actual height of the sum of the height of all components that make up the list (column headers, rows. etc.). Thus, I want to be able to read this value and set the container height based on whether it exceeds a certain value or not.
Is there a nice to way to access the height of the ViewPort? I can always query the DOM, and find the element, but I'd like to avoid relying on the internal structure of the component.
So, far I could not find any information on this. I noticed DetailsList takes a prop called viewport, but I don't think this is what I want.
You can try by giving height in "vh" (viewport height) unit. For example,
const gridContainerStyle: IStackStyles = {
root: { height: "70vh", position: "relative" },
};
I have a collection of photos that uses React Virtualized's Grid element.
We've designed an indicator to appear during photo uploads. This hides and shows dynamically and is rendered via the cellRangeRenderer per these docs.
The tricky part has been getting the rest of the Grid items to respect the additional height added by this new element. The approach that's currently in place is to add the height of that element to the style.top of each element rendered in cellRenderer.
const adjustedTopOffset = style.top + heightOfTopElement;
That above calculation is done for each element. This correctly places all elements at the appropriate offsets. However, the height of the Grid does not adjust for the recalculation of the top offsets.
The consequence is that the bottom of the Grid is cut off by the adjusted top amount.
How do I correctly account for adjusted top offsets? Calling recomputeGridSize doesn't seem to do it.
Is adjusting the top offset in cellRenderer the correct approach for accounting for an additional top element? I'll clarify that this isn't a fixed element but rather one that needs to scroll with the Grid like the other elements.
Given that your cell heights are fixed, you should be able to overrides the default height style using the containerStyle prop, like so:
let containerStyle;
if (isTopElementVisible) {
containerStyle = {
height: rowHeight * rowCount + heightOfTopElement,
maxHeight: rowHeight * rowCount + heightOfTopElement,
};
}
I have a problem where I am using a React grid component in order to display multiple charts. If you imagine the webpage is a 4 x 4 grid and I have two charts. Each chart being a 4 x 2 grid item. The grid library uses row height in order to say how large (y-axis) the charts are - so imagine if the row height is statically set to 100px, then the gird is going to be a width x 400px grid.
The problem comes in because being made for different displays or accounting for if someone is going to have the application minimized (not full screen) the height of the component the charts will be rendered in is variable. I am able to get the height of the component's <div /> by using:
return (
<div
className="content absolute top right left bottom"
ref={divElement => this.divElement = divElement}
>
...
and then calling setState in the componentDidMount lifecycle method.
componentDidMount() {
const height = this.divElement.clientHeight
this.setState({ height })
}
I can get the height of the <div /> fine with this approach but the obvious caveat to this aside from eslint complaining is that it will cause a re-render of the component which is bad.
My question is how should I approach this if there is a better way to complete this same task? Is there another lifecycle method this would be better in (not really thinking there is). It's just that I have to wait until the <div /> the charts reside in to be rendered before I can say how big the charts should be
I have a React Component that renders an instance of tinymce editor.The goal is to resize the editor's height dynamically after it has been initialized. I am using "React Grid Layout" package to resize the component.
2 Questions:
1. Where can I look up for the change in height of the editor's parent within the react component.In which lifecycle?
2. Where should Update the editor configuration for its height? Within the init method?
render(){
<div id="wrapper">
<textArea id="tinymceSelector"></textArea>
</div>
}
Part of my solution is to determine the parent's height like this:
let parentHeight = document.getElementById('wrapper').clientHeight
If there is any difference before and after resizing with React Grid Layout this parent Height will show the difference in size.
After I have found the height and determine the height change (but where? that is my question 1). I would update the tinymce configuration with:
editorinstance.theme.resizeTo (width, height);
Thank you!!
The implemented solution was:
On first render, I initialize the tinymce editor as follows:
I calculate the initial height at which the editor should be rendered based on #wrapper height.
I set the for the #wrapper's height in a variable called this._wrapperHeight.
Instead of setting the editor's height to the same height as the #wrapper, I adjust it to be only 70% of the total value. This prevents scrollbars. (I must say, I would like a different implementation to this because when I resize it to be too small the scrollbars are persistent)
this._editorHeight = this._wrapperHeight * 0.7;
During init, the I also had to include the plugin autoresize in the editor's configuration and also set the autoresize_min_height=this._editorHeight
After initialization has been accomplished, updating the height dynamically was achieved as follows:
In componentWillReceiveProps I calculate the #wrapper's height again.
Evaluate the old wrapper's height vs the new one
If they are different then: set the new height tinymce.get(this.props.renderId).theme.resizeTo(this._editorWidth, this._editorHeight);