React-window: स्क्रॉलसिंक के साथ संगतता

सबसे पहले, दयालु शब्दों और सकारात्मक प्रतिक्रिया के लिए धन्यवाद। मुझे यह जानकर खुशी हुई कि अब तक प्रतिक्रिया-विंडो आपके लिए अच्छा काम कर रही है!

मैं सहमत हूं कि स्क्रॉलसिंक जैसे घटक को एक स्टैंडअलोन पैकेज के रूप में जारी किया जा सकता है जो प्रतिक्रिया-विंडो पर निर्भर करता है, लेकिन मैं इसे इस परियोजना में नहीं जोड़ना चाहता क्योंकि यह विंडोिंग के लिए मूल नहीं है।

स्क्रॉल प्रॉप्स के बारे में आपके विशिष्ट प्रश्न के संबंध में, यह एक ऐसा बदलाव नहीं है जिसे मैं प्रोजेक्ट में करने के लिए तैयार हूं क्योंकि प्रतिक्रिया-वर्चुअलाइज्ड के साथ इसका उपयोग करने के बाद, मुझे पता चला कि इसमें कुछ गंभीर कमियां हैं। मैंने वास्तव में इसके बारे में रिएक्ट ब्लॉग पर लिखा है यदि आप उत्सुक हैं:

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-dered-state.html#anti -pattern-erasing-state-when-props-change

आप अनिवार्य स्क्रॉल एपीआई का उपयोग कर सकते हैं जो समान सिंक व्यवहार प्राप्त करने के लिए प्रतिक्रिया-विंडो ऑफ़र करता है। आपको बस इन तरीकों को प्रॉप्स पास करने के बजाय प्रतिबद्ध जीवनचक्र से कॉल करना होगा।

उम्मीद है कि यह समझ में आता है लेकिन अगर नहीं तो फॉलो अप प्रश्न पूछने में संकोच न करें!

यह पूरी तरह से समझ में आता है। सलाह के लिये धन्यवाद! मुझे यह काम मिल गया, और इसे स्थापित करना वास्तव में काफी आसान है। इतना आसान है कि यह निश्चित रूप से एक स्टैंडअलोन पैकेज की गारंटी नहीं देता है। शायद दस्तावेज़ों में एक उदाहरण, लेकिन मुझे लगता है कि यह आपकी कॉल है। अगर भविष्य में कोई और इस मुद्दे पर ठोकर खाता है तो मैं यहां अपने कामकाजी कोड सैंडबॉक्स उदाहरण के लिए एक लिंक छोड़ दूंगा।

https://codesandbox.io/s/y3pyp85zm1

TLDR - हेडर ग्रिड पर एक रेफरी डालें, और इसे बॉडी ग्रिड पर रखें।

onScroll={({ scrollLeft }) => this.headerGrid.current.scrollTo({ scrollLeft })}

लिंक के लिए धन्यवाद! यह बहुत विचारणीय है।

गुरु, 8 नवंबर, 2018 को दोपहर 1:09 बजे रीगन कीलर < नोटिफिकेशन @github.com ने लिखा:

यह पूरी तरह से समझ में आता है। सलाह के लिये धन्यवाद! मुझे यह काम मिल गया,
और इसे स्थापित करना वास्तव में काफी आसान है। इतना आसान है कि यह निश्चित रूप से नहीं करता है
एक स्टैंडअलोन पैकेज वारंट। शायद डॉक्स में एक उदाहरण, लेकिन वह आपका है
कॉल मुझे लगता है। मैं यहां अपने वर्किंग कोड सैंडबॉक्स उदाहरण के लिए एक लिंक छोड़ूंगा
अगर कोई और भविष्य में इस मुद्दे पर ठोकर खाता है।

https://codesandbox.io/s/y3pyp85zm1

TLDR - हेडर ग्रिड पर एक रेफरी डालें, और इसे बॉडी ग्रिड पर रखें।

ऑनस्क्रॉल = {({स्क्रॉल लेफ्ट}) ​​=> this.headerGrid.current.scrollTo ({स्क्रॉल लेफ्ट})}

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने खुली/बंद स्थिति को संशोधित किया है।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/bvaughn/react-window/issues/86#issuecomment-437156749 ,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AABznTUunzEIs6bVQfVsz7T21L2-Pkkoks5utJ17gaJpZM4YVMd7
.

इस पर ठोकर खाने वाले किसी भी व्यक्ति के लिए, मेरे पास react-virtualized में स्क्रॉल-सिंक किए गए शीर्ष/दाएं/नीचे/बाएं जमे हुए सुपर ग्रिड थे जिन्हें मैंने अभी इस lib में माइग्रेट किया था। मैं कहूंगा कि उपरोक्त समाधान कम से कम बेहतर प्रदर्शन करने वाला है, और अन्य पुस्तकालय में ScrollSync का उपयोग करने से काफी कम दर्दनाक है।

