In react-virtualized's MultiGrid component, there is a property
fixedRowCount which makes the first e.g. 5 rows sticky.
<MultiGrid
cellRenderer={cellRenderer}
columnCount={100}
columnWidth={100}
height={500}
rowCount={50}
rowHeight={30}
width={500}
fixedRowCount={5} // how to do this in react-window?
/>
I would accept any answer that shows me how to implement the same
behaviour in react-window instead of react-virtualized.
Related
On my react app I have 3 droplist
the first drop has the primary values (ex: a, b) the next drop will filter the values in the array using the value selected in the first drop
I'm using the ui and Autocomplete material for the dropboxes
when I select the value in the first drop the component returns the value in the event of the click to the parent, and then I call the second drop with these values
<Grid item xs={4}>
<Dropdownlist
required
name='opt1'
texto='where:'
click={click1}
options={options}
optionsList1={optionsList1}
filter='regiao'
/>
</Grid>
<Grid item xs={4}>
{optionNameShow2 === 'hidden' ? null
: <Dropdownlist
required
name='opt2'
select3='hidden'
texto=' '
click={click2}
options={options2}
valueforFilter={selectState1 ? selectState1.optionValue : ''}
optionsList2={optionsList2}
filter='local'
/>}
</Grid>
the problem is that the values are only loading when I click the second time.
the probleme is on chrome and FF so far tested
and shoud be on first click.
working exemple is on : https://codesandbox.io/s/muddy-haze-6c1kj?file=/src/App.js
TL;DR: Your filterlists() triggers a state change, but if (value) {... is using the values before that call changes are actually reflected in the current state. I fixed your pastebin.
NL;PR: setStates are scheduled to run after the function that calls them ends, thus the values you are currently using are still before the changes have taken place. Take care of those setStates separately with an effect hook.
I am using react-virtualized to render my table. Is it possible at all to replace the default Column component with a custom one? I keep getting this error
Failed prop type: Table only accepts children of type Column
Yes of course,you can do that by using cellRenderer prop in Column which is callback function and it will give you bunch of parameters and you need return the custom component that will render in cell
<Column key={column.dataKey + column.label + index} dataKey={column.dataKey}
cellRenderer={
({ cellData, rowIndex, dataKey }) => (
<CheckBox
cellData={cellData}
changeCheckBox={changeCheckBoxHandler.bind(
this,
rowIndex,
dataKey
)}
/>
)
}/>
you can find out in detail here. https://github.com/bvaughn/react-virtualized/blob/master/docs/Column.md#cellrenderer
Why would you want to do this? You have to use the Column component to define every column, and then you can render whatever you want inside each Column.
Inside of an InfiniteLoader I have a List, whose rowRenderer callback creates a <div> wrapped by CellMeasurer (I'm also using a cache for that). The rows can vary wildly in size, but this setup is working well for scrolling purposes.
However, elements within each row can dynamically change in height based on user input. In those cases, I call:
cellMeasurerCache.clear(rowIndex, 0);
this._listRef.recomputeRowHeights(rowIndex);
But in some cases, this causes the rows to jump around -- this is because the top values are getting calculated incorrectly. For example, I'm displaying a document with the following rows rendered in List:
rowIdx height top
3 668px 420px
4 8547 1088
5 2420 9635
Then the height of row 4 increases slightly (~50px). After running the above code with rowIndex == 4, I see the following rows:
rowIdx height top
5 2420px 3088px
6 1156 5508
7 4718 6664
8 1050 11382
As you can see, row 5 now has an incorrect top value, causing the rows to jump around. I'm assuming that the height of row 4 did not get measured correctly.
What's wrong?
Update 2017-11-08: It appears that calling cellMeasurerCache.clear(rowIndex, 0) replaces the height of that row with the value of estimatedRowSize, which is very different. It doesn't seem to re-measure, contrary to what the docs say.
CellMeasurer._maybeMeasureCell() isn't called for row 4 after it gets the default height. My rowRenderer callback (which creates CellMeasurer around my content) is only invoked starting at row 5. So the code has made the decision of which rows to show with row 4 having the much smaller default height, instead of calculating beforehand.
Not sure if this is the correct/best way to handle this, but I was able to get this working like so:
First, I used the callback version of CellMeasurer, storing the measure callback for later use (stored per row):
rowRenderer = ({ key, index, style, isScrolling, parent }) => {
const getContent = measure => {
// store callback for later use
this._measureCallbacks[index] = measure;
// ... get your content ...
return content;
};
return (
<CellMeasurer
key={key}
cache={cellMeasurerCache}
columnIndex={0}
parent={parent}
rowIndex={index}
>
{({ measure }) => (
<div key={key} style={style}>
{getContent(measure)}
</div>
)}
</CellMeasurer>
);
};
Later, when a row height changes, instead of calling cellMeasurerCache.clear(), I run:
// tell row to re-measure
this._measureCallbacks[rowIndex]();
// tell list to recompute row offsets
this._listRef.recomputeRowHeights(minRow);
Is partially rendering a single column in a collapsibleSubTable using #rows in RichFaces 4 possible?
For example this works with a single datatable.
List<Integer> updatedRows
render="myForm:myTable:#rows(updatedRows):id"
I'm not sure how to do this dynamically With a collapsibleSubTable.
render="myForm:myTable:#rows(updatedRows):mySub:#rows(updatedSubRows):id
Is it possible to pass the current iteration of updatedRows into updatedSubRows? Something along the lines of.
render="myForm:myTable:#rows(updatedRows):mySub:#rows(updatedSubRows(currentUpdatedRow)):id
Where currentUpdatedRow is updatedRows[0], updatedRows[1] and so on.
Or maybe using a HashMap<Integer, HashSet<Integer>>()?
This question already has answers here:
Why JSF calls getters multiple times
(9 answers)
Closed 6 years ago.
In my ADF project , I have a table component on JSF page whose value attribute is bound to method in Managed bean which returns List type object . I am able to show the data on the table but i can see the method being executed as many as 22 times ! Why the method is being called this many times and does the same thing happens with business components as well when we expose them through Data control? TIA
Edit : JSPX code :
<af:table var="row" rowBandingInterval="1"
autoHeightRows="10"
binding="#{backingBeanScope.backing_ForEachExample.t2}"
id="t1" partialTriggers=":::cb1"
styleClass="AFStretchWidth"
value="#{backingBeanScope.backing_ForEachExample.test2}">
<af:column sortable="false" headerText="col1" id="c3">
<af:outputText value="#{row}" id="ot2"/>
</af:column>
</af:table>
Bean Method is :
public List<String> gettest2(){
/* Unique values are derived */
List<String> tab=new ArrayList<String>();
for(String s:uniqueValues){
System.err.println("? Unique Value is : "+s);
tab.add(s);
}
return tab;
}
when you are using ADF BC, data is displayed from you VO which is exposed in AM through a data control, you can specify VO tuning properties, which determine how many records are fetched from database in one round trip. this is named in batches of. you can specify iterator's range size in sync with how many records you are fetching from database in one go and how many you need to dispay in table at UI. af:table has an attribute called fetchSize, if you set this attribute to some value equal to iterator range size say 20, and VO > Tuning > in batches of = 20, it would query only once. by default, VO in batches of is equal to 1, in that case, if you display a table with autoheightrows = 20, in this case table will query data multiple times from database.