Ant-design: Tidak ada cara untuk menampilkan data statistik agregasi dalam tabel

Halo @TangMonk , sepertinya Anda meminta fitur daripada melaporkan bug,

Mungkin kita bisa melakukan sesuatu untuk membuat footer muat di meja?

@yesmeck , terima kasih atas balasan Anda, Tapi ada terlalu banyak masalah tentang ini, menurut saya fitur ini sangat berguna dan perlu.

masalah terkait: # 3591, # 1483, # 4581

@ afc163 , terima kasih!

Apa saran atau solusi Anda?

Saya tidak yakin, saya pikir itu tidak dapat membatasi ukuran data tabel secara ketat dengan menggunakan pageSize , data harus diproses oleh sisi server daripada sisi klien, Jadi kita dapat menambahkan data tambahan apa pun ke tabel

Hai,
Apakah ada pembaruan untuk fitur ini? Atau cara lain untuk melakukannya?

@yesmeck Solusi paling sederhana adalah membuat footer merender <tfoot> di dalam tabel, daripada menambahkan <div> ekstra di luar tabel.

Orang-orang mencoba memeras baris ekstra menjadi dataSource hanya karena mereka ingin tata letak tabel menyelaraskan kolom untuk mereka.

Ya, kami sudah memiliki footer prop, tidak dapat menemukan nama yang sesuai untuk <tfoot/> .

Saya menyarankan untuk mengimplementasikan kembali footer prop saat ini untuk membuatnya menjadi <tfoot /> di dalam tabel, bukan menambahkan tfoot prop baru. Jangan berpikir itu akan merusak apapun.

@yesmeck Sepertinya fitur ini sering diminta. Saya juga kesulitan menambahkan baris ringkasan. Punya solusi, tetapi melibatkan manipulasi hacky dom, senang melihat solusi yang lebih cantik.

Adakah orang di tim yang sudah mengurusnya? Jika tidak, mungkin saya bisa memeriksanya.

Anda dapat mencoba PR.

@yesmeck Ini dia: https://github.com/react-component/table/pull/191
Lihat contoh / renderFooterInTable untuk efek

Setelah berpikir beberapa saat untuk tfoot API, saya ingin menambahkannya ke properti 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',
}];

membuat

Lebih jelas untuk membuat perbedaan antara Table[footer] .

Ide bagus. Saya setuju ini akan menjadi tempat yang lebih baik untuk menggunakan API baru.

@hackape Bisakah Anda mengusulkan PR baru?

hal yang pasti

https://codesandbox.io/s/m45r6o4nj8
Disadari, tetapi ada masalah dengan tautan bilah gulir, lebih nyaman untuk dilihat

@yesmeck bagaimana keadaan react-component / table # 195 sekarang, ada umpan balik?

Lihat itu bergabung 👍 @yesmeck

Namun, saya mendapat permintaan fitur tambahan. Saya ingin mengusulkan agar apa yang disebut "footer" muncul di atas tabel, tepat di bawah header tabel.

Contoh:

Fitur sebenarnya yang diminta yang didiskusikan sepanjang waktu adalah cara untuk memasukkan baris tambahan untuk menampilkan info statistik — dengan kata lain "baris ringkasan", tanpa merusak konten dataSource , bukan "footer" di pengertian posisi.

@hackape Anda dapat menggunakan pengelompokan kolom, lihat https://codesandbox.io/s/pmorq2x2lq

Ya, jika itu semata-mata untuk tujuan pemosisian, ini akan menjadi cara yang layak. Namun dalam pengertian logika bisnis, lebih baik membiarkan pengguna melakukannya melalui API yang saya usulkan.

Pikirkan kita dapat mengganti nama column.footer API menjadi 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 Pertimbangkan https://github.com/ant-design/ant-design/issues/6896

Saya akan mengusulkan untuk memperkenalkan dua pro baru bernama pinnedTopData dan 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}
/>

