Ant-design: तालिका में एकत्रीकरण के आंकड़े दिखाने का कोई तरीका नहीं

नमस्कार @TangMonk , ऐसा लगता है कि आप बग की रिपोर्ट करने की तुलना में एक सुविधा का अनुरोध कर रहे हैं, मुझे डर है कि हमारे पास इस सुविधा को लागू करने की योजना नहीं है। आप टेबल के डिफॉल्ट पेजिनेशन को डिसेबल कर सकते हैं और अपने आप से पेजिंग को लागू कर सकते हैं।

शायद हम footer के लिए टेबल टो फिट करने के लिए कुछ कर सकते हैं?

@yesmeck , आपके उत्तर के लिए धन्यवाद, लेकिन इस बारे में बहुत सारे मुद्दे हैं, मुझे लगता है कि यह सुविधा वास्तव में उपयोगी और आवश्यक है।

संबंधित मुद्दे: # 3591, # 1483, # 4581

@ afc163 , धन्यवाद!

आपका सुझाव या समाधान क्या है?

मुझे यकीन नहीं है, मुझे लगता है कि यह pageSize का उपयोग करके तालिका डेटा आकार को सख्त नहीं कर सकता है, डेटा को क्लाइंट साइड के बजाय सर्वर साइड द्वारा संसाधित किया जाना चाहिए, इसलिए हम तालिका में जो भी अतिरिक्त डेटा जोड़ सकते हैं

नमस्ते,
क्या इस सुविधाओं पर कोई अपडेट है? या इसे करने का दूसरा तरीका?

@yesmeck पाद लेख तालिका के बाहर एक अतिरिक्त <div> संलग्न करने के बजाय तालिका के अंदर एक वास्तविक <tfoot> प्रदान करने के लिए सबसे सरल उपाय है।

फोल्क्स dataSource में एक अतिरिक्त पंक्ति को निचोड़ने की कोशिश कर रहे हैं क्योंकि वे चाहते हैं कि टेबल लेआउट उनके लिए कॉलम संरेखित करें।

हां, हमारे पास पहले से ही footer प्रोप है, <tfoot/> लिए एक उपयुक्त नाम का पता नहीं लगा सकते।

मैं वर्तमान footer प्रोप को पुन: लागू करने का सुझाव दे रहा हूं ताकि यह एक <tfoot /> तालिका के अंदर प्रस्तुत न हो, एक नया tfoot प्रोप न जोड़ें। ऐसा मत सोचो कि यह कुछ भी तोड़ देगा।

@yesmeck लगता है कि यह सुविधा अक्सर अनुरोध की जाती है। मैं सारांश पंक्ति जोड़ने के लिए भी संघर्ष कर रहा हूँ। चारों ओर एक काम मिल गया, लेकिन हैटी डोम हेरफेर शामिल है, एक सुंदर समाधान देखने के लिए खुश है।

पहले से ही इसका ख्याल रखने वाली टीम में कोई है? अगर नहीं तो शायद मैं इस पर गौर कर सकता था।

आप पीआर की कोशिश कर सकते हैं।

@yesmeck यहां आप जाएं: https://github.com/react-component/table/pull/191
प्रभाव के लिए उदाहरण / रेंडरफ़ुटर इनटेबल देखें

tfoot API के लिए कुछ समय सोचने के बाद, मैं इसे column प्रॉपर्टी में जोड़ना चाहूंगा:

const columns = [{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  footer: (data) => {
    return <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>
  },
}, {
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}];

renders

वर्तमान Table[footer] बीच अंतर करना अधिक स्पष्ट है।

अच्छा विचार। मैं मानता हूं कि नए एपीआई में निचोड़ने के लिए यह एक बेहतर जगह होगी।

@hackape आप एक नया पीआर का प्रस्ताव कर सकता है?

ज़रूर

https://codesandbox.io/s/m45r6o4nj8
एहसास हुआ, लेकिन स्क्रॉल बार लिंकेज के साथ एक समस्या है, यह देखने में अधिक सुविधाजनक है

@yesmeck प्रतिक्रिया-घटक / तालिका # 195 की स्थिति क्या है, अब कोई प्रतिक्रिया?

देखा यह विलय it @yesmeck

हालाँकि, मुझे एक अतिरिक्त सुविधा का अनुरोध मिला। मैं तालिका शीर्ष पर स्थित तथाकथित "पाद लेख" को प्रकट करने का प्रस्ताव करना चाहूंगा, तालिका शीर्ष लेख के ठीक नीचे।

