मुझे पता है कि एएनटीडी टेबल में पंक्तियों का विस्तार और पतन कैसे करें। मुझे पता है कि कैसे सभी का विस्तार करना है या सभी को संक्षिप्त करना है, जब तक कि वह बटन टेबल के बाहर ही है। मुझे नहीं पता कि उस कार्यक्षमता को तालिका के शीर्षलेख में कैसे रखा जाए। यानी वह हरा हाइलाइट कहां है, मैं चाहता हूं कि मेरा "सभी का विस्तार करें" बटन हो। मैं इसे निर्मित नहीं देखता, और मैं नहीं देखता कि उस कॉलम हेडर को कैसे संशोधित किया जाए।

Expand column header location

1
Oksana K 29 जिंदा 2021, 22:52

1 उत्तर

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

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

const MyCustomTable = ({expandable, columns, dataSource, ...rest}) => {
  const [expandedKeys, setExpandedKeys] = useState([]);

  const allAvailableKeys = dataSource.map(e => e.key)
  const processedColumns = [...columns]
  processedColumns.unshift({
    title: allAvailableKeys.every(e => expandedKeys.includes(e)) ? (
      <MinusSquareOutlined onClick={() => collapseAll()} />
    ) : (
      <PlusSquareOutlined onClick={() => expandAll()} />
    ),
    key: "expand",
    render: (_, record) => expandedKeys.includes(record.key) ? (
      <MinusSquareOutlined onClick={() => toggleExpandedKeys(record.key)} />
    ) : (
      <PlusSquareOutlined onClick={() => toggleExpandedKeys(record.key)}/>
    )
  });

  const toggleExpandedKeys = key => {
    setExpandedKeys(prev => {
      const outArr = [...prev];
      if (outArr.includes(key)) {
        return outArr.filter(e => e !== key);
      } else {
        outArr.push(key);
        return outArr;
      }
    })
  }

  const expandAll = () => {
    setExpandedKeys(allAvailableKeys)
  }

  const collapseAll = () => {
    setExpandedKeys([])
  }

  return (
    <Table
      columns={processedColumns}
      dataSource={dataSource}
      expandable={{
        ...expandable,
        expandedRowKeys: expandedKeys,
        expandIconColumnIndex: -1
      }}
      {...rest}
    />
  )
}

इसे क्रिया में देखें यहां

1
Scratch'N'Purr 2 फरवरी 2021, 16:51
शुक्रिया! मेरे साथ ऐसा नहीं हुआ कि मैं उनका कॉलम छिपा सकता हूं और उसके ऊपर अपना खुद का निर्माण कर सकता हूं। बस यही अवधारणा सब कुछ साफ कर देती है! बहुत सराहना की
 – 
Oksana K
2 फरवरी 2021, 17:29