npm install
was throwing this error, any ideas why?resolve failed: { Error: Cannot find module 'q-io'
at Function.Module._resolveFilename (module.js:469:15)
at Function.requireRelative.resolve (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/require-relative/index.js:30:17)
at resolve (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:25:26)
at findAndRemove (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:67:11)
at /Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:111:13
at Array.map (native)
at loadPreset (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/lib/serialize.js:103:29)
at module.exports (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/modify-babel-preset/index.js:97:19)
at Object.<anonymous> (/Users/shan/Repos/sandbox/custom-react-virtualized/node_modules/babel-preset-es2015-rollup/index.js:3:18)
at Module._compile (module.js:570:32) code: 'MODULE_NOT_FOUND' } q-io
npm cache clean
& npm install q-io --save
, didn't really workrecomputeRowHeights()
on List
, it triggers an error: TypeError: Cannot read property 'recomputeGridSize' of null
. Since I haven't been able to reproduce locally, I'm not sure exactly what is causing it. Has anyone else seen this same issue?
Hi all! Does anyone have knowledge of how to increase the scroll width of a Collection (I think it may be determined by the rightmost cell?)
I am trying to synchronize LTR scrolling on several collections but I need to ensure they have the same underlying scroll width (ie. the each scroll container's width is set to the right-most cell of all the collections)
Hi everyone, could someone explain to me the following:
Where does the data come from for the list? Where is the entry point? Is it "context" ?
Where does the actual "sorting" happen? I can't seem to grasp it quite right.
Sources:
https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js
https://bvaughn.github.io/react-virtualized/#/components/Table
Grid
how many off-screen (or out of window) elements to keep while scrolling. I have a very long list and a tall header on top. The header is slightly translucent so you can see the elements that have been scrolled past. Basically it would work like overscanRowCount
, but in the opposite direction.
import React from 'react';
import ReactDOM from 'react-dom';
import { ArrowKeyStepper, Grid } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once
const list = [
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125, 'Software Engineer'],
];
function cellRenderer ({ columnIndex, key, rowIndex, style }) {
// console.log('ColumnIndex', columnIndex)
return (
<div
key={key}
style={style}
>
{list[rowIndex][columnIndex]}
</div>
)
}
ReactDOM.render(
<ArrowKeyStepper
columnCount={list[0].length}
rowCount={list.length}
>
{({ onSectionRendered, scrollToColumn, scrollToRow }) => (
<Grid
columnCount={list[0].length}
rowCount={list.length}
onSectionRendered={onSectionRendered}
scrollToColumn={scrollToColumn}
scrollToRow={scrollToRow}
cellRenderer={cellRenderer}
columnWidth={100}
height={300}
rowHeight={30}
width={300}
/>
)}
</ArrowKeyStepper>,
document.getElementById('root')
);