如何在React物料表中添加/覆盖页脚组件？
如何在React物料表中添加/覆盖页脚组件？
提问于 2020-11-11 10:25:06
我用的是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>
)
}}
/>我根本不想分页，因为我使用的是这根线中提到的滚动条。所以，在我的例子中，options.paging:false --但我必须使它成为现实--显示我重写的分页/页脚组件。但是，要使其成为真，则需要在遮罩下启用分页，6之后的行将被截断。
我想要删除分页，并放置一个自定义页脚组件。假设跨度显示表底部的总行数。<span>{"Total Users: " + users.length}</span>
材料-桌子太棒了！但是我很惊讶为什么 材料表 没有页脚组件？如果它是基于material的，那么它应该有一个页脚组件，就像 材料-用户界面表 拥有它一样。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-11 13:07:27
如果要覆盖分页的图标并添加自定义，可以安装@material ui/图标。
npm i --save @material-ui/icons。
然后，您可以在不以这种方式删除滚动的情况下重写分页：
import React, { forwardRef } from 'react';
import MaterialTable, { MTableToolbar, MTableBody, MTableHeader } from 'material-table';
import { Grid, TablePagination } from '@material-ui/core';
import { Scrollbars } from 'react-custom-scrollbars';
import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';
import ArrowForward from '@material-ui/icons/ArrowForward';
import ArrowBack from '@material-ui/icons/ArrowBack';
import Bathtub from '@material-ui/icons/Bathtub';
import BatteryCharging20 from '@material-ui/icons/BatteryCharging20';
const tableIcons = {
Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
FirstPage: forwardRef((props, ref) => <BatteryCharging20 {...props} ref={ref} />),
LastPage: forwardRef((props, ref) => <Bathtub {...props} ref={ref} />),
NextPage: forwardRef((props, ref) => <ArrowForward {...props} ref={ref} />),
PreviousPage: forwardRef((props, ref) => <ArrowBack {...props} ref={ref} />),
ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};
const renderThumb = ({ style, ...props }) => {
const thumbStyle = {
borderRadius: 6,
backgroundColor: 'rgba(35, 49, 86, 0.8)'
};
return <div style={{ ...style, ...thumbStyle }} {...props} />;
};
const CustomScrollbars = props => (
<Scrollbars
renderThumbHorizontal={renderThumb}
renderThumbVertical={renderThumb}
{...props}
/>
);
export default function App() {
return (
<MaterialTable
options={{
search: true,
paging: false,
toolbarButtonAlignment: "left",
searchAutoFocus: true,
cellStyle: { minWidth: '100px', maxWidth: '100px' },
}}
title="Toolbar Overriding Preview"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{ title: 'Birth City', field: 'birthCity', type: 'numeric' }
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]}
localization={{
pagination: {
labelDisplayedRows: '{from}-{to} of {count} rows',
labelRowsSelect: 'Custom Label Rows Select',
labelRowsPerPage: 'Custom Label Rows Per Page',
firstAriaLabel: 'Custom First Page Label',
firstTooltip: 'Custom First Page Tooltip',
previousAriaLabel: 'Custom Previous Page Label',
previousTooltip: 'Custom Previous Page Tooltip',
nextAriaLabel: 'Custom Next Pabe',
nextTooltip: 'Custom Next Page Tooltip',
lastAriaLabel: 'Custom Last Page Label',
lastTooltip: 'Custom Last Page Tooltip'
},
}}
icons={tableIcons}
components={{
Toolbar: props => {
// This will let you use your own Title while keeping the search
const propsCopy = { ...props };
// Hide default title
propsCopy.showTitle = false;
return (
<Grid container direction="row">
<Grid item xs={6}>
<h2>Your Own Title</h2>
</Grid>
<Grid item xs={6}>
<MTableToolbar {...propsCopy} />
</Grid>
</Grid>
);
},
Body: props => {
return (
<div>
<CustomScrollbars style={{ height: '250px' }}>
<MTableBody {...props} />
</CustomScrollbars>
<h2 style={{
textAlign: "center"
}}>Custom Footer</h2>
</div>
)
},
Header: props => (
<div>
<MTableHeader {...props} />
</div>
),
// Pagination: props => (
// <TablePagination
// {...props}
// rowsPerPageOptions={[]}
// rowsPerPage={7}
// />
// )
}}
/>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64784618
复制相关文章
相似问题
腾讯云开发者