उदाहरण:

पूरे समय चर्चा की जाने वाली वास्तविक अनुरोधित सुविधा एक ऐसा साधन है, जो एक शब्द "सारांश पंक्ति" को प्रदर्शित करने के लिए एक अतिरिक्त पंक्ति में निचोड़ने का मतलब है, dataSource की सामग्री से छेड़छाड़ किए बिना, "पाद लेख" नहीं। स्थिति की समझ।

@hackape आप कॉलम ग्रुपिंग का उपयोग कर सकते हैं, https://codesandbox.io/s/pmorq2x2lq देखें

हां, क्या यह पूरी तरह से पोजिशनिंग उद्देश्य के लिए था, यह एक व्यवहार्य मतलब होगा। लेकिन व्यवसायिक तर्क के लिहाज से, यह बेहतर है कि उपयोगकर्ता इसे मेरे प्रस्तावित एपीआई के माध्यम से करने दें।

सोचें कि हम column.footer API का नाम बदलकर column.summary ।

const columns = [{
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  summary: {
    render: (data) => {
      return <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>
    },
    position: 'bottom',  // default to 'bottom', could be 'top'
  }
}]

@yesmeck https://github.com/ant-design/ant-design/issues/6896 पर विचार

मैं pinnedTopData और pinnedBottomData नाम के दो नए समर्थक पेश करना चाहता हूँ।

const columns = [
  { title: 'Price', dataIndex: 'price' },
  { name: 'Name', dataIndex: 'name' },
];

const data = [
  { price: 3, Name: 'Foo' },
  { price: 5, Name: 'Bar' },
];

const pinnedData = [
  { price: <span style={{ fontWeight: 'bold' }}>Total: 8</span> }
];

<Table
  columns={columns}
  dataSource={data}
  pinnedTopData={pinnedData}
  pinnedBottomData={pinnedData}
/>

प्रस्तुत करता है:

| कीमत | नाम |
| ---------- | ------ |
| कुल: 8 | |
| 3 | फू |
| 5 | बार |
| कुल: 8 | |

# 6896 और इसी API के साथ इस समस्या को हल करना बेहतर है।

क्या नई प्रगति है?

@ नोकेसी अपने समाधान को दो तरीकों से देखता है। उसने इसे अस्थायी रूप से विशेषता में नहीं जोड़ा है। मुझे लगता है कि उसकी पुनः तालिका में यह विशेषता है। इसका आधार यह है कि संस्करण संख्या को नवीनतम में अपग्रेड किया गया है, लेकिन antd's पैकेज .json को भी संशोधित किया जाना चाहिए। दो विधियाँ,
1. यदि कई कॉलम नहीं हैं और कोई स्क्रॉल बार दिखाई नहीं देता है, तो इसे हल करना आसान है। मेरे पास ऊपर एक उदाहरण है।
2. आप प्रदर्शित करने के लिए कई शीर्षक पट्टियों का उपयोग कर सकते हैं, यह इतना सुंदर नहीं लगता है।

मैं इस फ़ंक्शन को बेहतर बनाने के लिए उनके लिए तत्पर हूं और ध्यान दे रहा हूं , लेकिन हमारी चिंता 2 है।

इस मुद्दे के लिए कोई अद्यतन ??

इससे पहले कि वे एक आधिकारिक एपीआई को जहाज कर सकें, अब मैं सुझाव देता हूं कि table.props.components.body.wrapper कस्टम घटक की आपूर्ति करें, और प्राप्त props.children छेड़छाड़ करें।

https://codesandbox.io/s/xpvwpx0npw
मैंने सीधे डोम तत्व में हेरफेर किया और कुल का एनकैप्सुलेट किया। आप इस विधि के अनुसार बहुत सारे पाद जोड़ सकते हैं, लेकिन अधिकारी डोम तत्व के सीधे हेरफेर की अनुशंसा नहीं करते हैं। यदि आपको इसकी तत्काल आवश्यकता है, तो आप इसका उल्लेख कर सकते हैं।

@ LDD123 स्क्रॉल एक्स केवल आपके उदाहरण में पाद लेख पर है। पाद के साथ शरीर को भी स्क्रॉल करना चाहिए

@jagratiTomar बॉडी स्क्रॉल करेगी जब फूटर स्क्रॉल हो रहा है, मैं बॉडी के स्क्रॉल-एक्स को फूटर के स्क्रॉल-एक्स के साथ बांधता हूं

