Javascript 如何在物料表中添加/覆盖页脚组件？

我在用react。我在添加/覆盖默认页脚组件时遇到问题。默认情况下，分页组件在页脚中呈现。所以，我尝试重写分页组件，使其成为这样一个简单的页脚

<MaterialTable
    // other props
    options={{           
            search: true,
            selection: true,
            sorting: true,
            actionsColumnIndex: -1,
            paging: false,   // true cause the rows truncation... i.e., paging anabled.
            showSelectAllCheckbox: true,
            toolbarButtonAlignment: "right",
            searchFieldAlignment: "right",
            searchAutoFocus: true,
            tableLayout:"auto",
            headerStyle: {              
              fontSize: "small"
            }
          }}
    components={{
            .
            .
            .
            .
            Pagination: props =>(
              <div>
                <h4>{"Total Users: " + users.length}</h4>                
              </div>
            )
            
          }}
/>

(
{“总用户数：+Users.length}
)
}}
/>

我根本不想分页，因为我正在使用中提到的滚动条。因此，在我的例子中，

options.paging:false

，但我必须将其设置为true，以显示覆盖的分页/页脚组件。但如果实现了这一点，则可以在引擎盖下启用分页，并截断6之后的行

我想删除分页并放置自定义页脚组件。让我们假设一个显示表底部总行数的跨度。

{“总用户数：+Users.length}

---

材料表很棒！但我很惊讶为什么没有页脚组件？如果它基于material ui，它也应该有一个页脚组件。

如果要覆盖分页图标并添加自定义内容，可以安装

npm i——保存@material ui/图标

然后，您可以通过以下方式覆盖分页，而无需删除滚动：

import React，{forwardRef}来自'React'；
从“物料表”导入MaterialTable，{MTableToolbar，MTableBody，MTableHeader}；
从“@material ui/core”导入{Grid，TablePagination}；
从“react custom Scrollbars”导入{Scrollbars}；
从“@material ui/icons/AddBox”导入AddBox；
从“@material ui/icons/arrowdown”导入向下箭头；
从“@material ui/icons/Check”导入检查；
从“@material ui/icons/ChevronRight”导入ChevronRight；
从“@material ui/icons/Clear”导入清除；
从“@material ui/icons/DeleteOutline”导入DeleteOutline；
从“@material ui/icons/Edit”导入编辑；
从“@material ui/icons/FilterList”导入过滤器列表；
从“@material ui/icons/Remove”导入删除；
从“@material ui/icons/SaveAlt”导入SaveAlt；
从“@material ui/icons/Search”导入搜索；
从“@material ui/icons/ViewColumn”导入ViewColumn；
从“@material ui/icons/ArrowForward”导入ArrowForward；
从“@material ui/icons/ArrowBack”导入箭头；
从“@material ui/icons/bathbub”导入浴缸；
从“@material ui/icons/BatteryCharging20”导入电池充电20；
常数表图标={
添加：forwardRef（（道具，ref）=>），
检查：forwardRef（（道具，ref）=>），
清除：forwardRef（（道具，ref）=>），
删除：forwardRef（（道具，ref）=>），
DetailPanel:forwardRef（（道具，ref）=>），
编辑：forwardRef（（道具，ref）=>），
导出：forwardRef（（道具，ref）=>），
过滤器：forwardRef（（道具，ref）=>），
首页：forwardRef（（道具，ref）=>），
最后一页：forwardRef（（道具，ref）=>），
下一页：forwardRef（（道具，ref）=>），
上一页：forwardRef（（道具，ref）=>），
ResetSearch:forwardRef（（道具，ref）=>），
搜索：forwardRef（（道具，ref）=>），
SortArrow:forwardRef（（道具，ref）=>），
第三阶段检查：forwardRef（（道具，ref）=>），
ViewColumn:forwardRef（（道具，ref）=>）
};
const renderThumb=（{style，…props}）=>{
常量拇指样式={
边界半径：6，
背景颜色：“rgba（35,49,86,0.8）”
};
返回；
};
const CustomScrollbars=props=>(
);
导出默认函数App（）{
返回(
{
//这将允许您在保持搜索的同时使用自己的标题
常量属性={…属性}；
//隐藏默认标题
proposcopy.showTitle=false；
返回(
你自己的头衔
);
},
正文：道具=>{
返回(
自定义页脚
)
},
标题：道具=>(
),
//分页：道具=>(
//   
// )
}}
/>
)
}

为什么不使用一个单独的组件并将其附加到表的底部？通过一点样式，它将看起来像一个页脚OK，如果可以的话，请添加一个答案谢谢亲爱的，但我想添加一个简单的页脚，删除整个分页组件。如果我可以做到这一点，甚至不涉及分页，那将是伟大的！我更新了问题以使其更清楚。@DevLoverUmar，检查更新的问题。删除分页，您也可以在

正文

部分执行此操作。@DevLoverUmar，哈哈哈。没关系。