यह नए useRef रिएक्ट हुक (https://reactjs.org/docs/hooks-reference.html#useref) के साथ काफी अच्छी तरह से जुड़ता है।

const topRef = useRef();
const rightRef = useRef();
const bottomRef = useRef();
const leftRef = useRef();
...
<Grid
  onScroll={({ scrollLeft, scrollTop }) => {
    if (leftRef.current) {
      leftRef.current.scrollTo({ scrollTop });
    }
    if (rightRef.current) {
      rightRef.current.scrollTo({ scrollTop });
    }
    if (topRef.current) {
      topRef.current.scrollTo({ scrollLeft });
    }
    if (bottomRef.current) {
      bottomRef.current.scrollTo({ scrollLeft });
    }
  }}
  ...
/>

अच्छा! @ranneyd साझा करने के लिए धन्यवाद!

यह नए useRef रिएक्ट हुक (https://reactjs.org/docs/hooks-reference.html#useref) के साथ काफी अच्छी तरह से जुड़ता है।

धन्यवाद @ranneyd

क्या एक कामकाजी उदाहरण साझा करना संभव होगा?

@ranneyd फिर से धन्यवाद, मैंने आपके दृष्टिकोण का पालन किया और स्क्रॉल सिंक ठीक काम करता है।

स्क्रॉलबार पर छिपा हुआ अतिप्रवाह ग्रिड के अंत के निकट गलत संरेखण का कारण बनता है:

इसे ठीक करने के लिए कोई सुझाव?

कोडसैंडबॉक्स उदाहरण

अग्रिम में धन्यवाद

@carlosagsmendes यह स्क्रॉल बार की वजह से है। बाईं ओर ऊंचाई को स्क्रॉल बार के आकार से घटाकर ऊंचाई बनाएं। उपकरणों में स्थिरता प्राप्त करने के लिए मैं मैन्युअल रूप से सीएसएस के साथ स्क्रॉल बार आकार को हार्ड-कोड करता हूं। यदि आपकी सामग्री इतनी गतिशील है कि स्क्रॉल बार हो भी सकता है और नहीं भी हो सकता है, तो "संख्या आइटम * आकार आइटम <चौड़ाई (आपके पास वे सभी मान वहीं होने चाहिए)" जैसा कुछ करें और फिर उसके आधार पर ऊंचाई बदलें।

उपकरणों में स्थिरता प्राप्त करने के लिए मैं मैन्युअल रूप से सीएसएस के साथ स्क्रॉल बार आकार को हार्ड-कोड करता हूं।

FWIW डोम-हेल्पर्स पैकेज में एक आसान scrollbarSize फ़ंक्शन है जो आपको बताता है कि वर्तमान डिवाइस पर चौड़ाई क्या है। हार्ड-कोडिंग से बेहतर हो सकता है।

@ बवॉन हाँ! मैं उसका उल्लेख करना भूल गया। हालांकि, यह हमारे लिए काम नहीं किया। मुझे लगता है कि समस्या यह थी कि हम पहले से ही हार्ड-कोडेड स्क्रॉल बार कर रहे थे और इसने इसे भ्रमित कर दिया

धन्यवाद। मुझे एक कोशिश करनी ही होगी!

क्या यह क्षैतिज VariableSizeList के साथ काम करता है? मैंने कोशिश की लेकिन मेरा ब्राउज़र फ्रीज हो गया।

onScroll={({ scrollLeft }) => this.headerGrid.current.scrollTo({ scrollLeft })}

यह VariableSizeGrid के साथ अच्छी तरह से काम करता है लेकिन मेरा हेडर स्क्रॉल पर थोड़ा पीछे रहता है।

@ajaymore तो हेडर लैगिंग को फिर से करें: जब आप मैक पर स्क्रॉल व्हील का उपयोग करते हैं तो स्क्रॉल सिंक संघर्ष करता है। MacOSX में यह बिल्ट-इन नेचुरल स्क्रॉलिंग चीज़ है जहाँ यह स्क्रॉलिंग को "स्मूथ" बनाने के लिए इंटरपोलेट करता है। इस पर रिफ्रेश रेट वास्तव में क्रोम में एनिमेशन फ्रेम रेट से तेज है। इस प्रकार, जिस तत्व को आप स्क्रॉल कर रहे हैं वह V8/ScrollSync के पास DOM को अपडेट करने का समय होने से पहले चेतन होने वाला है। यह एक तकनीकी सीमा है जिसका समाधान मैंने नहीं देखा है।

मजेदार तथ्य: यदि आप ब्राउज़र में मैन्युअल रूप से स्क्रॉल बार का उपयोग करते हैं (जैसे छोटी चीज़ को खींचकर पुराने ढंग से स्क्रॉल करना) तो यह पूरी तरह से ठीक काम करता है। इंटरपोलेशन चीज़ को स्क्रॉल व्हील/ट्रैक पैड स्वाइपिंग में बनाया गया है

@ajaymore तो हेडर लैगिंग को फिर से करें: जब आप मैक पर स्क्रॉल व्हील का उपयोग करते हैं तो स्क्रॉल सिंक संघर्ष करता है। MacOSX में यह बिल्ट-इन नेचुरल स्क्रॉलिंग चीज़ है जहाँ यह स्क्रॉलिंग को "स्मूथ" बनाने के लिए इंटरपोलेट करता है। इस पर रिफ्रेश रेट वास्तव में क्रोम में एनिमेशन फ्रेम रेट से तेज है। इस प्रकार, जिस तत्व को आप स्क्रॉल कर रहे हैं वह V8/ScrollSync के पास DOM को अपडेट करने का समय होने से पहले चेतन होने वाला है। यह एक तकनीकी सीमा है जिसका समाधान मैंने नहीं देखा है।

मजेदार तथ्य: यदि आप ब्राउज़र में मैन्युअल रूप से स्क्रॉल बार का उपयोग करते हैं (जैसे छोटी चीज़ को खींचकर पुराने ढंग से स्क्रॉल करना) तो यह पूरी तरह से ठीक काम करता है। इंटरपोलेशन चीज़ को स्क्रॉल व्हील/ट्रैक पैड स्वाइपिंग में बनाया गया है

@ranneyd इतनी त्वरित प्रतिक्रिया के लिए धन्यवाद। मैं मानता हूं कि यह एक सीमा है। यह अधिकांश उपकरणों पर ठीक काम करेगा इसलिए कोई बड़ी चिंता नहीं है।

@bvaughn क्या आपने कभी position: sticky साथ खेला है? मैंने इसे थोड़ी देर में नहीं देखा है और मुझे पता है कि ब्राउज़र समर्थन कम है, लेकिन मुझे आश्चर्य है कि ब्राउज़र में इसका लाभ उठाने का कोई तरीका है जहां यह समर्थित है ...

मेरे पास @ajaymore जैसा ही मुद्दा है, कमजोर है (जैसा कि कहा गया है, यह मैन्युअल स्क्रॉल पर ठीक काम करता है)। मैं एक पीसी पर क्रोम के साथ परीक्षण कर रहा हूं, जाहिर है कि यह केवल मैक ही मुद्दा नहीं है ... क्या किसी को इस मुद्दे के आसपास काम करने में सफलता मिली है?

@alonrbar मुझे विंडोज पीसी पर भी यही समस्या है।

मुझे वास्तव में सिर्फ एक वर्कअराउंड मिला है जो मेरे लिए काम करता है।
सामान्य विचार एक "छाया ग्रिड" बनाना है जो मूल ग्रिड से छिप जाता है और उसके ऑनस्क्रॉल ईवेंट को चुरा लेता है और फिर इसका उपयोग मूल ग्रिड के साथ-साथ किसी भी अन्य ग्रिड को मैन्युअल रूप से स्क्रॉल करने के लिए करता है। यह प्रदर्शन को थोड़ा धीमा कर देता है लेकिन सभी ग्रिडों को अच्छी तरह से समन्वयित रखता है इसलिए आपको व्यापार को बंद करने पर विचार करना होगा।

कोड इस तरह दिखता है;

import styled from '@emotion/styled';
import * as React from 'react';
import { VariableSizeGrid, VariableSizeGridProps } from 'react-window';
import { SizeUtils } from '../utils';

export interface SyncableGridProps extends VariableSizeGridProps {
    mainGridRef: React.Ref<VariableSizeGrid>;
    shadowGridRef: React.Ref<VariableSizeGrid>;
    hideVerticalScrollbar?: boolean;
}

export class SyncableGrid extends React.PureComponent<SyncableGridProps> {
    public render() {
        const { height, width } = this.props;
        const {
            onScroll,
            mainGridRef: mainGridRef1,
            shadowGridRef: shadowGridRef1,
            ...mainProps
        } = this.props;
        const {
            children,
            style,
            overscanRowsCount,
            overscanColumnsCount,
            overscanCount,
            useIsScrolling,
            onItemsRendered,
            mainGridRef: mainGridRef2,
            shadowGridRef: shadowGridRef2,
            innerRef,
            outerRef,
            ...shadowProps
        } = this.props;
        return (
            <SyncWrapper
                style={{
                    height,
                    width
                }}
            >
                <MainGrid
                    {...mainProps}
                    style={Object.assign({}, style, {
                        overflowY: 'scroll'
                    })}
                    ref={mainGridRef1}
                />
                <GridShadow
                    {...shadowProps}
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0
                    }}
                    ref={shadowGridRef1}
                >
                    {() => null}
                </GridShadow>
            </SyncWrapper>
        );
    }
}