@ LDD123 आप साझा कर सकते हैं और उदाहरण पैर को नहीं

@jagratiTomar अब, मैं स्क्रॉल-एक्स को स्क्रॉल नहीं कर रहा हूँ, यह ठीक रहेगा

@ LDD123 तो आप कह रहे हैं कि जब स्क्रॉल-वाई होता है तो यह उदाहरण

यीप

नमस्कार @yesmeck @ afc163 ,

हमारे डिजाइनरों ने शरीर के शीर्ष पर और UX प्रयोजनों के लिए हेडर के ठीक नीचे पाद लेख (इसमें एकत्रित मान) रखा है। शीर्ष लेख और पाद लेख पर छांटने के लिए तीर केवल एकीकृत मान है। छँटाई के लिए ColumnGroup तीरों के साथ नीचे की ओर जुड़ जाते हैं। स्टाइल के नजरिए से यह स्टाइल फुटर के लिए बहुत अधिक आसान है और इसे शीर्ष पर सेट करें क्योंकि पाद कंटेनर में अलग रंग होता है और केवल कुछ कोशिकाओं में सेपरेटर होता है।

मैं बस करूँगा:

.my-table tfoot > tr {
 background-color: gray;
}

तालिका घटक कुछ इस तरह से हो सकता है:

<Table appendColumnFooterTop={true}>
   <Column
      footer={(data) => <div>Summary: {data.reduce((sum, record) => sum + record.age, 0)}</div>}
   />
</Table>

डिज़ाइन:

उन पूर्व-किए गए पृष्ठ से उन कक्षों में अन-असाइन किए गए पाठ को बुरा न मानें, जिन्हें हमने नए कोडिंग में संरेखित करना है।

अगर मुझे पता था कि मैं इसे 2 या 3 सप्ताह में जारी कर सकता हूं (कॉलम पाद लेख और यह संरेखण है) तो मैं अपनी मदद दे सकता हूं। और मैं अन्य समाधान खोजने के लिए मजबूर हो जाऊंगा।

ओह और मैं समझ नहीं पा रहा था कि # 6896 कॉलम फुटर के बारे में है इसलिए मैंने यहां लिखा।

धन्यवाद।

@kaanozcan मैंने मार्च में वापस उसी विचार ( यहां देखें) को लागू करने वाला एक पीआर प्रस्तुत किया है, कोर टीम ने इसे विलय कर दिया, फिर यह वापस मिल गया। लगता है जैसे उन्हें समस्या से निपटने के तरीके पर अन्य विचार करना चाहिए। स्थिति को देखते हुए, मेरा सुझाव है कि आप "अन्य समाधान खोजें" पथ लें।

@kaanozcan यहाँ एक उदाहरण है जो कस्टम घटकों https://codesandbox.io/s/xjpkx9rzzw द्वारा आपके लक्ष्य को प्राप्त करता है

@yesmeck यह पूरी तरह से काम करता है। धन्यवाद।

मूल अनुरोध के कारण बंद होने से कस्टम घटकों को प्राप्त किया जा सकता है।

@yesmeck हमें इस उपयोग के मामले के बारे में कुछ डेमो प्रदान कर सकता है?

https://codesandbox.io/s/xjpkx9rzzw
इस उदाहरण का कोई व्यावहारिक अर्थ नहीं है। क्योंकि यदि डेटा में परिवर्तन होता है .. तो अंतिम राशि नवीनतम डेटा का उपयोग नहीं करती है। यह अंतिम रिफ्रेश का परिणाम है। ऐसा होना चाहिए जहां गंदा डेटा हो।

@yesmeck आपके द्वारा दिया गया उदाहरण उपयोग नहीं किया जा सकता ... क्योंकि डेटा को बदला नहीं जा सकता।
const data = [ { key: "1", name: "John Brown", age: 30, address: "New York No. 1 Lake Park", }, { key: "2", name: "Jim Green", age: 20, address: "London No. 1 Lake Park", }, { key: "3", name: "Joe Black", age: Math.random() * 20, address: "Sidney No. 1 Lake Park", }, ]; इस संशोधन के रूप में ... वास्तव में अंतिम योग सही नहीं है।

@yesmeck https://codesandbox.io/s/xjpkx9rzzw इस डेमो में समस्या है, जब आप तय के बाएं सेट करते हैं, तो आप देख सकते हैं कि शैली गड़बड़ है