Merender:

| Harga | Nama |
| ---------- | ------ |
| Jumlah: 8 | |
| 3 | Foo |
| 5 | Bar |
| Jumlah: 8 | |

Lebih baik menyelesaikan # 6896 dan masalah ini dengan API yang sama.

Apakah ada kemajuan baru?

@Nokecy melihat solusinya dalam dua cara. Dia belum menambahkannya ke atribut untuk sementara. Saya pikir tabel ulangnya memiliki atribut ini. Premisnya adalah bahwa nomor versi diupgrade ke yang terbaru, tetapi package.json antd harus dimodifikasi. Juga Dua metode,
1. Jika kolom tidak banyak dan tidak ada scroll bar yang muncul, maka mudah untuk mengatasinya, saya punya contoh di atas.
2. Anda dapat menggunakan beberapa bilah judul untuk ditampilkan, rasanya tidak begitu indah.

Saya menantikan mereka untuk meningkatkan fungsi ini dan telah memperhatikan, tetapi antd kami adalah 2. Meskipun diperbarui, saya tidak tahu apakah versi

Ada pembaruan untuk masalah ini ??

sebelum mereka dapat mengirimkan API resmi, untuk saat ini saya sarankan untuk menyediakan komponen khusus table.props.components.body.wrapper , dan merusak props.children yang diterimanya.

https://codesandbox.io/s/xpvwpx0npw
Saya langsung memanipulasi elemen dom dan mengenkapsulasi total. Anda dapat menambahkan banyak footer sesuai dengan metode ini, tetapi pejabat tidak merekomendasikan pengoperasian elemen dom secara langsung. Jika Anda sangat membutuhkannya, Anda dapat merujuk ke ini

@ LDD123 gulungan x hanya di footer dalam contoh Anda. tubuh juga harus menggulir dengan footer

@jagratiTomar tubuh akan menggulir ketika footer di-scroll, saya mengikat tubuh scroll-x dengan footer scroll-x

@ LDD123 bisa kalian share dan contoh di mana ada scroll-y juga di body, karena dalam hal itu hanya body saja yang harus scroll dan bukan footer

@jagratiTomar sekarang, saya menyembunyikan scroll-x bukan scroll, itu akan baik-baik saja

@ LDD123 jadi Anda mengatakan bahwa ketika ada scroll-y contoh ini akan bekerja dengan baik?

yeap

Halo @yeseck @ afc163 ,

Desainer kami meletakkan footer (memiliki nilai agregat) di atas badan dan tepat di bawah header untuk tujuan UX. Panah untuk pengurutan di header dan footer hanya memiliki nilai gabungan. Dengan panah ColumnGroup untuk pengurutan ditambahkan ke bawah. Dari perspektif penataan, jauh lebih mudah untuk menata footer dan mengaturnya di bagian atas karena wadah footer memiliki warna yang berbeda dan hanya beberapa sel yang memiliki pemisah.

Saya hanya akan melakukan:

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

Komponen Tabel dapat memiliki sesuatu seperti ini:

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

Rancangan:

Jangan pedulikan teks yang tidak selaras di dalam sel itu dari halaman yang telah dilakukan sebelumnya, mereka harus menyelaraskannya dengan yang baru yang kita kodekan.

Saya dapat menawarkan bantuan saya jika saya tahu itu bisa dirilis dalam 2 atau 3 minggu (footer kolom dan keselarasannya). Kalau tidak, saya akan dipaksa untuk mencari solusi lain.

Oh dan saya tidak mengerti jika # 6896 adalah tentang footer kolom jadi saya menulis di sini.

Terima kasih.

@kaanozcan Saya telah mengirimkan PR yang menerapkan ide yang sama (lihat di sini ) pada bulan Maret, tim inti menggabungkannya, lalu dikembalikan. Sepertinya mereka punya ide lain tentang bagaimana masalah itu harus ditangani. Mengingat situasinya, saya sarankan Anda mengambil jalan "temukan solusi lain".