// ---------------- //
//      styles      //
// ---------------- //

const SyncWrapper = styled.div`
    position: relative;
    overflow: hidden;
`;

export interface MainGridProps extends VariableSizeGridProps {
    hideVerticalScrollbar?: boolean;
}

export const MainGrid = styled(VariableSizeGrid) <MainGridProps>`
    overflow-y: scroll;
    box-sizing: content-box;
    ${props => {
        if (!props.hideVerticalScrollbar)
            return '';
        const paddingDir = (props.theme.dir === 'rtl' ? 'padding-left' : 'padding-right');
        return `${paddingDir}: ${SizeUtils.scrollbarWidth}px;`;
    }}
`;

export const GridShadow = styled(MainGrid)`
    opacity: 0;
`;

फिर दूसरी फाइल में:

<SyncableGrid
    mainGridRef={this.firstGridMain}
    shadowGridRef={this.firstGridShadow}
    onScroll={this.handleFirstGridScroll}
    // other props omitted for bravity...
>
   // children omitted for bravity...
</SyncableGrid>
<SyncableGrid
    mainGridRef={this.secondGridMain}
    shadowGridRef={this.secondGridShadow}
    onScroll={this.handleSecondGridScroll}
    // other props omitted for bravity...
>
   // children omitted for bravity...
</SyncableGrid>

private handleFirstGridScroll = (e: GridOnScrollProps) => {
    const { scrollTop, scrollLeft } = e;

    // synchronize self
    if (this.firstGridMain.current) {
        this.firstGridMain.current.scrollTo({ scrollTop, scrollLeft });
    }

    // synchronize other grid
    if (this.secondGridMain.current) {
        this.secondGridMain.current.scrollTo({ scrollTop, scrollLeft });
        this.secondGridShadow.current.scrollTo({ scrollTop, scrollLeft });
    }
}

@alonrbar यह आकर्षक है! मैं इसे जल्द ही आजमाऊंगा।

ऐसा लगता है कि शैडो ग्रिड वास्तविक ग्रिड के ऊपर रहता है, हाँ? यदि हां, तो "असली ग्रिड" पर ईवेंट पर क्लिक करने से वे काम नहीं करेंगे? मुझे लगता है कि आप क्लिक इवेंट्स + x/y कोर्ड्स के साथ कुछ हैकी कर सकते हैं और किसी तरह इसे मुख्य ग्रिड पर लागू कर सकते हैं।

इसके अलावा @barbalex re: विंडोज़ में भी विफल रहता है

यह वास्तव में क्रोम फ्लैग हो सकता है। देखें कि क्या क्रोम में कुछ है

यह मुद्दा निश्चित रूप से ब्राउज़र एनीमेशन फ्रेम की तुलना में स्क्रॉलिंग को "सुचारू" होने से संबंधित प्रतीत होता है। यदि आप चिंतित हैं तो यह पूरी तरह से एक प्रदर्शन/अंतराल चीज है जो एक बहुत ही बुनियादी स्क्रॉल सिंक कार्यान्वयन करने का प्रयास करता है (जहां एक div के स्क्रॉल पर दूसरे की स्क्रॉल स्थिति सेट होती है) और देखें कि आपको एक ही समस्या मिलती है या नहीं। अपराधी के रूप में प्रतिक्रिया को खत्म करने के लिए शायद इसे शुद्ध वेनिला जेएस में भी करें

Ahhh @ranneyd आप सही कह रहे हैं यह क्लिक ईवेंट को रोकता है... उस पर कुछ और सोचने की ज़रूरत है...

मुझे लगता है कि क्रोम में थ्रेडेड स्क्रॉलिंग सुविधा

@alonrbar इसके बारे में क्या:

मुख्य ग्रिड में स्क्रॉल हैंडलर जोड़ें। इसमें आप वास्तविक स्क्रॉलिंग को रोकने के लिए e.preventDefault(); या कुछ करते हैं। फिर आप यह पता लगाने के लिए ईवेंट को देखते हैं कि यह कितना स्क्रॉल करेगा, जो यह अन्य सिंक किए गए सामान को स्थानांतरित करने के लिए करता है, लेकिन फिर आप उसी तत्व को मैन्युअल रूप से स्क्रॉल करने के लिए इसका उपयोग करते हैं। तो ए स्क्रॉल करने के बजाय, बी स्क्रॉल करने के लिए उस जानकारी का उपयोग करके, आप ए पर स्क्रॉल को रोकते हैं, इसे रद्द करते हैं, फिर बी और ए को स्क्रॉल करने के लिए इसका इस्तेमाल करते हैं। क्या इससे काम हो जायेगा?

मैं परीक्षण करने के लिए कंप्यूटर द्वारा नहीं हूं। बहुत हैकी लेकिन मैं काम कर सकता था। @bwaughn विचार?

