उपयोग के लिए दस्तावेज़ीकरणSortBy सॉर्टटाइप गुण कहते हैं:

sortType: String | Function(rowA: <Row>, rowB: <Row>, columnId: String, desc: Bool)

    Used to compare 2 rows of data and order them correctly.
    If a function is passed, it must be memoized. The sortType function should return -1 if rowA is larger, and 1 if rowB is larger. react-table will take care of the rest.
    String options: basic, datetime, alphanumeric. Defaults to alphanumeric.
    The resolved function from the this string/function will be used to sort the this column's data.
        If a string is passed, the function with that name located on either the custom sortTypes option or the built-in sorting types object will be used.
        If a function is passed, it will be used.
    For more information on sort types, see Sorting

लेकिन यह पूरी तरह से नहीं बताता कि इसका उपयोग कैसे किया जाए।

तो कोई सॉर्ट टाइप फ़ंक्शन कैसे प्रदान करता है?

6
Tom 16 सितंबर 2020, 23:40

3 जवाब

सबसे बढ़िया उत्तर

सॉर्ट टाइप फ़ंक्शन के लिए तर्क हैं: (पंक्ति ए, रो बी, कॉलम आईडी, डीएससी)

columnId यह पहचानता है कि पंक्ति को किस कॉलम द्वारा क्रमबद्ध किया जा रहा है, और इसलिए सेल मान प्राप्त करने की अनुमति देता है।

desc सॉर्ट की दिशा की पहचान करता है। भले ही desc की आपूर्ति की गई हो, सॉर्ट फ़ंक्शन को वापसी मानों को उलटना नहीं होना चाहिए। प्रतिक्रिया तालिका स्वचालित रूप से ऐसा करती है।

उदाहरण के लिए:

sortType: React.useMemo((rowA, rowB, id, desc) => {
       if (rowA.original[id] > rowB.original[id]) return -1; 
       if (rowB.original[id] > rowA.original[id]) return 1;
        return 0;
})

सॉर्ट टाइप का उपयोग करने का उदाहरण:

const columns = [{       
        Header: ...
        accessor: ...
        sortType: /*sortType func goes here... */        
}, ...]

function MyTable(columns, data)
{
 const { /*...*/ } = useTable({columns,data})
}
13
Tom 5 फरवरी 2021, 01:44
इसके लिए धन्यवाद, लेकिन मुझे यकीन नहीं है कि आप प्रतिक्रिया-तालिका दस्तावेज़ों से उस उत्तर पर कैसे आ सकते हैं ... आप कैसे जानते हैं कि पंक्तियों में प्रकार की वस्तु की संपत्ति होगी जिसे आप आईडी संपत्ति से एक्सेस कर सकते हैं? मुझे त्रुटि भी मिल रही है "रिएक्ट हुक" React.useMemo "को क्लास कंपोनेंट में नहीं कहा जा सकता है" क्योंकि मैं अपने कॉलम को क्लास कंपोनेंट में बना रहा हूं, फिर उन्हें प्रेजेंटेशनल कंपोनेंट में पास कर रहा हूं जो मेरी टेबल बनाता है। क्या इसका कोई उपाय है?
 – 
rook218
19 पद 2020, 03:10
1
react-table.tanstack.com/docs/api/useSortBy आपको यह करना होगा इस फ़ंक्शन को कॉलम में पास करें। मैं अभी भी इसे स्वयं करने के तरीके पर काम कर रहा हूं, लेकिन जब मैं कुछ लेकर आऊंगा तो पोस्ट करूंगा। आप एक प्रतिक्रिया वर्ग घटक में हुक का उपयोग नहीं कर सकते। मैं कार्यात्मक घटकों में प्रतिक्रिया-तालिका से संबंधित सब कुछ डालूंगा। सभी दस्तावेज उन्हें एक ही फाइल में रखते हैं लेकिन मैं कुछ अलग करने की भी कोशिश कर रहा हूं।
 – 
Eman4real
4 फरवरी 2021, 20:55
@ टॉम, ऊपर आपके सॉर्ट फ़ंक्शन में मुझे संदेह है कि अधिकांश लोग rowA.original[id] के बजाय rowA.values[id] का उपयोग करेंगे। साथ ही, > के सामान्य शब्दार्थ -1 के बजाय 1 वापस आ सकते हैं।
 – 
Ken Lin
28 अगस्त 2021, 18:12
@ Eman4real, आपके फ़ंक्शन को इनलाइन करने की कोई आवश्यकता नहीं है। बस sortType को अपने तुलना फ़ंक्शन के नाम के साथ आपूर्ति करें (जैसे, compareNumericString) जैसा कि मैंने यहां
 – 
Ken Lin
28 अगस्त 2021, 18:20