@kaanozcan Berikut adalah contoh pencapaian tujuan Anda dengan komponen khusus https://codesandbox.io/s/xjpkx9rzzw

@yesmeck Itu bekerja dengan sempurna. Terima kasih.

Penutupan karena permintaan asli dapat dicapai dengan komponen khusus.

@yesmeck Bisakah kami memberikan demo tentang kasus penggunaan ini?

https://codesandbox.io/s/xjpkx9rzzw
Contoh ini tidak memiliki arti praktis. Karena jika data berubah .. Jumlah terakhir tidak menggunakan data terbaru. Ini adalah hasil dari penyegaran terakhir. Seharusnya di tempat yang ada data kotor.

@yesmeck Contoh yang Anda berikan tidak dapat digunakan ... karena datanya tidak dapat diubah.
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", }, ]; seperti modifikasi ini ... sebenarnya jumlah akhirnya salah.

@yesmeck https://codesandbox.io/s/xjpkx9rzzw Demo ini bermasalah, ketika Anda menyetel ke kiri tetap, Anda dapat melihat gaya berantakan。

Saya berhasil melakukannya menggunakan pembungkus komponen, tetapi agak canggung. Kode terlihat seperti ini

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>
  );
}

Hal yang menjengkelkan adalah saya perlu memanggil getLocalData jika saya ingin data agregat dihitung pada baris yang difilter.
Akan jauh lebih baik jika body wrapper menerima ref tabel sebagai prop atau memiliki cara yang lebih mudah untuk mengakses data yang akan dirender (props.children adalah daftar node yang bereaksi, tidak terlalu berguna untuk menghitung agregat)

Bisakah kita menggunakan footer prop tetapi merender dalam tabel alih-alih div tambahan?

Ditangani sementara seperti ini:

      .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>
                                        );
                                    }}

Itu tidak sempurna.

Menantikan kaki kolom segera keluar O (∩_∩) O

@ybning Apakah Anda memiliki masalah dengan kolom tetap? Banyak dari kolom tetap ini akan bermasalah. .

@yesmeck Contoh Anda merusak penghitungan tabel internal: https://codesandbox.io/s/rrpo02qwkq
Arahkan ke halaman 2 lalu kembali ke halaman 1, itu menggandakan data pada setiap navigasi.

Ada pembaruan untuk masalah ini?

@linrf tidak, saya harap seseorang dapat menyelesaikan masalah ini

Seperti ini.
https://codepen.io/chaegumi/pen/OaqxVd

Bisakah kita menambahkan total prop untuk menangani statistik agregasi?
total berbeda dengan footer ,
hanya menerima fungsi untuk menangani data kolom, defaultnya adalah reduce

Saya akhirnya memasukkan total ke dalam kolom

Rendering konten footer tabel antd sebenarnya tidak mudah digunakan, terutama ketika tabel itu sendiri memiliki kolom tetap.

Anda dapat mengubah cara mencapainya dengan dua tabel, satu untuk merender tabel asli dan yang lainnya untuk merender elemen footer bawah. Dengan cakupan gaya, sembunyikan alas footer tabel dan bilah gulir dari area gulir tabel asli. Terakhir, tambahkan kode JS untuk menyelaraskan posisi gulir horizontal dari dua tabel, dan itu hampir sama.

Komponen:

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>
    );
  }
}

File cakupan gaya:

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

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

+1 Ingin sekali memiliki cara untuk menampilkan agregasi kolom di footer.

Ini dapat diimplementasikan dengan menggunakan komponen prop.

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 telah mendanai $ 5.00 untuk masalah ini.