@barbalex आप सही कह रहे हैं, यह मेरे लिए भी काम करता है लेकिन मेरे सभी उपयोगकर्ता क्रोम फ़्लैग को चालू और बंद नहीं कर सकते हैं

@ranneyd मैंने अभी इसमें देखा है और स्रोत कोड ( लिंक ) के साथ थोड़ा सा झुका हुआ है लेकिन स्पष्ट रूप से आप स्क्रॉल ईवेंट को

@alonrbar हाँ, उपयोगकर्ताओं को ऐसा करने के लिए कहने से काम नहीं चलेगा। यदि आप _do_ कोशिश करना चाहते हैं तो आप उन्हें एक सीधा लिंक दे सकते हैं: क्रोम: // झंडे / # अक्षम -थ्रेडेड-स्क्रॉलिंग

@alonrbar एह यह अच्छा नहीं है, लेकिन यह भयानक नहीं है अगर हम इसे ग्रिड पर लागू कर रहे हैं तो हम पहले से ही एक साथ हैकिंग करेंगे।

यह सिर्फ स्क्रॉल व्हील है ना? क्या तीर कुंजियाँ भी ऐसा करती हैं?

यह यहां स्वीकृत उत्तर से एक स्निपेट है: https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporally

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

जैसा कि आप देख सकते हैं कि ऐसी कई घटनाएं हैं जिन्हें आपको संभालने और ऐसा करने के संभावित परिणामों पर विचार करने की आवश्यकता है।

फिलहाल, चूंकि मैं अभी इसे हल करने की कोशिश में अधिक समय नहीं लगा सकता, इसलिए मैंने एक गैर-आभासी समाधान का उपयोग करने का फैसला किया (जो या तो सही नहीं है लेकिन मेरे उपयोग के मामलों के लिए बेहतर काम करता है)। आप मेरे द्वारा उपयोग किया जाने वाला कोड यहां और यहां पा सकते हैं (यह पुस्तकालय का हिस्सा है जिसे मैंने लिखा था जो react-window लपेटता है)।

@alonrbar हाँ, मैं मानता हूँ कि SO समाधान बहुत

हालाँकि, मुझे आपका समाधान बहुत दिलचस्प लगता है। मैं यह देखने जा रहा हूं कि क्या मैं इसमें अपनी खुद की दरार ले सकता हूं और इसे वर्चुअलाइज्ड टेबल के साथ काम कर सकता हूं।

@alonrbar इसलिए मैंने एक गैर-वर्चुअलाइज्ड कार्यान्वयन किया जो वास्तव में पूर्ण स्थिति का उपयोग करता है। केवल एक चीज जो स्क्रॉल करती है वह है बाहरी कंटेनर। स्क्रॉल करने पर यह शीर्ष/बाएं मानों को अपडेट करता है जिनका उपयोग आंतरिक तत्वों को पूर्ण-स्थिति में करने के लिए किया जाता है। तो नहीं scrollTo या scrollTop = ... , जो मैंने पाया कि मुझे बहुत दुख हो रहा था। उसके ऊपर, स्क्रॉल बार हमेशा ENTIRE ग्रिड के बाहर होते हैं।

मैंने जो चीज़ बनाई है वह गतिशील रूप से सभी तरफ "जमे हुए शीर्षलेख" हो सकती है। यह एक बहुत ही मोटा उदाहरण/पीओसी है।

जाहिर है इसमें वर्चुअलाइजेशन का अभाव है जो एक गंभीर समस्या है। दुर्भाग्य से मुझे नहीं पता कि क्या मैं इस पुस्तकालय से ग्रिड को लपेट सकता हूं, क्योंकि यह lib मूल रूप से स्क्रॉलिंग पर चलता है और यह इंटीरियर-ग्रिड स्क्रॉलिंग को समाप्त करता है। सुनिश्चित नहीं है कि अगला कदम क्या है।

https://codesandbox.io/embed/non-virtual-scroll-synced-table-ot467

मुझे लगता है कि वही वर्चुअलाइजेशन तर्क जो इस lib को ईंधन देता है उसे इस पर लागू किया जा सकता है।

@ranneyd बहुत अच्छा कार्यान्वयन!

मुझे गतिशील ग्रिड रचना पसंद है :)

लेकिन सबसे महत्वपूर्ण बात यह है कि स्क्रॉल करने के बजाय पूर्ण स्थिति का उपयोग करने का विचार इस समस्या को हल करने की कुंजी हो सकता है। एक और डिव पेश करके आपने वास्तविक सामग्री स्क्रॉलिंग से onscroll ईवेंट को डिस्कनेक्ट कर दिया है जो मुझे लगता है कि नई संभावनाएं खोलता है।

यदि आप react-window की render विधि से जुड़ सकते हैं तो आप अपने कार्यान्वयन के साथ 459 और आगे की पंक्तियों को बदलने में सक्षम हो सकते हैं। तब आप ऑनस्क्रॉल ईवेंट को हुक कर सकेंगे और आवश्यकता पड़ने पर इसके प्रभाव को अक्षम कर सकेंगे (स्क्रॉलबार अभी भी हमेशा हिलेंगे लेकिन आप इसे बदलने से रोकने के लिए सामग्री को नियंत्रित कर सकते हैं)।

@alonrbar इसलिए मैंने वास्तव में वर्चुअलाइजेशन एल्गोरिदम को फिर से कार्यान्वित किया। यह उतना अच्छा नहीं है, लेकिन स्रोत कोड को देखते हुए जब यह ग्रिड वास्तविक वर्चुअलाइजेशन पर पहुंच जाता है तो यह मूल रूप से वही एल्ग होता है। हालांकि, प्रदर्शन वास्तव में सभ्य है। मैं बिना किसी अंतराल के 200x200 ग्रिड और केवल थोड़े से 500x500 के साथ प्राप्त कर सकता हूं। अगर मेरे मालिक मुझे इस पर और काम करते हैं तो मैं आपके द्वारा सुझाए गए रेंडर विधि कार्यान्वयन को करने की कोशिश करूंगा, जो शायद वास्तव में बहुत आसान है।

यदि आप मेरे द्वारा बनाए गए ग्रिड में रुचि रखते हैं, तो मैं इसे कहीं पोस्ट कर सकता हूं। यदि आप इसे लेना चाहते हैं और इसे इस परिवाद के साथ जोड़ना चाहते हैं तो मेरे अतिथि बनें

