Ant-design: テーブルに集計統計データを表示する方法はありません

こんにちは@TangMonk 、バグを報告するよりも機能をリクエストしているようです。この機能を実装する予定はないのではないかと思います。 テーブルのデフォルトのページ付けを無効にして、自分でページ付けを実装できます。

たぶん、 footerテーブルの本体に合わせるために何かできるでしょうか？

@yesmeck 、お返事ありがとう

関連する問題：＃3591、＃1483、＃4581

@ afc163 、ありがとう！

あなたの提案や解決策は何ですか？

よくわかりませんが、 pageSizeを使用してテーブルのデータサイズを厳密に制限することはできないと思います。データはクライアント側ではなくサーバー側で処理する必要があるため、テーブルにデータを追加できます。

こんにちは、
この機能に関する更新はありますか？ またはそれを行う別の方法？

@yesmeck最も簡単な解決策は、テーブルの外側に追加の<div>を追加する代わりに、フッターにテーブルの内側に実際の<tfoot>レンダリングさせることです。

人々は、テーブルレイアウトで列を揃えたいという理由だけで、余分な行をdataSource詰め込もうとしています。

はい、すでにfooter小道具があり、 <tfoot/>適切な名前を見つけることができません。

新しいtfootプロップを追加するのではなく、現在のfooterプロップを再実装して、テーブル内に<tfoot />レンダリングすることを提案しています。 それが何かを壊すとは思わないでください。

@yesmeckこの機能は頻繁にリクエストされているようです。 要約行を追加するのにも苦労しています。 回避策はありますが、ハッキーなdom操作が含まれ、よりきれいなソリューションが表示されます。

チームの誰かがすでにそれを世話していますか？ 多分ないなら私はそれを調べることができます。

PRをお試しいただけます。

@yesmeckどうぞ： https ：
効果については、example / renderFooterInTableを参照してください

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',
}];

レンダリング

現在のTable[footer]との違いを明確にすることはより明確です。

良いアイデア。 これが新しいAPIを詰め込むのに適した場所になることに同意します。

@hackape新しいPRを提案して

確実なこと

https://codesandbox.io/s/m45r6o4nj8
達成しましたが、スクロールバーのリンケージに問題があり、見た方が便利です

@yesmeck今のreact-component / table＃195の状態はどうですか、フィードバックはありますか？

合併したのを見た👍 @ yesmeck

しかし、追加の機能リクエストがありました。 いわゆる「フッター」をテーブルの上部、テーブルヘッダーのすぐ下に表示できるようにすることを提案したいと思います。

例：

常に議論されている実際に要求された機能は、統計情報を表示するために余分な行を詰め込むことを意味します。つまり、 dataSourceのコンテンツを改ざんすることなく、「フッター」ではなく「要約行」になります。位置感覚。

@hackape列のグループ化を使用できます//codesandbox.io/s/pmorq2x2lqを参照してください。

はい、それが単にポジショニングの目的のためであるならば、これは実行可能な手段になるでしょう。 しかし、ビジネスロジックの意味では、提案されたAPIを介してユーザーに実行させる方がはるかに優れています。

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'
  }
}]

@yesmeckhttps ： //github.com/ant-design/ant-design/issues/6896を検討してください

pinnedTopDataとpinnedBottomDataという名前の2つの新しいプロを紹介することを提案します。

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 | Foo |
| 5 | バー|
| 合計：8 | |

＃6896とこの問題を同じAPIで解決することをお勧めします。

新しい進歩はありますか？

@Nokecyは、彼の解決策を2つの方法で見ています。彼は一時的に属性に追加していません。彼の再テーブルにはこの属性があると思います。前提は、バージョン番号が最新にアップグレードされていることですが、antdpackage.jsonを変更する必要があります。 2つの方法、
1.列が少なく、スクロールバーが表示されない場合は、簡単に解決できます。上記の例を示します。
2.複数のタイトルバーを使用して表示できますが、それほど美しくはありません。

この機能を改善することを楽しみにしており、注意を払っていますが、antdは2です。更新しても、2。バージョンにこの属性がある

この問題の更新はありますか？

公式APIを出荷する前に、今のところtable.props.components.body.wrapperカスタムコンポーネントを提供し、受け取ったprops.childrenを改ざんすることをお勧めします。

https://codesandbox.io/s/xpvwpx0npw
dom要素を直接操作して合計をカプセル化しました。この方法でフッターをたくさん追加できますが、公式ではdom要素を直接操作することはお勧めしていません。緊急に必要な場合はこちらを参照してください。

@ LDD123スクロールxは、例のフッターにのみあります。 本体もフッターでスクロールする必要があります

@jagratiTomarフッターがスクロールしているときにボディがスクロールします。ボディのscroll-xをフッターのscroll-xにバインドします。