मुझे यह पता लगाने में भी काफी परेशानी हुई। यहां बताया गया है कि मैंने इसे कैसे किया। यह टाइपस्क्रिप्ट में है, लेकिन अगर आपको इसे सादे जेएस में चाहिए, तो बस सभी टाइपिंग हटा दें। पहला, यहाँ' कस्टम प्रकार। यह स्ट्रिंग्स को सॉर्ट करेगा, और अंत में हमेशा नल/रिक्त/अपरिभाषित रखेगा।

const customStringSort: any = (rowA: Row, rowB: Row, columnId: string, desc: boolean) => {
  const defaultVal = desc ? 'AAAAAAAAAAAA' : 'ZZZZZZZZ';
  return (rowA.values[columnId] ?? defaultVal)
    .localeCompare(rowB.values[columnId] ?? defaultVal);
};

इसके बारे में 2 बातें ध्यान देने योग्य हैं।

  1. जब रिटर्न को एक संख्या के रूप में परिभाषित किया गया था, तो मुझे यह पता नहीं चला कि टाइपस्क्रिप्ट को यह पसंद क्यों नहीं आया। मुझे किसी का उपयोग करने से नफरत है, लेकिन यह काम करता है।
  2. प्रतिक्रिया तालिका प्रलेखन इंगित करता है कि इसे याद किया जाना चाहिए। यह नहीं है, लेकिन यह अभी भी काम करता है।

आगे आपको इस फंक्शन को सॉर्टटाइप्स में जोड़ना होगा।

const sortTypes: Record<string, SortByFn<SomeObject>> = {
  customStringSort: customStringSort,
};

इसके बाद, सॉर्टटाइप्स को यूजटेबल इंस्टेंस में जोड़ें।

const {
  getTableProps,
  getTableBodyProps
  headerGroups,
  rows,
  prepareRow,
  } = useTable(
    {
      columns,
      data,
      sortTypes
    },
  useSortBy
);

अब आप कस्टम फ़ंक्शन को अपनी कॉलम परिभाषाओं में जोड़ सकते हैं।

const columns: Column<SomeObject>[] = React.useMemo(() => 
  [
    { accessor: 'someColumnID', Header: 'Some Column', sortType:'customStringSort' },
  ],
  [],
);

उम्मीद है ये मदद करेगा!

--संपादित करें: यदि आप फ़ंक्शन को याद रखना चाहते हैं, तो यह काम करता है। जहां उपयुक्त हो, customStringSortMemo को customStringSortMemo से बदलें।

const customStringSort: any = React.useCallback((rowA: Row, rowB: Row, columnId: string, desc: boolean) => 
  {
  const defaultVal = desc ? 'AAAAAAAAAAAA' : 'ZZZZZZZZ';
  return (rowA.values[columnId] ?? defaultVal).localeCompare(rowB.values[columnId] ?? defaultVal);
  },
[]);
    
const customStringSortMemo = React.useMemo(() => customStringSort[customStringSort]);
2
RoofusEat 10 जून 2021, 17:56
1
टीएस और any के संबंध में। आपके पास गलत जगह पर टाइप है। यह परम के बाद होना चाहिए। जैसे const customStringSort = (rowA: Row, rowB: Row, columnId: string, desc: boolean):number => {
 – 
Kildareflare
30 जुलाई 2021, 04:01

आपके दस्तावेज़ के उद्धरण के अनुसार, सॉर्टटाइप एक कॉलम विकल्प है।

निम्नलिखित विकल्प useTable() में columns विकल्पों को पास किए गए किसी भी Column ऑब्जेक्ट पर समर्थित हैं।

उदाहरण के लिए, क्विक स्टार्ट के डिफाइन कॉलम को संशोधित करें, जैसे :

const columns = React.useMemo(
  () => [
    {
      Header: 'Column 1',
      accessor: 'col1', // accessor is the "key" in the data
    },
    {
      Header: 'Column 2',
      accessor: 'col2',
      sortType: compareNumericString // custom function
    },
  ],
  []
)

function compareNumericString(rowA, rowB, id, desc) {
    let a = Number.parseFloat(rowA.values[id]);
    let b = Number.parseFloat(rowB.values[id]);
    if (Number.isNaN(a)) {  // Blanks and non-numeric strings to bottom
        a = desc ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
    }
    if (Number.isNaN(b)) {
        b = desc ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
    }
    if (a > b) return 1; 
    if (a < b) return -1;
    return 0;
}
1
Ken Lin 28 अगस्त 2021, 18:03
यह वैज्ञानिक-स्वरूपित संख्याओं की एक पंक्ति को छाँटने के लिए बहुत अच्छा है (रेंडरर के पास स्ट्रिंग्स के रूप में वापस आएँ)। इस तरह हमें परवाह नहीं है कि वे तार के रूप में सूचीबद्ध हैं या नहीं।
 – 
superk
15 अक्टूबर 2021, 15:28