reactjs - XGridマテリアル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;