मैं इसे घटक आवरण का उपयोग करने में कामयाब रहा, लेकिन यह अजीब है। कोड इस तरह दिखता है

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      localData: props.data,
    };

    this.tableRef = React.createRef();
  }

  handleTableUpdate = () => {
    this.setState({ localData: this.tableRef.current.getLocalData() });
  }

  render() {
    return (
      <Table
        ref={this.tableRef}
        columns={this.props.columns}
        dataSource={this.props.data}
        onChange={this.handleTableUpdate}
        components={{
          body: {
            wrapper: (props) => (
              <BodyWithSummary
                columns={this.props.columns}
                data={this.state.localData}
                {...props}
              />
            ),
          },
        }}
      />
    );
  }
}

function BodyWithSummary(props) {
  const { data, columns, ...otherProps } = props;
  return (
    <tbody {...otherProps}>
      <React.Fragment>
        {data && data.length > 0 && (
          <tr>
            {props.columns.map((col) => renderColumn(col, data))}
          </tr>
        )}
        {props.children}
      </React.Fragment>
    </tbody>
  );
}

कष्टप्रद बात यह है कि मुझे फ़िल्टर पंक्तियों पर समग्र डेटा की गणना करने के लिए getLocalData की आवश्यकता है।
बहुत अच्छा होगा यदि बॉडी रैपर को एक प्रोप के रूप में टेबल रेफरी प्राप्त होगा या उसके पास मौजूद डेटा तक पहुंचने का एक आसान तरीका होगा (प्रॉपर.चिल्ड्रेन प्रतिक्रिया नोड्स की एक सूची है, कुलियों की गणना करने के लिए बहुत उपयोगी नहीं है)

क्या हम footer प्रोप का उपयोग कर सकते हैं लेकिन अतिरिक्त div के बजाय तालिका में प्रस्तुत कर सकते हैं?

अस्थायी रूप से इस तरह संभाला:

      .ant-table-footer {
        padding: 0;
      }

                                    footer={(currentPageData)=>{
                                        return (
                                            <Row style={{marginRight:17}}>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>合计</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4} className="brd">
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                                <Col span={4}>
                                                    <Card bordered={false} className="bgfb" bodyStyle={{padding:'10px 15px'}}>123456789</Card>
                                                </Col>
                                            </Row>
                                        );
                                    }}

यह सही नहीं है।

जल्द ही आने वाले स्तंभों के पैर के आगे ओ (∩_ O) हे

@ybning क्या आपको फिक्स्ड कॉलम की समस्या है? इनमें से कई निश्चित स्तंभों में समस्याएं होंगी। ।

@yesmeck आपका उदाहरण आंतरिक तालिका गणना को तोड़ता है: https://codesandbox.io/s/rrpo02qwkk
पृष्ठ 2 पर नेविगेट करें फिर पृष्ठ 1 पर वापस जाएं, यह प्रत्येक नेविगेशन पर डेटा को डुप्लिकेट करता है।

इस मुद्दे के लिए कोई अद्यतन?

@linrf नहीं, मुझे आशा है कि कोई इस समस्या को हल कर सकता है

इस प्रकार सं।
https://codepen.io/chaegumi/pen/OaqxVd

क्या हम एकत्रीकरण आँकड़ों से निपटने के लिए total प्रॉप जोड़ सकते हैं?
total footer साथ अलग है,
स्तंभ डेटा से निपटने के लिए केवल एक फ़ंक्शन को स्वीकार करें, डिफ़ॉल्ट reduce

मैंने अंत में कुल को कॉलम में रखा

Atd की तालिका पाद लेख सामग्री का प्रतिपादन वास्तव में उपयोग करने के लिए आसान नहीं है, खासकर जब तालिका में ही निश्चित कॉलम होते हैं।

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

अवयव:

import React, { PureComponent } from 'react';
import { Table } from 'antd';
import styles from './index.less';

