उपयोग के लिए दस्तावेज़ीकरण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
लेकिन यह पूरी तरह से नहीं बताता कि इसका उपयोग कैसे किया जाए।
तो कोई सॉर्ट टाइप फ़ंक्शन कैसे प्रदान करता है?
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})
}
मुझे यह पता लगाने में भी काफी परेशानी हुई। यहां बताया गया है कि मैंने इसे कैसे किया। यह टाइपस्क्रिप्ट में है, लेकिन अगर आपको इसे सादे जेएस में चाहिए, तो बस सभी टाइपिंग हटा दें। पहला, यहाँ' कस्टम प्रकार। यह स्ट्रिंग्स को सॉर्ट करेगा, और अंत में हमेशा नल/रिक्त/अपरिभाषित रखेगा।
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 बातें ध्यान देने योग्य हैं।
- जब रिटर्न को एक संख्या के रूप में परिभाषित किया गया था, तो मुझे यह पता नहीं चला कि टाइपस्क्रिप्ट को यह पसंद क्यों नहीं आया। मुझे किसी का उपयोग करने से नफरत है, लेकिन यह काम करता है।
- प्रतिक्रिया तालिका प्रलेखन इंगित करता है कि इसे याद किया जाना चाहिए। यह नहीं है, लेकिन यह अभी भी काम करता है।
आगे आपको इस फंक्शन को सॉर्टटाइप्स में जोड़ना होगा।
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]);
any के संबंध में। आपके पास गलत जगह पर टाइप है। यह परम के बाद होना चाहिए। जैसे const customStringSort = (rowA: Row, rowB: Row, columnId: string, desc: boolean):number => {
आपके दस्तावेज़ के उद्धरण के अनुसार, सॉर्टटाइप एक कॉलम विकल्प है।
निम्नलिखित विकल्प
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;
}
संबंधित सवाल
नए सवाल
react-table
रिएक्ट टेबल एक हल्का, तेज और विस्तार योग्य डेटाग्रिड है जिसे रिएक्ट के लिए बनाया गया है।
rowA.original[id]के बजायrowA.values[id]का उपयोग करेंगे। साथ ही,>के सामान्य शब्दार्थ-1के बजाय1वापस आ सकते हैं।sortTypeको अपने तुलना फ़ंक्शन के नाम के साथ आपूर्ति करें (जैसे,compareNumericString) जैसा कि मैंने यहां।