如何在XGrid material UI组件中渲染表尾？

Question

任何人都可以帮助我们如何实现表脚来显示列总数。有没有什么方法可以渲染自定义表尾？根据我的检查，没有任何方法可以覆盖或附加自定义表脚注。

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;

Answer 1

您可以在带有Footer的组件中构建客户页脚。

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

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

  />