• Kirimkan permintaan penarikan melalui IssueHunt untuk menerima hadiah ini.
• Ingin berkontribusi? Masukkan masalah ini melalui
• Lihat IssueHunt Issue Explorer untuk melihat lebih banyak masalah yang didanai.
• Butuh bantuan dari pengembang? Tambahkan repositori Anda di IssueHunt untuk mengumpulkan dana.

@piuccio Menurut pemikiran Anda, saya menulisnya dengan naskah ketikan.

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();

Saya menggunakan paket versi ini, menjalankan kode ini gagal.
"antd": "2.13.14", "react": "15.4.0", "react-dom": "15.4.0"

pesan eror
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 Mungkin ini adalah pengaturan penyelesaian modul Anda saat mengimpor react . Coba ganti

import from 'react';

ke dalam ini:

import * as react from 'react'

Saya membuat komponen,
Gunakan model kolom untuk merender footer
Namun, bilah gulir saat ini tidak didukung.

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;

Panggilan halaman

...
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 saat ini;
var pageSize;
var state = this.state; // Jika tidak ada halaman, semua akan ditampilkan secara default

  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;
}

Ini adalah apakah kode sumber data pemrosesan tabel dapat menambahkan fungsi di sini untuk menghitung jumlah nilai daftar, menambahkan jumlah total data saat mengeluarkan, dan mengurangi data yang baru saja ditambahkan dari halaman dan pagesize @sorrycc

setelah 2 tahun, masalah ini masih ada.

setelah 2 tahun, masalah ini masih tetap ada.

Saya awalnya menggunakan metode memodifikasi render dari menulis ulang kolom dan menambahkan data dalam tabel non-halaman:

Namun dalam kasus penomoran halaman, jika beberapa data diunggah, itu akan dimatikan https://github.com/ant-design/ant-design/blob/fee5e291632cce131611dd1a9e2ab89e02ee43a3/components/table/Table.tsx#L407

Saya ingin menjadi PR, tetapi saya khawatir desain API saya tidak memenuhi persyaratan bos saya @ afc163 ...

setelah 2 tahun, masalah ini masih tetap ada.

tabel baru di jalan. Menantikan tabel baru

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

@ alexchen1875 Itu tidak menyebutkan apapun yang berhubungan dengan ini.

@ alexchen1875 Itu tidak menyebutkan apapun yang berhubungan dengan ini.

Baca instruksi di bagian tabel dengan hati-hati.

@ alexchen1875 mengagumkan!

Saya ingin mengirimkan PR dan untuk sementara menambahkan alat peraga "Izinkan data tidak memotong data" untuk mendukung lewati https://github.com/ant-design/ant-design/blob/61e319b66826530a1882c20a41862a15d57b120a/components/table/Table.tsx Logika filter https://github.com/ant-design/ant-design/issues/5710#issuecomment -524164125 juga tersedia dalam kasus paging, saya tidak tahu apakah tim akan menerima ...

Saya mengubah demo ini ,
menambahkan dukungan untuk kolom tetap , pengelompokan header , penggabungan sel dan gulir ,
Saya menggunakan \

👉 alamat demo baru

penggunaan:

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

antd v4 telah mendukung Tabel summary : https://github.com/ant-design/ant-design/issues/21656

https://ant.design/components/table/#components -table-demo-summary

antd v4 telah mendukung Tabel summary : # 21656

https://ant.design/components/table/#components -table-demo-summary

antd4 mendukung ringkasan, tetapi saya merasa ringkasan ini masih harus terus berulang.Meskipun cara penggunaannya saat ini gratis untuk menulis, tetapi pada saat yang sama dampaknya adalah kode terlalu rumit dan tidak sesuai dengan niat awal antd4 menjadi lebih dan lebih sederhana.

Skenario sederhana yang umum adalah meringkas data dari halaman saat ini. Pengalaman yang bersahabat adalah dengan langsung mengkonfigurasi summary: true di cloumn, sehingga kode akan rapi dan bersatu. Banyak skenario kompleks yang dapat menggunakan bilah ringkasan saat ini.