如何在 XGrid 材质 UI 组件中呈现表格页脚？答案

【问题标题】：How to render table footer in XGrid material UI component?如何在 XGrid 材质 UI 组件中呈现表格页脚？
【发布时间】：2021-06-17 14:01:34
【问题描述】：

任何人都可以帮助我们如何实现表格页脚以显示列总数。有什么方法可以呈现自定义表格页脚吗？正如我所检查的，没有任何方法可以覆盖或附加自定义表格页脚。

import React from 'react';
import { XGrid, useGridApiRef } from '@material-ui/x-grid';


const MaterialDataTable = (props) => {

    const renderData = () => {
        if (props.data?.length) {
            return props.data.map(item => {
                return {...item, id: item.postid}
            })
        } else {
            return []
        }
    }
  
  return (
    <div className="customTable" style={{ height: 1440, width: '100%' }}>
      <XGrid 
        rows={renderData()} 
        columns={props.columns} 
        autoHeight
        pageSize={10}
        rowsPerPageOptions={[10, 20, 50]}
        loading={props.loading}
        getRowId={(row) => row.postid}
        onRowClick={(record) => {
            props.rowClick(record.row, record.rowIndex)
        }}
        rowHeight={132}
        pagination={true}
        components={
            {
                
            }
        }
        disableClickEventBubbling
      />
    </div>
  );
}

export default MaterialDataTable;

【问题讨论】：

标签： reactjs datagrid material-ui xgrid

【解决方案1】：

您可以使用页脚在组件内构建客户页脚。

https://material-ui.com/components/data-grid/rendering/#footer

<XGrid 
    rows={rows} 
    columns={columns} 
    components={{
        Footer: () => <div>hey a footer</div>,
    }}

  />

【讨论】：