@ LDD123は、本体にもスクロールyがある場合の例を共有できます。その場合、本体のみがスクロールし、フッターは表示されないためです。

@jagratiTomar今、私はスクロールを隠しました-xはスクロールしません、それは大丈夫です

@ LDD123だから、スクロールがあるとき-yこの例は正しく機能すると言っていますか？

うん

こんにちは@ 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 3月に同じアイデア（ここを参照）を実装するPRを提出しましたが、コアチームがそれをマージし、その後元に戻しました。 彼らは問題にどのように取り組むべきかについて他の考えを持っているようです。 状況を考えると、「他の解決策を見つける」という道をたどることをお勧めします。

@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このデモには問題があり、fixedの左側に設定すると、スタイルが混乱していることがわかります。

コンポーネントラッパーを使用してそれを行うことができましたが、それはちょっと厄介です。 コードは次のようになります

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を呼び出す必要があることです。
ボディラッパーがテーブルrefを小道具として受け取るか、レンダリングされるデータにアクセスする簡単な方法がある場合は、はるかに便利です（props.childrenは反応ノードのリストであり、集計の計算にはあまり役立ちません）

footer propを使用できますが、追加の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（∩_∩）O

@ybning固定列に問題がありますか？これらの固定列の多くには問題があります。 。

@yesmeckあなたの例は、内部テーブルのカウントを壊します： https ： //codesandbox.io/s/rrpo02qwkq
2ページに移動してから1ページに戻り、各ナビゲーションのデータを複製します。

この問題の更新はありますか？

@linrfいいえ、誰かがこの問題を解決できることを願っています

このような。
https://codepen.io/chaegumi/pen/OaqxVd

集計統計を処理するためにtotal小道具を追加できますか？
totalはfooterとは異なります。
列データを処理する関数のみを受け入れます。デフォルトはreduce

ついに合計を列に入れました

antdのテーブルフッターコンテンツのレンダリングは、特にテーブル自体に固定列がある場合、実際には使いやすいものではありません。

元のテーブルをレンダリングするためのテーブルと、下部のフッター要素をレンダリングするためのテーブルの2つのテーブルを使用して、これを実現する方法を変更できます。スタイルカバレッジを使用して、テーブルフッターのTheadと元のテーブルスクロール領域のスクロールバーを非表示にします。最後に、JSコードを追加して、2つのテーブルの水平スクロール位置を揃えます。これは、ほぼ同じです。

コンポーネント：

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フッターに列の集計を表示する方法が欲しい。

これは、componentspropを使用して実装できます。

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の資金を提供しました。

• この報酬を受け取るには、 IssueHuntを介してプルリクエストを送信して
• 貢献したいですか？ IssueHuntを介してこの問題にチップインします。
• IssueHunt Issue Explorerをチェックして、資金提供されている問題を確認してください。
• 開発者の助けが必要ですか？ IssueHuntにリポジトリを

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

このバージョンのパッケージを使用していますが、このコードの実行に失敗しました。
"antd"： "2.13.14"、 "react"： "15.4.0"、 "react-dom"： "15.4.0"

エラーメッセージ
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 current;
var pageSize;
var state = 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

PRしたいのですが、APIデザインが上司の要件を満たしていないのではないかと思います@ afc163 ...

2年後、この問題はまだ存在しています。

途中の新しいテーブル。新しいテーブルを楽しみにしています。

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

@ alexchen1875これに関連することは何も言及されていません。

@ alexchen1875これに関連することは何も言及されていません。

表のセクションの指示を注意深く読んでください。

@ alexchen1875素晴らしい！

PRを送信し、スキップをサポートするために「データがデータをトリミングしないようにする」の小道具を一時的に追加したいhttps://github.com/ant-design/ant-design/blob/61e319b66826530a1882c20a41862a15d57b120a/components/table/Table.tsx ＃L408のフィルターロジックにより、ページネーションの場合にもhttps://github.com/ant-design/ant-design/issues/5710#issuecomment-524164125が利用可能になります。チームが受け入れるかどうかはわかりません...

このデモを変更
固定列、ヘッダーグループ化、セルのマージとスクロールのサポートが追加されました。
私は\を使用しました

👉新しいデモアドレス

使用法 ：

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

antd v4はテーブルsummaryサポートしていました： https ：

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

antd v4はテーブルsummaryサポートしていました：＃21656

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

antd4はsummaryをサポートしていますが、このsummaryを繰り返す必要があると感じています。現在の使用方法は無料ですが、同時に、コードが煩雑であり、antd4の本来の意図に合わず単純になるという影響があります。

一般的な単純なシナリオは、現在のページのデータを要約することです。わかりやすいエクスペリエンスは、要約を直接構成することです。コードが整頓されて統一されるように、cloumnで