@ranneyd हाँ, मैं आपके द्वारा बनाए गए वर्चुअलाइजेशन समाधान को देखना चाहूंगा। मुझे नहीं पता कि मैं इसका इस्तेमाल करूंगा लेकिन यह निश्चित रूप से दिलचस्प होगा :)

साथ ही, जैसा कि मैंने सुझाव दिया था, मैं रेंडर विधि में परिवर्तनों को लागू करने के लिए आज आपके कोड का उपयोग करने की कोशिश कर रहा था लेकिन आपके कोड को दोबारा पढ़ने के बाद मैंने देखा कि आपने वास्तव में स्क्रॉलिंग को डिस्कनेक्ट नहीं किया है जैसा मैंने सोचा था। मेरा मतलब यह है कि स्क्रॉलबार और onscroll ईवेंट अभी भी वास्तविक सामग्री स्क्रॉल से अविभाज्य हैं। मैंने आपके विचार को एक कदम आगे बढ़ाया और वास्तव में डिस्कनेक्ट किया गया स्क्रॉल लागू किया:

https://codesandbox.io/embed/absolute-position-scrolling-1u7vj

यदि आप कोड को देखेंगे तो आप देखेंगे कि यदि हम top और left गुणों को Content घटक से हटा देते हैं तो
मेरा मानना ​​​​है कि अब इस कार्यान्वयन का उपयोग onscroll घटना को अनदेखा करने और मैन्युअल रूप से एकाधिक ग्रिड सिंक करने के लिए करना संभव है। लेकिन इसके लिए निश्चित रूप से कुछ और काम करने की आवश्यकता है इसलिए इसे अगली बार इंतजार करना होगा ...

इस चर्चा ने मुझे उत्सुक कर दिया, इसलिए मैंने दो स्क्रॉल-सिंक किए गए प्रतिक्रिया-विंडो की तुलना करने के लिए एक प्रोजेक्ट सेट किया Grid s एक प्रतिक्रिया-वर्चुअलाइज्ड MultiGrid , ताकि मैं समझ सकूं कि कैसे perf तुलना करता है :
https://github.com/bvaughn/react-window-vs-react-virtualized-synced-grids

मैंने प्रत्येक उपयोग को यथासंभव समान बनाने की कोशिश की। कुछ प्रारंभिक अवलोकन:

• प्रतिक्रिया-विंडो डीईवी मोड में काफी धीमी दिखती है लेकिन उत्पादन निर्माण में थोड़ा तेज/अधिक प्रतिक्रियाशील महसूस करती है। (यहां मेरी ओर से पूर्वाग्रह से इंकार करना कठिन है। उत्पादन में अंतर छोटा है।)
• प्रतिक्रिया-विंडो भी बहुत कुछ करता है, क्योंकि स्क्रॉल ईवेंट पहले सक्रिय ग्रिड को अपडेट करता है, फिर निष्क्रिय ग्रिड को कैस्केडिंग अपडेट के माध्यम से अपडेट करता है। मैंने वर्तमान onScroll (जिसे प्रतिबद्धता के दौरान कहा जाता है) के बजाय "मूल" (प्रतिक्रिया) स्क्रॉल ईवेंट हैंडलर (रिएक्ट के बैच अपडेट के भीतर कॉल करने के लिए) को पारित करने में सहायता के लिए Grid लिए एक पैच बनाया। चरण)। जब मैंने इसे स्थानीय रूप से परीक्षण किया तो यह एक बहुत ही आशाजनक परिवर्तन की तरह लगता है, क्योंकि यह अलग कैस्केडिंग रेंडर से बचाता है, इसलिए शायद मैं डिफ़ॉल्ट onScroll समय बदल दूंगा।

@bvaughn मैंने divA -> onScroll -> setState -> ref.scrollTop के साथ सबसे बुनियादी, वेनिला स्क्रॉल इफेक्ट कोड बनाने की कोशिश की और यह अभी भी इस क्रोम थ्रेडेड-स्क्रॉलिंग चीज़ के आसपास नहीं पहुंच सका। मैंने स्वीकार्य रूप से प्रतिक्रिया स्थिति को बाधित नहीं किया और ऑनस्क्रॉल हैंडलर के भीतर ref.scrollTop सेट किया, लेकिन इसके अलावा मैं इसे करने का एक और बुनियादी तरीका नहीं सोच सकता। यदि आप कम से कम संभव चरणों में ऑनस्क्रॉल -> स्क्रॉलटॉप पर्याप्त तेज़ी से नहीं प्राप्त कर सकते हैं, तो आप इसे कैसे ठीक करते हैं? क्या मुझे पूरी तरह से कुछ याद आ रहा है? ऐसा लगता है कि स्क्रॉलिंग (या स्क्रॉलटॉप सेट करना) के आधार पर ग्रिड को स्थानांतरित करने की आवश्यकता नहीं है।

लक्ष्य हमेशा जावास्क्रिप्ट के लिए जितना संभव हो उतना तेज़ होना चाहिए ताकि यह थ्रेड प्रबंधन स्क्रॉलिंग के साथ बना रहे।

मैंने स्वीकार्य रूप से प्रतिक्रिया स्थिति को बाधित नहीं किया और ऑनस्क्रॉल हैंडलर के भीतर ref.scrollTop सेट किया

बस स्पष्ट होने के लिए, यह मेरा रेपो भी नहीं कर रहा है। मैं सक्रिय ग्रिड के रूप में उसी (प्रतिक्रिया-लिपटे) ईवेंट हैंडलर में निष्क्रिय ग्रिड में स्क्रॉल ऑफ़सेट सेट कर रहा हूं, इसलिए रिएक्ट अपने अपडेट को एक रेंडर + कमिट में बैच देता है। यह शायद ईमानदार होने के लिए बहुत अधिक अंतर नहीं बनाता है।

@ranneyd और @bvaughn आपके साथ अब तक की मेरी टिप्पणियों को साझा कर रहे हैं:

1. कई कार्यान्वयन डेस्कटॉप ब्राउज़र पर पर्याप्त रूप से काम करते हैं, लेकिन मेरा प्राथमिक उपयोग मामला वास्तव में मोबाइल उपकरणों पर है और वहां मुझे जबरदस्त प्रदर्शन अंतर दिखाई देता है।

