Ant-design: 집계 통계 데이터를 테이블에 표시하는 방법이 없습니다.

@TangMonk 안녕하세요. 버그보고보다 기능을 요청하는 것 같습니다. 죄송하지만이 기능을 구현할 계획이 없습니다. 테이블의 기본 페이지 매김을 비활성화하고 직접 페이지 매김을 구현할 수 있습니다.

footer 테이블에 맞게 뭔가를 할 수 있을까요?

@yesmeck , 답장을 보내 주셔서 감사합니다.하지만 이것에 대해 너무 많은 문제가 있습니다.이 기능이 정말 유용하고 필요하다고 생각합니다.

관련 문제 : # 3591, # 1483, # 4581

@ afc163 , 감사합니다!

당신의 제안이나 해결책은 무엇입니까?

확실하지 않습니다. pageSize 를 사용하여 테이블 데이터 크기를 제한 할 수 없다고 생각합니다. 데이터는 클라이언트 측이 아닌 서버 측에서 처리해야하므로 테이블에 추가 데이터를 추가 할 수 있습니다.

안녕하세요,
이 기능에 대한 업데이트가 있습니까? 아니면 다른 방법으로?

@yesmeck 가장 간단한 해결책은 테이블 외부에 추가 <div> 를 추가하는 대신 바닥 글이 테이블 내부에 실제 <tfoot> 렌더링하도록하는 것입니다.

사람들은 단순히 테이블 레이아웃이 열을 정렬하기를 원하기 때문에 추가 행을 dataSource 에 짜내려고합니다.

예, 이미 footer prop이 있습니다. <tfoot/> 의 적절한 이름을 찾을 수 없습니다.

새로운 tfoot 소품을 추가하지 않고 테이블 내부에 <tfoot /> 렌더링하도록 현재 footer 소품을 다시 구현하는 것이 좋습니다. 그것이 아무것도 망칠 것이라고 생각하지 마십시오.

@yesmeck 이 기능이 자주 요청되는 것 같습니다. 또한 요약 행을 추가하는 데 어려움을 겪고 있습니다. 해결 방법이 있지만 해키 돔 조작이 포함되어 더 예쁜 솔루션을 보게되어 기쁩니다.

이미 처리하고있는 팀원이 있나요? 만약 아니라면 내가 조사 할 수있을 것입니다.

PR을 시도 할 수 있습니다.

@yesmeck 여기 있습니다 : https://github.com/react-component/table/pull/191
효과는 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 열 그룹화를 사용할 수 있습니다. https://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'
  }
}]

@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 | Foo |
| 5 | 바 |
| 합계 : 8 | |

동일한 API로 # 6896과이 문제를 해결하는 것이 좋습니다.

새로운 진전이 있습니까?

@Nokecy 는 그의 솔루션을 두 가지 방법으로 봅니다. 그는 일시적으로 속성에 추가하지 않았습니다. 버전 번호가 최신 버전으로 업그레이드되면 그의 re-table에이 속성이 있다고 생각하지만 antd 패키지를 수정해야합니다. .json. 또한 두 가지 방법,
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 은 본문에 scroll-y가있는 경우 공유하고 예를 들어

@jagratiTomar 지금, 스크롤이 아닌 스크롤 -x를 숨겼습니다.

@ LDD123 그래서 scroll-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 이 데모는 문제가 있습니다. 왼쪽으로 고정하면 스타일이 엉망인 것을 볼 수 있습니다。

구성 요소 래퍼를 사용하여 수행했지만 다소 어색합니다. 코드는 다음과 같습니다.

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 를 호출해야한다는 것입니다.
본문 래퍼가 테이블 참조를 소품으로 받거나 렌더링 될 데이터에 더 쉽게 액세스 할 수있는 경우 훨씬 더 좋을 것입니다 (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 prop을 추가 할 수 있습니까?
total 는 footer 와 다릅니다.
열 데이터를 처리하는 함수 만 허용합니다. 기본값은 reduce

마침내 열에 합계를 넣었습니다.

antd의 테이블 바닥 글 내용의 렌더링은 특히 테이블 자체에 고정 된 열이있는 경우 사용하기가 쉽지 않습니다.

두 개의 테이블로 구현하는 방법을 변경할 수 있습니다. 하나는 원본 테이블을 렌더링하고 다른 하나는 하단에 바닥 글 요소를 렌더링하는 것입니다. 스타일 범위를 사용하여 테이블 바닥 글의 광고와 원래 테이블 스크롤 영역의 스크롤 막대를 숨 깁니다. 마지막으로 두 테이블의 가로 스크롤 위치를 정렬하는 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 바닥 글에 열 집계를 표시하는 방법을 원합니다.

component 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 는이 문제에 $ 5.00를 투자했습니다.

• 이 보상을 받으려면 IssueHunt 를 통해 풀 요청을 제출하십시오.
• 기여하고 싶습니까? IssueHunt 를 하세요 .
• 더 많은 자금 지원 문제를 보려면 IssueHunt 문제 탐색기 를 확인하세요.
• 개발자의 도움이 필요하십니까? 자금을 모으려면 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 년 후에도이 문제는 여전히 존재합니다.

원래 col을 다시 작성하고 비 페이징 테이블에 데이터를 추가하는 렌더링을 수정하는 방법을 사용했습니다.

여러 데이터를 업로드하지만 매김의 경우, 그것은 살해됩니다. https://github.com/ant-design/ant-design/blob/fee5e291632cce131611dd1a9e2ab89e02ee43a3/components/table/Table.tsx#L407

홍보하고 싶지만 API 디자인이 상사의 @ afc163 요구 사항을 충족하지 못하는 것이

2 년 후에도이 문제는 여전히 존재합니다.

가는 길에 새 테이블. 새 테이블을 기대합니다.

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

@ 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는 Table summary : https://github.com/ant-design/ant-design/issues/21656

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

antd v4는 테이블 summary : # 21656을 지원했습니다.

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

antd4는 요약을 지원하지만이 요약은 여전히 ​​반복되어야한다고 생각합니다. 현재 사용하는 방법은 무료이지만 동시에 코드가 너무 번거롭고 원래 의도와 일치하지 않는다는 것입니다. antd4가 점점 더 단순 해집니다.

일반적인 간단한 시나리오는 현재 페이지의 데이터를 요약하는 것입니다. 친숙한 경험은 요약 을 직접 구성하는 것이어야합니다. 즉, cloumn에서