React-window: HTML तालिका तत्व का उपयोग करना

को निर्मित 21 सित॰ 2018 · 34टिप्पणियाँ · स्रोत: bvaughn/react-window

क्या आपके पास तालिकाओं के साथ इसका उपयोग करने का एक उदाहरण है? मैं इसे काम करने की कोशिश कर रहा हूं, लेकिन मुझे इस बात का संदेह है कि यह या तो काम नहीं करता है, या कि मैं कुछ गलत कर रहा हूं।
मैंने "टेबल" और इनरटैग्ननेम को "tbody" में आउटरटेगनेम सेट किया है, लेकिन मुझे कोई स्क्रॉलिंग नहीं मिली।

यहाँ मेरा कोड है, निश्चित नहीं है कि यह मदद करता है (आइटम वस्तुओं की सूची है):

 <List
            outerRef={this._list}
            outerTagName="table"
            innerTagName="tbody"
            height={300}
            itemData={items}
            itemSize={() => 30}
            itemCount={items.length}
            itemKey={item => item.uniqueId}>
            {({index, style, data}) => {
              return (
                <tr style={style} key={index}>
                  <td>Item {index}</td>
                </tr>
              );
            }}
          </List>

💬 question

स्रोत

einarq

👍3

सबसे उपयोगी टिप्पणी

@pupudu मैं आपके खुले स्रोत के प्रयासों की सराहना करता हूं और अपने कोड के माध्यम से देखा है। मैं बस चाहता था कि सुपर सीधी बात दूसरे लोग खोज रहे थे: यह पुस्तकालय लेकिन तालिका तत्वों के साथ।

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

इसकी कमी :

प्रस्तुत करने के बाद पहली पंक्ति की "शीर्ष" शैली को कैप्चर करें
उस मूल्य को React.Context में स्टोर करें ताकि हम इसे पास कर सकें
मान को एक तालिका घटक पर लागू करें जो वह होगा जो पंक्तियों के बजाय स्वयं के चारों ओर स्थानांतरित हो जाता है
हेडर और फूटर जैसी चीजों के लिए अतिरिक्त स्लॉट जोड़ें।
लाइब्रेरी के एर्गोनॉमिक्स चीजों को बड़े करीने से पारित करने की अनुमति नहीं देते हैं, इसलिए React.Context क्रॉस घटक संचार को पार करने के लिए हीरो है।

वर्किंग कोड सैंडबॉक्स: https://codesandbox.io/s/react-window-with-table-elements-n8686o

संदर्भ के लिए कोड

import React from 'react'
import { useState, useRef, useContext } from 'react'
import { FixedSizeList, FixedSizeListProps } from 'react-window'
import { render } from 'react-dom'

/** Context for cross component communication */
const VirtualTableContext = React.createContext<{
  top: number
  setTop: (top: number) => void
  header: React.ReactNode
  footer: React.ReactNode
}>({
  top: 0,
  setTop: (value: number) => {},
  header: <></>,
  footer: <></>,
})

/** The virtual table. It basically accepts all of the same params as the original FixedSizeList.*/
function VirtualTable({
  row,
  header,
  footer,
  ...rest
}: {
  header?: React.ReactNode
  footer?: React.ReactNode
  row: FixedSizeListProps['children']
} & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
  const listRef = useRef<FixedSizeList | null>()
  const [top, setTop] = useState(0)

  return (
    <VirtualTableContext.Provider value={{ top, setTop, header, footer }}>
      <FixedSizeList
        {...rest}
        innerElementType={Inner}
        onItemsRendered={props => {
          const style =
            listRef.current &&
            // @ts-ignore private method access
            listRef.current._getItemStyle(props.overscanStartIndex)
          setTop((style && style.top) || 0)

          // Call the original callback
          rest.onItemsRendered && rest.onItemsRendered(props)
        }}
        ref={el => (listRef.current = el)}
      >
        {row}
      </FixedSizeList>
    </VirtualTableContext.Provider>
  )
}

/** The Row component. This should be a table row, and noted that we don't use the style that regular `react-window` examples pass in.*/
function Row({ index }: { index: number }) {
  return (
    <tr>
      {/** Make sure your table rows are the same height as what you passed into the list... */}
      <td style={{ height: '36px' }}>Row {index}</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  )
}

/**
 * The Inner component of the virtual list. This is the "Magic".
 * Capture what would have been the top elements position and apply it to the table.
 * Other than that, render an optional header and footer.
 **/