export default class ChartTable extends PureComponent {
  constructor(props) {
    super(props);

    this.refBox = React.createRef();
  }
  componentDidMount() {
    const tableList = Array.from(this.refBox.current.querySelectorAll('.ant-table-body'));
    this.tableList = tableList;
    tableList.forEach((table) => {
      table.addEventListener('scroll', this.handleTableScroll);
    });
  }
  componentWillUnmount() {
    this.tableList.forEach((table) => {
      table.removeEventListener('scroll', this.handleTableScroll);
    });
  }
  handleTableScroll = (e) => {
    const current = e.currentTarget;
    this.tableList.forEach((table) => {
      if (table !== current && table.scrollLeft !== current.scrollLeft) {
        table.scrollLeft = current.scrollLeft;
      }
    });
  }
  renderFooterTable = () => {
    const { columns, dataSource } = this.props;
    const dataList = [{
      department: '合计',
    }];
    return (
      <Table
        className={styles.footerTable}
        pagination={false}
        scroll={{ x: 'max-content' }}
        size="small"
        columns={columns}
        dataSource={dataList}
      />
    );
  }
  render() {
    return (
      <div ref={this.refBox}>
        <Table
          className={styles.mainTable}
          pagination={false}
          scroll={{ x: 'max-content', y: 350 }}
          size="small"
          columns={this.props.columns}
          dataSource={this.props.dataSource}
        />
        {this.renderFooterTable()}
      </div>
    );
  }
}

शैली कवरेज फ़ाइल:

mainTable {
  :global {
    .ant-table-body::-webkit-scrollbar {
      display: none;
    }
  }  
}
.footerTable {
  border-top: 1px solid #e8e8e8;

  :global {
    thead {
      display: none;
    }
  }
}

+1 पाद लेख में कॉलम एकत्रीकरण दिखाने का एक तरीका है।

यह घटक प्रोप का उपयोग करके लागू किया जा सकता है।

const __Table = (totalsRow = initTotals(), key='tableKey') => ({
    className,
    style,
    children
}) => (
    <table className={className} style={style} key={key}>
        {children}
        <tfoot>
            <tr>
                // add tfoot td here
            </tr>
        </tfoot>
    </table>
);

const TableWithTFoot = ({allData, columns}) =>
    <Table
        dataSource={allData.data}
        columns={columns}
        pagination={false}
        components={{ table: __Table(allData.totals) }}
    />

@rororofff ने इस मुद्दे पर $ 5.00 का वित्त पोषण किया है।

• इश्यू प्राप्त करने के लिए
• योगदान करना चाहते हैं? इश्यूहंट के माध्यम से इस मुद्दे पर
• अधिक फ़ंड किए गए समस्याओं को देखने के लिए जारी करें ।
• डेवलपर्स से मदद चाहिए? फंड जुटाने के लिए इश्यूंट पर अपनी रिपॉजिटरी जोड़ें ।

@piuccio आपकी सोच के अनुसार, मैं इसे टाइपस्क्रिप्ट के साथ लिखता हूं।

https://github.com/Arweil/antd-ext/blob/master/src/TableExt/TableExt.tsx

https://github.com/ant-design/ant-design/issues/5710#issuecomment -450855438

this.refBox = React.createRef();

मैं इस संस्करण पैकेज का उपयोग करता हूं, यह कोड विफल है।
"atd": "2.13.14", "प्रतिक्रिया": "15.4.0", "प्रतिक्रिया-डोम": "4.4.1"

त्रुटि संदेश
Uncaught TypeError: _react2.default.createRef is not a function at new EstimationReport (psReport.js?18c1:47) at eval (ReactCompositeComponent.js?063f:295) at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75) at

@carvendy react आयात करने पर संभवतः यह आपका मॉड्यूल- रिज़ॉल्यूशन सेटिंग है। बदलाव की कोशिश करो

import from 'react';

इस मामले में:

import * as react from 'react'

मैंने एक घटक बनाया,
पाद लेख रेंडर करने के लिए कॉलम मॉडल का उपयोग करें
हालाँकि, वर्तमान में स्क्रॉल बार समर्थित नहीं हैं।

import React from 'react';

class TableFooter extends React.Component {
  render() {
    const { dataSource, columns } = this.props;
    return (
      <table className="ant-table">
        <colgroup>
          {columns.map((colModel, index) => {
            return <col style={{
              width: colModel.width,
              minWidth: colModel.width
            }} key={index} />
          })}
        </colgroup>
        <tfoot >
          <tr >
            {columns.map((colum, idxCol) => {
              return <td style={{ padding: "0px 8px" }} className={colum.className} key={idxCol}>
                <strong>
                  {colum.footerContent ? colum.footerContent : (colum.footerSum ? dataSource.reduce((sum, record) => sum + parseFloat(record[colum.key]), 0) : "")}
                </strong>
              </td>
            })}
          </tr>
        </tfoot>
      </table>
    )
  }
}
export default TableFooter;

पेज कॉल