2. दो साधारण गैर-वर्चुअल ग्रिडों को सिंक्रनाइज़ करना बहुत अच्छी तरह से काम करता है (100% सही नहीं बल्कि मोबाइल पर भी काफी करीब)। यह मेरा अनुभवहीन, अभी तक काम करने वाला, कार्यान्वयन और इसे कार्रवाई में देखने के लिए एक परीक्षण मामला है ( yarn storybook )।

3. "नियंत्रित" स्क्रॉल का उपयोग करना (जैसा कि मैंने इस टिप्पणी में सुझाव दिया https://github.com/alonrbar/react-window/commit/c39ce7006dbd590d9c640e37f8a1e78826e4688e

   फिर भी, मैं यह देखने के लिए ललचाता हूं कि क्या "नियंत्रित" रणनीति किसी एक आभासी सूची पर इस मुद्दे को हल करने के लिए काम कर सकती है।

4. मैं सोच रहा था, जैसा कि आप दोनों ने पहले ही सुझाव दिया था, कि शायद _callPropsCallbacks को _onScroll हैंडलर में सीधे स्थानांतरित करने से सिंक्रोनाइज़ेशन लैग को कम से कम करने में मदद मिल सकती है। संपादित करें - अभी कोशिश की है, वास्तव में मदद नहीं कर रहा है

5. किसी भी तरह से आप इसे एक अच्छा विचार संबोधित करते हैं आईएमएचओ वर्चुअलाइजेशन तर्क को शेष घटक (शायद एक हुक भी?) घटक सहारा। यह इस तर्क को निर्यात करना भी संभव बनाएगा और उपयोगकर्ताओं को उसी तर्क के आधार पर कस्टम घटकों (जैसे इस टिप्पणी में @ranneyd समाधान) को लागू करने की अनुमति देगा।

विचार?

@alonrbar मेरा समाधान, जो पूर्ण स्थिति करता है, इसलिए कोई भी ग्रिड स्क्रॉल करने वाले नहीं हैं, लगभग 300x300 तक बहुत अच्छी तरह से काम करता है जहां यह थोड़ा सुस्त हो जाता है (ध्यान दें कि यह 100% समय सिंक में रहता है, स्क्रॉलिंग बस थोड़ा सुस्त हो जाता है)। बड़े आकार में मुझे लगता है कि यह सिर्फ एक बड़े सरणी पर प्रसंस्करण/मानचित्रण कर रहा है। मुझे लगता है कि कई अनुकूलन हैं
हालांकि, मैं कर सकता हूं, और मैं पूरी तरह से आश्वस्त नहीं हूं कि स्क्रॉल सिंक के साथ इसका कोई लेना-देना नहीं है, जितना कि मेरे काफी सरल वर्चुअलाइजेशन कार्यान्वयन। उदाहरण के लिए, मैं अधिक कैशिंग कर सकता हूं, और मैं गणना कर सकता हूं कि रेंडर फ़ंक्शन को कॉल करने से बचने के लिए सेल को वर्चुअलाइज्ड किया जाना चाहिए या नहीं (और फिर शायद बेहतर कैश करें)।

मैंने मोबाइल पर कुछ भी परीक्षण नहीं किया है। मैं आपको कुछ कोड प्रदान करूंगा ताकि आप इसे थोड़ी देर में आजमा सकें।

मैं वास्तव में @bvaughn परीक्षण देखना चाहता हूं। वह कहते हैं कि सीधे देशी स्क्रॉल में हुक करना इसे ठीक करता है, आप कहते हैं कि ऐसा नहीं है। मैं खुद देखना चाहता हूं।

जहां तक ​​​​वर्चुअलाइजेशन लॉजिक को एक हुक या एक स्वतंत्र फ़ंक्शन में खींचने की बात है, यह बहुत मुश्किल हो जाता है क्योंकि लॉजिक आंतरिक रूप से दृश्य से जुड़ा होता है। ऐसा भी लगता है कि बहुत सारे प्रदर्शन ट्वीक में कैशिंग और मेमोइज़ेशन सामान शामिल होते हैं जिन्हें एक हुक या फ़ंक्शन में इनकैप्सुलेट करना मुश्किल हो सकता है, या कम से कम एक हद तक जहां इसे समान प्रदर्शन मिलता है। लेकिन मैं देखूंगा कि मेरे पास क्या है और देखता हूं कि मैं कितना तर्क निकाल सकता हूं।

पुनश्च:
एक चीज जिसके बारे में मैंने अभी सोचा था, जो शायद काम नहीं करेगी, वह है निंदा जैसी चीज + सीएसएस संक्रमण करना। यदि हम प्रत्येक 100 ms या किसी चीज़ में केवल एक स्क्रॉल ईवेंट निष्पादित करते हैं और आंदोलन को चेतन करते हैं तो यह बेहतर दिखाई दे सकता है। यह काफी हद तक कम प्रतिक्रियाशील भी लग सकता है। यह इस तरह है कि उन्होंने वर्ल्ड ऑफ Warcraft कैसे किया (यदि अंतराल या उच्च विलंबता है, तो वे एक सीधी रेखा में एक चरित्र को स्थानांतरित कर देंगे और फिर उन्हें यह जानकारी मिल जाएगी कि वे वास्तव में कहां गए थे)।

मैं वास्तव में @bvaughn परीक्षण देखना चाहता हूं। वह कहते हैं कि सीधे देशी स्क्रॉल में हुक करना इसे ठीक करता है, आप कहते हैं कि ऐसा नहीं है। मैं खुद देखना चाहता हूं।

मैंने यह नहीं कहा: मुस्कान: मैंने अभी कहा है कि यह एक अतिरिक्त अनावश्यक रेंडर और डीओएम उत्परिवर्तन से बचाता है। वास्तविक प्रदर्शन पर इसका कितना प्रभाव पड़ा है यह मेरे लिए स्पष्ट नहीं है। हालांकि, यह एक समग्र सकारात्मक बदलाव की तरह लगता है, भले ही।

@alonrbar @bvaughn मुझे वास्तव में अपने कोड का दस्तावेजीकरण करने की आवश्यकता है, लेकिन यहां नवीनतम संस्करण है:

https://github.com/ranneyd/synced-table

@alonrbar @bvaughn तो यहां एक मजेदार चीज है जिसे मैंने अभी खोजा है:

मेरा समाधान मैकबुक स्क्रीन पर क्रोम 75 में काम नहीं करता है। जब मेरे सहकर्मियों ने क्रोम को अपडेट नहीं किया, तो यह काम कर गया। यदि वे बाहरी मॉनिटर का उपयोग करते हैं तो यह काम करता है। उनके लैपटॉप स्क्रीन पर यह पिछड़ जाता है।
मैं

हम्म...बाहरी मॉनीटरों के साथ, ताज़ा दर या स्केलिंग के साथ कुछ अंतर हैं। जब आप कहते हैं कि यह "काम नहीं करता" तो आपका क्या मतलब है, विशेष रूप से?

मेरा बुरा। मेरा मतलब है कि स्क्रॉलिंग अब सिंक्रनाइज़ नहीं है। यदि आप मेरे रेपो को क्लोन करते हैं और इसे चलाते हैं, तो आप बाहरी मॉनिटर बनाम लैपटॉप स्क्रीन की तुलना कर सकते हैं। मॉनिटर पर वे पूरी तरह से सिंक में हैं। लैपटॉप स्क्रीन पर हेडर झिलमिलाहट (स्क्रॉलिंग तत्व के समान गति के रूप में अद्यतन न करें)।

मैंने वास्तव में हार मान ली है और मैं इसे position: sticky साथ आजमा रहा हूं। यह वास्तव में काम कर रहा है। ब्राउज़र समर्थन 100% नहीं है, लेकिन यह वास्तव में एक साल पहले की तुलना में बहुत बेहतर है।

यह एक गैर-पॉलीफ़िल पॉलीफ़िल है जो काम कर सकता है, लेकिन हमारे द्वारा लक्षित ब्राउज़र सुविधा का समर्थन करने के लिए होते हैं।
https://github.com/dollarshaveclub/stickybits

@alonrbar @bvaughn यहाँ नवीनतम संस्करण है। यह position: sticky का उपयोग करता है। मैं इसे रीडमी में थोड़ा समझाता हूं। कोड को अभी भी प्रलेखित करने की आवश्यकता है।

https://github.com/ranneyd/sticky-table

मेरा समाधान मैकबुक स्क्रीन पर क्रोम 75 में काम नहीं करता है। जब मेरे सहकर्मियों ने क्रोम को अपडेट नहीं किया, तो यह काम कर गया। यदि वे बाहरी मॉनिटर का उपयोग करते हैं तो यह काम करता है। उनके लैपटॉप स्क्रीन पर यह पिछड़ जाता है।
मैं

@ranneyd आज मेरे साथ ऐसा हुआ कि यह फ्रेम दर से संबंधित हो सकता है। बाहरी मॉनिटर के लिए फ्रेम दर 30 एफपीएस हो सकती है, इस मामले में मुझे लगता है कि ब्राउज़र कम "स्क्रॉल" ईवेंट भेज सकता है (क्योंकि मुझे लगता है कि अधिकांश ब्राउज़र केवल प्रति फ्रेम/पेंट भेजते हैं)। शायद यही कारण है कि बाहरी मॉनिटर पर आपके लिए अंतराल अधिक ध्यान देने योग्य है?

@bvaughn मुझे लगता है कि यह होना चाहिए। ओएस कहता है कि यह 60 हर्ट्ज भेज रहा है और मुझे लगता है कि मॉनिटर के चश्मे 60 हर्ट्ज कहते हैं, लेकिन अगर कोई झूठ बोल रहा है तो मुझे आश्चर्य नहीं होगा

@ranneyd मुझे यह कहते हुए खेद है कि मैं अभी बहुत उपलब्ध नहीं हूँ इसलिए मैं आपके समाधान पर उचित नज़र नहीं डाल सका, लेकिन एक छोटी नज़र से मैंने देखा कि मैंने देखा कि यह बहुत साफ दिखता है और आपने एक useVirtual हुक और तर्क को सुंदर ढंग से प्रतिपादन से अलग किया।
मुझे लगता है कि यह बहुत अच्छा होगा यदि आप किसी भी तरह से react-window लिए पुल अनुरोध बना सकते हैं, इसे वहां इस्तेमाल कर सकते हैं और शायद किसी प्रकार की renderTable विधि का पर्दाफाश कर सकते हैं जहां आप अपने रेंडर तर्क में प्लग कर सकते हैं। इस तरह आपकी लाइब्रेरी इसे बदलने के बजाय केवल प्रतिक्रिया-विंडो लपेट सकती है। मेरा मानना ​​​​है कि अगर हम इस दृष्टिकोण का लाभ उठा सकते हैं और react-window अंदर इस मुद्दे को हल कर सकते हैं तो इसे प्राथमिकता दी जाएगी जो पहले से ही काफी लड़ाई परीक्षण और व्यापक प्रसार है।

एक अन्य मामले में, मुझे लगता है कि यदि scrollTo प्रत्यक्ष डोम हेरफेर का उपयोग करेगा (शायद राज्य को स्थापित करने के अलावा लेकिन किसी भी मामले में ऐसा करने से पहले) तो दो तालिकाओं को समन्वयित करने का नतीजा आसान हो जाएगा। अगर मैं गलत नहीं हूँ @bvaughn भी इस दिशा में कुछ सुझाव दे रहा था।

@ranneyd आपका चिपचिपा-टेबल समाधान वास्तव में बहुत अच्छा लग रहा है और मुझे इसका उपयोग करने में सक्षम होने में बहुत खुशी होगी। क्या आप इसके लिए npm पर उपयोग करने योग्य एपीआई जारी करने पर विचार करेंगे?

@bvaughn @ranneyd

इसलिए, काफी समय बाद मैं हाल ही में इस मुद्दे पर वापस आया हूं। आपके दोनों पुस्तकालयों के साथ-साथ रिसाइकलरलिस्टव्यू और रिएक्ट-वर्चुअल-ग्रिड से कोड और विचारों का उपयोग करके मैं अंततः अपने इच्छित व्यवहार को प्राप्त करने में सक्षम था, जो कि निश्चित पंक्तियों और स्तंभों के साथ एक उच्च प्रदर्शन ग्रिड है जो डेस्कटॉप और मोबाइल दोनों पर अच्छी तरह से काम करता है। डिवाइस (बिना किसी खाली/सफेद सेल के आसानी से स्क्रॉल करना)।

इसका TLDR यह है कि मैं स्टिकी पोजिशनिंग के साथ रीसाइक्लिंग का उपयोग करता हूं और इस पद्धति में कोड का सबसे दिलचस्प टुकड़ा यहां पाया जा सकता है।

एक और समाधान लिखने की प्रेरणा पर क्रेडिट और अधिक यहाँ हैं । धन्यवाद!

अगर भविष्य में कोई और इस मुद्दे पर ठोकर खाता है तो मैं यहां अपने कामकाजी कोड सैंडबॉक्स उदाहरण के लिए एक लिंक छोड़ दूंगा।
https://codesandbox.io/s/y3pyp85zm1

बहुत अच्छा, जब तक आप पूरी तरह से दाईं ओर स्क्रॉल नहीं करते: तब हेडर सामग्री के साथ गलत संरेखित होते हैं (स्क्रॉल वर्टिकल स्क्रॉल बार की चौड़ाई के अनुसार)।
क्या आप किसी भी तरह से इसका समाधान ढूंढते?
धन्यवाद

अगर भविष्य में कोई और इस मुद्दे पर ठोकर खाता है तो मैं यहां अपने कामकाजी कोड सैंडबॉक्स उदाहरण के लिए एक लिंक छोड़ दूंगा।
https://codesandbox.io/s/y3pyp85zm1

बहुत अच्छा, जब तक आप पूरी तरह से दाईं ओर स्क्रॉल नहीं करते: तब हेडर सामग्री के साथ गलत संरेखित होते हैं (स्क्रॉल वर्टिकल स्क्रॉल बार की चौड़ाई के अनुसार)।
क्या आप किसी भी तरह से इसका समाधान ढूंढते?
धन्यवाद

पूर्ण प्रकटीकरण: मैंने वास्तव में खरोंच से अपना स्वयं का संस्करण बनाया है। इस परिवाद पर बहुत अधिक आधारित इसका अपना वर्चुअलाइजेशन है। मैंने ऐसा इसलिए किया क्योंकि मैकबुक पर और कुछ क्रोम फ़्लैग्स के साथ एक समस्या है जहाँ स्क्रॉलिंग के लिए एनीमेशन जेएस की तुलना में अलग-अलग समय के साथ होता है। स्क्रॉलसिंक का उपयोग करने के लिए बहुत अधिक पास-पास फ़ंक्शन कॉल की आवश्यकता होती है और यह बहुत धीमा था। मुझे मूल रूप से लाइब्रेरी को इसके मूल में चिपचिपा हेडर के साथ रीमेक करना पड़ा था (मैंने position: sticky उपयोग नहीं किया था जैसा कि मैंने पहले इस धागे में कहा था। मुझे अब जो कुछ भी है उसे अपलोड करने की आवश्यकता है)।

उस ने कहा, जिस तरह से मैं इस मुद्दे को हल करता हूं वह या तो स्क्रॉलबार को मजबूर करने के लिए overflow: scroll है और फिर उस पैडिंग को अंतिम सेल में जोड़ें, या मैं गतिशील रूप से निर्धारित करता हूं कि स्क्रॉलबार (और इसकी चौड़ाई क्या है) का उपयोग कर रेफरी और इसके अंदर एक अदृश्य div डालना, स्क्रॉल बार आकार को मापना, और डीओएम नोड को हटाना।

मैंने overflow-y: overlay किया है जो स्क्रॉलबार ओवरले बनाता है। दुर्भाग्य से यह केवल वेबकिट ब्राउज़र के लिए काम करता है।

ठीक है, जानकारी के लिए धन्यवाद। यह वास्तव में ऐसा लगता है कि चिपचिपा हेडर इतनी आम जरूरत है, कि प्रतिक्रिया-विंडो में चिपचिपा पहली पंक्ति विकल्प जोड़ने से यह कई और मामलों में प्रतिक्रिया-वर्चुअलाइज्ड का प्रतिस्थापन बन जाएगा। क्या आपको ऐसा नहीं लगता?

@ranneyd फिर से धन्यवाद, मैंने आपके दृष्टिकोण का पालन किया और स्क्रॉल सिंक ठीक काम करता है।

स्क्रॉलबार पर छिपा हुआ अतिप्रवाह ग्रिड के अंत के निकट गलत संरेखण का कारण बनता है:

इसे ठीक करने के लिए कोई सुझाव?

कोडसैंडबॉक्स उदाहरण

अग्रिम में धन्यवाद

पार्टी के लिए देर हो चुकी है, लेकिन यदि आप केवल एक पंक्ति को बाएं रेफ में जोड़ते हैं और इसके अतिप्रवाह को छुपाते हैं, तो आप मूल रूप से पीबी को हल करते हैं। (मैंने यह भी किया कि बाएं रेफ को सिंक न करना पड़े -> मुख्य ग्रिड

  const headerRef = React.useRef();
  const leftRef   = React.useRef();

  return <Box classes={{
            root:classes.tableContainer
          }}>
      <AutoSizer>
        {({ height, width }) => (<>
        {/*---------------- LA TABLE -------------*/}
          <Grid
            columnCount={1000}
            columnWidth={100}
            height={height}
            rowCount={1000}
            rowHeight={35}
            width={width}
            onScroll={({ scrollLeft, scrollTop }) => {
              if (leftRef.current) {
                leftRef.current.scrollTo({ scrollTop });
              }
              if (headerRef.current) {
                headerRef.current.scrollTo({ scrollLeft });
              }
            }}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.cell}}>
                Item {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>
          {/*---------------- HEADER -------------*/}
          <Grid
            ref={headerRef}
            outerElementType={React.forwardRef((props, ref) => (
              <div ref={ref}  {...props} style={{...props.style,position:"absolute",overflow:"hidden",top:0,right:0,left:150}} />
            ))}
            columnCount={1001}  /*columns count +1 for scroll problems*/
            columnWidth={100}
            height={60}
            rowCount={1}
            rowHeight={60}
            width={width}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.headerCell}}>
                Header {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>  
          {/*---------------- LEFT COL -------------*/}
          <Grid
            ref={leftRef}
            outerElementType={React.forwardRef((props, ref) => (
              <div ref={ref}  {...props} style={{...props.style,position:"absolute",overflow:"hidden",top:60,left:0}} />
            ))}
            columnCount={1}
            columnWidth={150}
            height={height}
            rowCount={251} /** add 1 for scroll problems at the end */
            rowHeight={140}
            width={150}
          >
            {({ columnIndex, rowIndex, style }) => (
              <Box style={style} classes={{root:classes.headerCell}}>
                Left {rowIndex},{columnIndex}
              </Box>
            )}
          </Grid>  
        </>)}
      </AutoSizer>
    </Box>