const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer, top } = useContext(VirtualTableContext)
    return (
      <div {...rest} ref={ref}>
        <table style={{ top, position: 'absolute', width: '100%' }}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

/**
 * Render Our Example
 **/
render(
  <VirtualTable
    height={300}
    width="100%"
    itemCount={1000}
    itemSize={36}
    header={
      <thead>
        <tr>
          <th>Index</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    }
    row={Row}
    footer={
      <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
        </tr>
      </tfoot>
    }
  />,
  document.querySelector('main')
)

jamesmfriedman 19 फ़र॰ 2020

👍24 ❤9 😕3

सभी 34 टिप्पणियाँ

मुझे नहीं लगता कि यह वास्तव में काम करेगा। मेरी जानकारी के लिए, HTMLTableElement वास्तव में उस तरह से अतिप्रवाह का समर्थन नहीं करता है जिस तरह से एक विंडोिंग घटक की आवश्यकता होगी। आप _could_ शैली को display: block बदलते हैं लेकिन मुझे अभी भी नहीं लगता कि यह काफी सही होगा। ( यहाँ एक उदाहरण है ।)

आपको टेबल की आवश्यकता क्यों है? मुझे लगता है कि आप इनलाइन ब्लॉक या फ्लेक्स लेआउट के साथ समान कॉलम लेआउट प्राप्त कर सकते हैं।

अतिरिक्त चीजों की जोड़ी:

आप एक आवश्यक पैरामीटर निर्दिष्ट नहीं कर रहे हैं width से List
आपको अपनी पंक्तियों में key जोड़ने की आवश्यकता नहीं है
itemSize 30 बजाय () => 30 (यह थोड़ा कम होगा)

bvaughn 21 सित॰ 2018

तुरंत जवाब के लिए धन्यवाद।
हम पहले ही इसे फिर से लिखने के लिए चर्चा कर चुके हैं, लेकिन चूंकि यह एक मौजूदा नहीं बल्कि बड़े घटक के लिए है, इसलिए हम उस पटकथा को शुरू करने से पहले सुनिश्चित करना चाहते थे। मैंने आरसी-टेबल के बारे में कुछ अन्य टिप्पणियां देखीं, इसलिए सोचा कि शायद यह काम करना है।
वैसे भी, फिर से लिखने का मन नहीं है, यह मेरे विचार के लायक होना चाहिए।

मुझे पंक्ति पर कुंजी के बिना कुंजी के बारे में प्रतिक्रिया चेतावनी मिली, जो मुझे भ्रमित करने पर विचार कर रहा था कि मैं एक आइटम सेट कर रहा हूं, इसलिए यह सुनिश्चित नहीं करें कि वहां क्या हो रहा है।

धन्यवाद

Einar

21 सितंबर 2018 को, 16:52 बजे, ब्रायन वॉन सूचनाएँ @ithub.com ने लिखा:
मुझे नहीं लगता कि यह वास्तव में काम करेगा। मेरी जानकारी के लिए, HTMLTableElement वास्तव में उस तरह से अतिप्रवाह का समर्थन नहीं करता है जिस तरह से एक विंडोिंग घटक की आवश्यकता होगी। आप शैली को प्रदर्शित करने के लिए बदल सकते हैं: ब्लॉक करें, लेकिन मुझे अभी भी नहीं लगता कि यह काफी सही होगा।
आपको टेबल की आवश्यकता क्यों है? मुझे लगता है कि आप इनलाइन ब्लॉक या फ्लेक्स लेआउट के साथ समान कॉलम लेआउट प्राप्त कर सकते हैं।
अतिरिक्त चीजों की जोड़ी:
आप सूची के लिए एक आवश्यक पैरामीटर चौड़ाई निर्दिष्ट नहीं कर रहे हैं
आपको अपनी पंक्तियों में कुंजी जोड़ने की आवश्यकता नहीं है
आइटमसाइज़ सिर्फ 30 के बजाय हो सकता है () => 30 (यह थोड़ा बेहतर प्रदर्शन करेगा)
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने थ्रेड अधिकृत किया है।
इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें, या थ्रेड को म्यूट करें।

einarq 21 सित॰ 2018

मुझे पंक्ति पर कुंजी के बिना कुंजी के बारे में प्रतिक्रिया चेतावनी मिली, जो मुझे भ्रमित करने पर विचार कर रहा था कि मैं एक आइटम सेट कर रहा हूं, इसलिए यह सुनिश्चित नहीं करें कि वहां क्या हो रहा है।

यह अपेक्षित नहीं है। क्या आप मेरे साथ (कोड सैंडबॉक्स के माध्यम से) रेप्रो केस शेयर कर सकते हैं?

bvaughn 21 सित॰ 2018

ऊह, क्षमा करें। मुझे यह जोड़ना चाहिए कि यह _only_ होगा यदि आपके itemKey फ़ंक्शन ने कुछ आइटमों के लिए undefined लौटा दिया है - जिस स्थिति में उस फ़ंक्शन को ठीक करने की आवश्यकता होगी।

bvaughn 21 सित॰ 2018

@bvaughn मैं अतिप्रवाह समर्थन एक सीमित कारक होने के बारे में कुछ खास नहीं पा रहा हूं। उत्सुकता से, मैं जानना चाहूंगा कि क्या हो सकता है। मुझे निश्चित रूप से लगता है कि दोनों के लिए मुख्य कार्यक्षमता का समर्थन करना थकाऊ हो सकता है, लेकिन यह केवल आधार सूची तत्व की तरह दिखता है जो कि इस समय कार्यान्वयनकर्ता की पसंद से बाहर है। खुद के लिए और किसी के लिए भी, जो निश्चित हेडर परिदृश्यों के साथ प्रतिक्रिया-विंडो का उपयोग कर रहे हैं, यह टेबल लेआउट में अंतर्निहित निहित सारणीबद्ध समर्थन हासिल करना अच्छा होगा। डिस्प्ले का उपयोग करना: टेबल "कुछ" देव ओवरहेड लेता है और आसपास के अनुप्रयोगों के लिए एक-बंद लेआउट है जो संभवतः तालिकाओं का उपयोग करके बनाया जा सकता है। मैं हमेशा सीएसएस के माध्यम से अतिप्रवाह या अन्य गुणों को मोड़ सकता हूं (मैं वैसे भी वर्तमान कार्यान्वयन में कर रहा हूं)। क्या एक एलिमेंट टाइप प्रश्न से बाहर है?

BlaineBradbury 15 जन॰ 2019

@bvaughn मैं अतिप्रवाह समर्थन एक सीमित कारक होने के बारे में कुछ खास नहीं पा रहा हूं।

हो सकता है कि मैंने सबसे अच्छा फोंटसिंग का उपयोग नहीं किया था - लेकिन यदि आप सैंडबॉक्स I से जुड़े (

यहाँ एक और उदाहरण है जो सिर्फ HTML है: lx65871p69

HTMLSelectElement ( <tbody> ) height और overflow जैसी शैलियों को अनदेखा करता है - इसे विंडोिंग के लिए बेकार बना देता है। आप इसका डिस्प्ले मोड ( display: block ) बदलकर इसे "ठीक" कर सकते हैं लेकिन यह HTMLTableElement का उपयोग करने के उद्देश्य को पराजित करता है क्योंकि यह कॉलम साइजिंग व्यवहार को तोड़ता है।

वह कॉलम साइज़िंग व्यवहार वैसे भी खिड़की के उपयोग के मामले के लिए शुरू करने के लिए टूट गया है, क्योंकि आकार कॉलम में सामग्री पर निर्भर है (जो कि एक उपयोगकर्ता के स्क्रॉल के रूप में बदल जाएगा)।

लेकिन यह केवल आधार सूची तत्व की तरह दिखता है, जो कि इस समय कार्यान्वयनकर्ता की पसंद से बाहर है ... क्या एक एलिमेंट टाइप प्रश्न से बाहर है?

आप पहले से ही टैग प्रकार निर्दिष्ट कर सकते हैं यदि आप वास्तव में चाहते हैं ( 2j0z718mwy ) हालांकि मैं यह नहीं देखता कि यह आपको क्या लाभ देता है।

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

ऊपर बताए गए कारणों से HTMLTableElement करना समस्याग्रस्त होगा। यदि आप एक निश्चित हेडर के साथ एक सारणीबद्ध / ग्रिड लेआउट चाहते हैं, तो आप इसे नियमित सूची घटकों में से एक का उपयोग करके पूरा कर सकते हैं: pk78pvwnkx

bvaughn 15 जन॰ 2019

👍5

आपको टेबल की आवश्यकता क्यों है? मुझे लगता है कि आप इनलाइन ब्लॉक या फ्लेक्स लेआउट के साथ समान कॉलम लेआउट प्राप्त कर सकते हैं।

शायद कुछ एक्सेसिबिलिटी के लिए टेबल संरचना की आवश्यकता होती है (जैसे, गैर-शब्दार्थ विभाग की तुलना में बेहतर स्क्रीन रीडिंग)? मैं यहाँ अनुमान लगा रहा हूँ।

इस मामले में, मैं सीएसएस प्रदर्शन शैली और किसी भी अन्य शैलियों को ओवरराइड करने के साथ जाऊंगा जो टेबल तत्वों में निहित हैं।

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

sompylasar 15 जन॰ 2019

शायद कुछ एक्सेसिबिलिटी के लिए टेबल संरचना की आवश्यकता होती है (जैसे, गैर-शब्दार्थ विभाग की तुलना में बेहतर स्क्रीन रीडिंग)? मैं यहाँ अनुमान लगा रहा हूँ।

इसके लिए आरिया भूमिकाओं का उपयोग किया जा सकता है

bvaughn 15 जन॰ 2019

👎2 👍2

सुपर पूरी तरह से, धन्यवाद। आपने मुझे एक प्रोटोटाइप बनाने का प्रयास करने के लिए खरगोश के छेद के नीचे जाने से बचाया, जो एक समस्या को केवल दूसरों को बनाने के लिए हल करेगा।

BlaineBradbury 16 जन॰ 2019

👍3 ❤1

नमस्ते
मैंने एक नया बनाने के बजाय एक मौजूदा धागा खोजने की कोशिश की। मुझे उम्मीद है कि मैं अच्छी जगह पर हूं ...

क्या FixedSizeGrid लिए दो कोशिकाओं को मिलाने के लिए "colspan" की तरह का एक तरीका है (शायद मेरे संदर्भ में अधिक समझ में आएगा)?
यह सवाल यहां शुरू हुई एक और चर्चा पर निर्भर करता

lipoolock 4 अप्रैल 2019

क्या फिक्स्डसाइजग्रिड के लिए दो कोशिकाओं को मर्ज करने के लिए "कोल्प्सन" की तरह का एक तरीका है (शायद मेरे संदर्भ में अधिक समझ में आएगा)?

नहीं। यह समर्थित नहीं है।

bvaughn 4 अप्रैल 2019

😕1

@einarq @BlaineBradbury @sompylasar यदि आप अभी भी रुचि रखते हैं, तो मैं टेबल टैग के साथ विंडोिंग कार्य प्राप्त करने में सफल रहा। वास्तव में, मैंने प्रतिक्रिया-खिड़की को लपेटकर एक पुस्तकालय बनाया। आप यहां एक लाइव डेमो देख सकते हैं: https://window-table.netlify.com/

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

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

धन्यवाद।

pupudu 5 मई 2019

👍7

यह @pupudu एक दिलचस्प दृष्टिकोण है। मुझे नहीं पता कि हेडर और पंक्तियों के लिए अलग <table> टैग होने के लिए कोई एक्सेसिबिलिटी की चिंता होगी या नहीं, लेकिन यह अन्यथा साफ है।

bvaughn 5 मई 2019

👍2 ❤1 🎉1

मैं उपयोग करने के लिए कोशिश कर रहा हूँ react-datasheet के साथ react-window , यह मूल रूप से काम करता है:

function sheetRenderer(props) {
  const Row = ({ index, style }) => (
    React.cloneElement(props.children[index], { style })
  );
  return (
    <table className={props.className}>
        <tbody>
          <FixedSizeList
              height={150}
              itemCount={1000}
              itemSize={35}
              width={300}
          >
            {Row}
          </FixedSizeList>
        </tbody>
    </table>
  )
}

export default function EntityTable(props: IEntityTableProps) {
  const initialGrid = useMemo(() => {
    return getTableGridFromCSV(props.entityListCSV);
  }, [props.entityListCSV]);
  const [modifiedGrid, updateModifiedGrid] = useImmer(initialGrid);
  return (
    <ReactDataSheet
      data={modifiedGrid}
      sheetRenderer={sheetRenderer}
      valueRenderer={cell => cell.value}
      onCellsChanged={changes => {
        updateModifiedGrid(draft => {
          changes.forEach(({ cell, row, col, value }) => {
            draft[row][col].value = value || '';
          });
        });
      }}
    />
  );
}

function getTableGridFromCSV(csv: string) {
  return csv.split('\n').map(row =>
    row.split(',').map((cell, index) => {
      if (index === 0) {
        return {
          value: cell,
          forceComponent: true,
          component: <button onClick={() => console.log(cell)}>{cell}</button>,
        };
      }
      if (index === 2) {
        return {
          value: cell,
        };
      }
      return {
        value: cell,
        component: <span>{cell}</span>,
      };
    }),
  );
}

यह प्रतिपादन करता है, एकमात्र समस्या Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. index.js:1437 Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.

linonetwo 25 जून 2019

अरे, मैं इसे रिएक्ट-टेबल के साथ आज़मा रहा हूं और ध्यान दे रहा हूं कि मुझे टेबल एलिमेंट्स के बजाय डिव का इस्तेमाल करना है। इसके साथ समस्या यह है कि सामग्री / बूटस्ट्रैप जैसी स्टाइलिंग लाइब्रेरी उन तत्वों पर निर्भर करती हैं। इसलिए तालिका तत्वों के बजाय मेरी तालिका स्कीमा को divs में बदलना बहुत अधिक काम है। क्या यह संभव है कि टेबल एलिमेंट्स को डिफरेंस करने के लिए इस्तेमाल करें या क्या मुझे अब अपना स्टाइल बनाना है?

simkessy 23 दिस॰ 2019

👍1

@simkessy जब तक आपने पहले ही गौर नहीं किया है, आपको विंडो-टेबल की जांच करनी चाहिए। यह html टेबल टैग का उपयोग करके हमें मौजूदा शैलियों का पुन: उपयोग करने की अनुमति देता है। स्वीकार करना होगा कि तालिका प्रतिक्रिया-तालिका के रूप में हालांकि उन्नत नहीं है।
https://window-table.netlify.com/

pupudu 23 दिस॰ 2019

इसकी कमी :

प्रस्तुत करने के बाद पहली पंक्ति की "शीर्ष" शैली को कैप्चर करें
उस मूल्य को React.Context में स्टोर करें ताकि हम इसे पास कर सकें
मान को एक तालिका घटक पर लागू करें जो वह होगा जो पंक्तियों के बजाय स्वयं के चारों ओर स्थानांतरित हो जाता है
हेडर और फूटर जैसी चीजों के लिए अतिरिक्त स्लॉट जोड़ें।
लाइब्रेरी के एर्गोनॉमिक्स चीजों को बड़े करीने से पारित करने की अनुमति नहीं देते हैं, इसलिए React.Context क्रॉस घटक संचार को पार करने के लिए हीरो है।

वर्किंग कोड सैंडबॉक्स: https://codesandbox.io/s/react-window-with-table-elements-n8686o

संदर्भ के लिए कोड

import React from 'react'
import { useState, useRef, useContext } from 'react'
import { FixedSizeList, FixedSizeListProps } from 'react-window'
import { render } from 'react-dom'

/** Context for cross component communication */
const VirtualTableContext = React.createContext<{
  top: number
  setTop: (top: number) => void
  header: React.ReactNode
  footer: React.ReactNode
}>({
  top: 0,
  setTop: (value: number) => {},
  header: <></>,
  footer: <></>,
})

/** The virtual table. It basically accepts all of the same params as the original FixedSizeList.*/
function VirtualTable({
  row,
  header,
  footer,
  ...rest
}: {
  header?: React.ReactNode
  footer?: React.ReactNode
  row: FixedSizeListProps['children']
} & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
  const listRef = useRef<FixedSizeList | null>()
  const [top, setTop] = useState(0)

  return (
    <VirtualTableContext.Provider value={{ top, setTop, header, footer }}>
      <FixedSizeList
        {...rest}
        innerElementType={Inner}
        onItemsRendered={props => {
          const style =
            listRef.current &&
            // @ts-ignore private method access
            listRef.current._getItemStyle(props.overscanStartIndex)
          setTop((style && style.top) || 0)

          // Call the original callback
          rest.onItemsRendered && rest.onItemsRendered(props)
        }}
        ref={el => (listRef.current = el)}
      >
        {row}
      </FixedSizeList>
    </VirtualTableContext.Provider>
  )
}

/** The Row component. This should be a table row, and noted that we don't use the style that regular `react-window` examples pass in.*/
function Row({ index }: { index: number }) {
  return (
    <tr>
      {/** Make sure your table rows are the same height as what you passed into the list... */}
      <td style={{ height: '36px' }}>Row {index}</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  )
}

/**
 * The Inner component of the virtual list. This is the "Magic".
 * Capture what would have been the top elements position and apply it to the table.
 * Other than that, render an optional header and footer.
 **/
const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer, top } = useContext(VirtualTableContext)
    return (
      <div {...rest} ref={ref}>
        <table style={{ top, position: 'absolute', width: '100%' }}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

/**
 * Render Our Example
 **/
render(
  <VirtualTable
    height={300}
    width="100%"
    itemCount={1000}
    itemSize={36}
    header={
      <thead>
        <tr>
          <th>Index</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    }
    row={Row}
    footer={
      <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
        </tr>
      </tfoot>
    }
  />,
  document.querySelector('main')
)

jamesmfriedman 19 फ़र॰ 2020

👍24 ❤9 😕3

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

अगर आपको कोई आपत्ति नहीं है तो मैं इन विचारों का उपयोग विंडो-टेबल में करने की कोशिश करूँगा। मुझे लगता है कि सबसे बड़ी चुनौती यह होगी कि सामग्री के आधार पर पंक्तियों को ऑटो-आकार कैसे दिया जाए (जो कम से कम विंडो-टेबल की सबसे बड़ी चुनौती थी)।

pupudu 20 फ़र॰ 2020

👍1

@jamesmfriedman जो बहुत ही होनहार लग रहा है। @bvaughn क्या आपको इस दृष्टिकोण के बारे में कोई चिंता है?

Meemaw 24 फ़र॰ 2020

👍1

@jamesmfriedman ऐसा लगता है कि हेडर सामग्री के साथ एक साथ स्क्रॉल करता है। क्या इसे चिपचिपा बनाना संभव है?

marink 15 मार्च 2020

यह वास्तव में संभव है, और इस कार्यान्वयन के लिए विशिष्ट नहीं है। बस HTML तालिका तत्वों के साथ चिपचिपा हेडर के आसपास कुछ googling करते हैं। मैं अस्पष्ट रूप से ऐसा करने का तरीका याद रखता हूं जो वास्तव में TH तत्व की स्थिति को चिपचिपा बनाता है।

jamesmfriedman 15 मार्च 2020

👍1

@jamesmfriedman आपके उदाहरण के लिए बहुत-बहुत धन्यवाद a @ इस तरह से यहाँ https://codesandbox.io/s/react-window-with-table-elements-jk70e आपको style={{ position: 'sticky', top: 0 }}> जोड़ने की आवश्यकता है th टैग

JCofman 17 मार्च 2020

👍3

@jamesmfriedman उदाहरण के लिए बहुत बहुत धन्यवाद। मैं इसे इस्तेमाल करने वाला हूँ। लेकिन मुझे लगता है कि शीर्ष का उपयोग करने के बजाय शीर्ष और

तो लाइन 79 <table style={{ top: 0, position: 'sticky', width: '100%' }}>

वह भी स्क्रॉल समस्या को ठीक करता है जो कि यदि आप नीचे की ओर स्क्रॉल करना जारी रखते हैं।

olafur164 16 जून 2020

👍1

HTML तालिकाओं का उपयोग करने का एक और अच्छा कारण IE11 का समर्थन है। मैं FixedSizeList का उपयोग कर रहा हूं और फिर इसे CSS-ग्रिड के साथ स्टाइल कर रहा हूं। हालाँकि जब आपको अन्य विशेषताओं जैसे कि उत्तरदायी कॉलम, विभिन्न आकारों वाले कॉलम आदि को जोड़ने की आवश्यकता होती है, और यह सभी IE11 के साथ मिलकर काम करते हैं, तो आप बड़े पैमाने पर कोड के साथ समाप्त होते हैं। जबकि HTML टेबल डिफ़ॉल्ट रूप से बिना किसी कोड के काम करता है।

christopher-francisco 2 जुल॰ 2020

IE11 आप अब और समर्थन किया जाना चाहिए कुछ नहीं है :)

ThiefMaster 2 जुल॰ 2020

👎4 👍3

हर एक FE डेवलपर IE11 में मृत्यु चाहता है। लेकिन दुर्भाग्य से, वहाँ कंपनियां / लोग इसके साथ फंस गए हैं, उन कारणों के कारण इस कदम को बनाने में असमर्थ हैं जिनकी हम कल्पना भी नहीं कर सकते हैं। उम्मीद है, यह समय में कुछ ही साल आगे है। इससे पहले, हमें IE11 का समर्थन करने की आवश्यकता होगी, चाहे हम इसे पसंद करें या नहीं।

यह मेरे लिए भी निगलने के लिए एक कठिन गोली थी।

pupudu 3 जुल॰ 2020

@ olafur164 तेजी से स्क्रॉल पर नहीं तोड़ने वाले चिपचिपा हेडर के लिए आपके फिक्स के लिए धन्यवाद। क्या आप जानते हैं कि "चिपचिपा" उपस्थिति को बनाए रखने का कोई तरीका है क्योंकि यह आसानी से विरोध करने के लिए एक समय में एक पंक्ति को स्क्रॉल करता है?

ptimson 21 जुल॰ 2020

मुझे अपना अनुभव रिएक्शन-वर्चुअलाइज्ड (यहां तक कि यह रिएक्शन-विंडो इश्यूज पेज है) और कुछ मटेरियल यूआई लाइब्रेरी मटेरियल-टेबल कहा जाता https://github.com/mbrn/ सामग्री-तालिका / मुद्दे / 891 # जारी करना -681986647 अभी भी कुछ समस्याएं हैं जैसे स्टाइल की समस्याएं और validateDOMNesting(...) चेतावनी।

mackankowski 27 अग॰ 2020

@jamesmfriedman आपके उदाहरण के लिए बहुत बहुत धन्यवाद a @ @ यहाँ चिपचिपा हेडर के लिए एक उदाहरण है। आपको style={{ position: 'sticky', top: 0 }}> को th टैग में जोड़ने की आवश्यकता है

अरे @JCofman , मैंने आपके CSS को ठीक करने की कोशिश की लेकिन यह मेरे लिए काम नहीं कर रहा है। यहाँ कोड सैंडबॉक्स उदाहरण है - https://codesandbox.io/s/react-window-with-table-elements-forked-huti6?file=/src/index.tsx : 514-542

दो मुद्दे हैं -

शीर्ष लेख जगह में शैलियों के बावजूद शीर्ष पर नहीं चिपके हुए हैं।
हेडर ऊपर की दिशा में जोर से स्क्रॉल करते हुए चमकता / टिमटिमा रहा है।
[पुन: पेश करने के लिए कदम - ५०% नीचे स्क्रॉल करें फिर तेजी से स्क्रॉल करें और हेडर आंदोलन का निरीक्षण करें]।

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

DevAKS-Yara 22 सित॰ 2020

👍1

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

अगर आपको कोई आपत्ति नहीं है तो मैं इन विचारों का उपयोग विंडो-टेबल में करने की कोशिश करूँगा। मुझे लगता है कि सबसे बड़ी चुनौती यह होगी कि सामग्री के आधार पर पंक्तियों को ऑटो-आकार कैसे दिया जाए (जो कम से कम विंडो-टेबल की सबसे बड़ी चुनौती थी)।

मैंने एक बहुत ही समान समाधान ढूंढना समाप्त कर दिया क्योंकि मैं पंक्तियों के लिए display: grid display: contents का उपयोग कर रहा हूं, इसलिए मूल रूप से table > tr तत्वों की कमी का पालन करता हूं।

आपने एक आंतरिक विधि को कॉल करने के लिए संदर्भ + रेफ्स का उपयोग किया, हालांकि, यह पूरी तरह से अनावश्यक है क्योंकि पहले बच्चे की शैली को देखने के द्वारा इसे पूरा किया जा सकता है।

const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer } = useContext(VirtualTableContext)
    const {style} = children[0].props;
    return (
      <div {...rest} ref={ref}>
        <table style={style}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

स्टाइल प्रोप को लाइब्रेरी द्वारा दिया जाता है जब यह प्रत्येक पंक्ति के लिए createElement करता है, और चूंकि आपके विशेष Row घटक style से tr असाइन नहीं करते हैं, तो आप नहीं हैं उन्हें भी नीचे पारित कर रहा है।

Rendez 18 फ़र॰ 2021

हाल ही में, मैं कुछ इस तरह के बारे में सोच रहा था। क्या होगा अगर हम सीएसएस कस्टम गुण ss के माध्यम से छद्म तत्वों (बाद में / पहले) का उपयोग करके गद्दी के साथ पूरे टेबल बॉडी को स्थानांतरित करेंगे

उदाहरण में अभिक्रिया-आभासी का उपयोग करके https://codesandbox.io/s/poc-react-virtual-table-jyz0m

piecyk 18 फ़र॰ 2021

मुझे पूरी तरह से एक तालिका की आवश्यकता थी ताकि मैं यूएक्स को प्राप्त कर सकूं जो मैं चाहता था और react-window साथ इसे बनाने के लिए वर्कआर्ड से संतुष्ट नहीं था।

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

अगर कोई ऐसा प्रयास करना चाहता है तो बस उसे वहीं फेंक देना चाहिए।

reyronald 18 फ़र॰ 2021

@piecyk यह एक महान है, बहुत ही https://virtuoso.dev/grouped-by-first-letter/

मुझे पूर्ण / शीर्ष के साथ पूरे कंटेनर को जोड़ने वाली स्थिति को बेहतर बनाना है, लेकिन क्रोम के साथ एक पूर्ण ऑडिट चलाने से मुझे सीएलएस की समस्याएं https://b6udg.csb.app/ (भले ही एक बड़े आकार का कंटेनर हो)। हालाँकि पैडिंग-टॉप / बॉटम के साथ कोई CLS नहीं है!

मैं स्वयं इसका प्रयास करूंगा और जल्द ही कुछ समय के अंतर को मापूंगा।

Rendez 19 फ़र॰ 2021

@pupudu मैं आपके खुले स्रोत के प्रयासों की सराहना करता हूं और अपने कोड के माध्यम से देखा है। मैं बस चाहता था कि सुपर सीधी बात दूसरे लोग खोज रहे थे: यह पुस्तकालय लेकिन तालिका तत्वों के साथ।
बाहर मुड़ता है मैं कोड के एक बहुत छोटे से, और बहुत रचनात्मकता के साथ इसे खींचने में सक्षम था। कोड इतना सरल है कि किसी को भी कॉपी / पेस्ट करने और अपनी पसंद को बढ़ाने में सक्षम होना चाहिए। @bvaughn कैसे पता लगाने के बाद, यदि आप चाहते हैं, तो पुस्तकालय में जोड़ना बहुत ही मामूली होगा, लेकिन यदि आप जानते हैं कि ओवरराइड करने के लिए भी बहुत मामूली है।
_ यह छोटा है:
प्रस्तुत करने के बाद पहली पंक्ति की "शीर्ष" शैली को कैप्चर करें
उस मूल्य को React.Context में स्टोर करें ताकि हम इसे पास कर सकें
मान को एक तालिका घटक पर लागू करें जो वह होगा जो पंक्तियों के बजाय स्वयं के चारों ओर स्थानांतरित हो जाता है
हेडर और फूटर जैसी चीजों के लिए अतिरिक्त स्लॉट जोड़ें।
लाइब्रेरी के एर्गोनॉमिक्स चीजों को बड़े करीने से पारित करने की अनुमति नहीं देते हैं, इसलिए React.Context क्रॉस घटक संचार को पार करने के लिए हीरो है।
वर्किंग कोड सैंडबॉक्स: https://codesandbox.io/s/react-window-with-table-elements-n8686o
संदर्भ के लिए कोड
import React from 'react'
import { useState, useRef, useContext } from 'react'
import { FixedSizeList, FixedSizeListProps } from 'react-window'
import { render } from 'react-dom'

/** Context for cross component communication */
const VirtualTableContext = React.createContext<{
  top: number
  setTop: (top: number) => void
  header: React.ReactNode
  footer: React.ReactNode
}>({
  top: 0,
  setTop: (value: number) => {},
  header: <></>,
  footer: <></>,
})

/** The virtual table. It basically accepts all of the same params as the original FixedSizeList.*/
function VirtualTable({
  row,
  header,
  footer,
  ...rest
}: {
  header?: React.ReactNode
  footer?: React.ReactNode
  row: FixedSizeListProps['children']
} & Omit<FixedSizeListProps, 'children' | 'innerElementType'>) {
  const listRef = useRef<FixedSizeList | null>()
  const [top, setTop] = useState(0)

  return (
    <VirtualTableContext.Provider value={{ top, setTop, header, footer }}>
      <FixedSizeList
        {...rest}
        innerElementType={Inner}
        onItemsRendered={props => {
          const style =
            listRef.current &&
            // @ts-ignore private method access
            listRef.current._getItemStyle(props.overscanStartIndex)
          setTop((style && style.top) || 0)

          // Call the original callback
          rest.onItemsRendered && rest.onItemsRendered(props)
        }}
        ref={el => (listRef.current = el)}
      >
        {row}
      </FixedSizeList>
    </VirtualTableContext.Provider>
  )
}

/** The Row component. This should be a table row, and noted that we don't use the style that regular `react-window` examples pass in.*/
function Row({ index }: { index: number }) {
  return (
    <tr>
      {/** Make sure your table rows are the same height as what you passed into the list... */}
      <td style={{ height: '36px' }}>Row {index}</td>
      <td>Col 2</td>
      <td>Col 3</td>
      <td>Col 4</td>
    </tr>
  )
}

/**
 * The Inner component of the virtual list. This is the "Magic".
 * Capture what would have been the top elements position and apply it to the table.
 * Other than that, render an optional header and footer.
 **/
const Inner = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
  function Inner({ children, ...rest }, ref) {
    const { header, footer, top } = useContext(VirtualTableContext)
    return (
      <div {...rest} ref={ref}>
        <table style={{ top, position: 'absolute', width: '100%' }}>
          {header}
          <tbody>{children}</tbody>
          {footer}
        </table>
      </div>
    )
  }
)

/**
 * Render Our Example
 **/
render(
  <VirtualTable
    height={300}
    width="100%"
    itemCount={1000}
    itemSize={36}
    header={
      <thead>
        <tr>
          <th>Index</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    }
    row={Row}
    footer={
      <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
        </tr>
      </tfoot>
    }
  />,
  document.querySelector('main')
)

इसके लिए धन्यवाद, क्या किसी ने (सफलता के साथ) InfiniteLoader घटक के साथ इसका उपयोग करने की कोशिश की है? ... मैंने इसे चारों ओर से लात मारने की कोशिश की है, लेकिन मैं आंतरिक "आवरण" के साथ समस्या कर रहा हूं, जो कि मैं मान लें क्योंकि अनंत लोडर अनपेक्षित रूप से इनर क्लेमेंटटाइप से गुजर रहा है।

josephbridgwaterrowe 23 फ़र॰ 2021

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React-window: HTML तालिका तत्व का उपयोग करना

सबसे उपयोगी टिप्पणी

सभी 34 टिप्पणियाँ

संबंधित मुद्दों