...
render() {
  const columns = [
      {
        key: 'productName'
        footerContent: 'SUM:',
      },
      {
        key: 'quantity',
        footerSum: true,
      }
    }
];
return (
  <Table
    columns={columns}
    dataSource={dataSource}
    footer={()=> {
        return (
           <TableFooter dataSource={dataSource} columns={columns} />
        )
       }
    }
  />
)
....

var data = this.getLocalData ();
var करंट;
var पेजसाइज़;
var राज्य = this.state; // यदि कोई पेजिंग नहीं है, तो सभी डिफ़ॉल्ट रूप से प्रदर्शित होते हैं

  if (!this.hasPagination()) {
    pageSize = Number.MAX_VALUE;
    current = 1;
  } else {
    pageSize = state.pagination.pageSize;
    current = this.getMaxCurrent(state.pagination.total || data.length);
  } // 分页
  // ---
  // 当数据量少于等于每页数量时，直接设置数据
  // 否则进行读取分页数据


  if (data.length > pageSize || pageSize === Number.MAX_VALUE) {
    data = data.filter(function (_, i) {
      return i >= (current - 1) * pageSize && i < current * pageSize;
    });
  }

  return data;
}

यह तालिका प्रसंस्करण डेटा का स्रोत कोड है। क्या आप सूची मानों की राशि की गणना करने के लिए यहां एक फ़ंक्शन जोड़ सकते हैं, आउटपुट करते समय कुल डेटा जोड़ सकते हैं, और पृष्ठ से जोड़े गए डेटा को घटा सकते हैं और @sorrycc को पेज कर सकते हैं।

2 साल बाद, यह समस्या अभी भी बाहर निकलती है।

2 साल बाद, यह समस्या अभी भी मौजूद है।

मैंने मूल रूप से गैर-पृष्ठांकित तालिका में पुनर्लेखन कॉल और रेंडरिंग डेटा के रेंडर को संशोधित करने की विधि का उपयोग किया:

लेकिन पृष्ठांकन के मामले में, एक से अधिक डेटा अपलोड की गई है, तो इसे मार डाला किया जाएगा। Https://github.com/ant-design/ant-design/blob/fee5e291632cce131611dd1a9e2ab89e02ee43a3/components/table/Table.tsx#L407

मैं पीआर करना चाहता हूं, लेकिन मुझे डर है कि मेरा एपीआई डिजाइन मेरे बॉस @ afc163 की आवश्यकताओं को पूरा नहीं करता है ...

2 साल बाद, यह समस्या अभी भी मौजूद है।

रास्ते में नई तालिका। नई तालिका के लिए आगे बढ़ रहा है

https://github.com/ant-design/ant-design/issues/16911#issuecomment -523323460

@ alexchen1875 ने इससे संबंधित किसी बात का उल्लेख नहीं किया।

@ alexchen1875 ने इससे संबंधित किसी बात का उल्लेख नहीं किया।

तालिका अनुभाग पर दिए गए निर्देशों को ध्यान से पढ़ें।

@ alexchen1875 कमाल!

मैं एक PR सबमिट करना चाहता हूं और अस्थायी रूप से https://github.com/ant-design/ant-design/blob/61e319b66826530a1882cca41862a15d57b120a/comports/table/tsable.tsx को स्किप करने के लिए एक सहारा जोड़ें "डेटा को क्रॉप डेटा की अनुमति न दें"। https://github.com/ant-design/ant-design/issues/5710#issuecomment -524164125 पेजिंग के मामले में भी उपलब्ध कराता है, मुझे नहीं पता कि क्या टीम स्वीकार करेगी ...

मैंने इस डेमो को संशोधित किया,
फिक्स्ड कॉलम , हेडर ग्रुपिंग , सेल मर्जिंग और स्क्रॉल के लिए अतिरिक्त समर्थन,
मैं प्रयोग किया जाता है \

Address नया डेमो पता

उपयोग:

const calcRow = [
    {
        colspan: 2,
        render: () => 'total'
    },
    {
        render: sum => sum('age')
    },
    {
        render: sum => sum('score')
    }
]

atd v4 ने टेबल summary का समर्थन किया था: https://github.com/ant-design/ant-design/issues/21656

https://ant.design/compenders/table/#compenders -table-Demo-सारांश

atd v4 ने टेबल summary : # 21656 का समर्थन किया था

https://ant.design/compenders/table/#compenders -table-Demo-सारांश

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

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