如何让Material UI TableFooter固定在TableContainer底部？

要实现TableFooter固定在TableContainer底部、表格内容超出时滚动的效果，核心是利用flex布局调整表格内部元素的空间分配，具体步骤如下：

1. 给TableContainer设置固定高度和flex布局
   首先需要给TableContainer指定一个固定高度（比如视窗高度的百分比、具体像素值），同时设置flex垂直布局，让内部的Table组件能按垂直方向分配空间：

   <TableContainer sx={{ height: '80vh', display: 'flex', flexDirection: 'column' }}>
   

2. 调整Table组件的布局
   将Table也设置为flex垂直布局，并让它占满TableContainer的剩余空间：

   <Table sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
   

3. 让TableBody可滚动
   给TableBody设置flex: 1占据Table内的剩余空间，同时开启垂直滚动，这样当表格行内容过多时，只会在TableBody区域滚动：

   <TableBody sx={{ flex: 1, overflowY: 'auto' }}>
     {/* 这里放置你的表格行内容 */}
   </TableBody>
   

4. 固定TableFooter在底部
   经过上面的设置，TableFooter会自动被挤到TableContainer的底部，无需额外定位，你可以完全自定义页脚的内容和样式：

   <TableFooter>
     <TableRow>
       <TableCell colSpan={2} sx={{ textAlign: 'right', fontWeight: 'bold' }}>
         自定义页脚：总计XX条数据
       </TableCell>
     </TableRow>
   </TableFooter>
   

完整示例代码 #

import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell, TableFooter } from '@mui/material';

export default function FixedFooterTable() {
  return (
    <TableContainer sx={{ height: '80vh', display: 'flex', flexDirection: 'column', border: '1px solid #e0e0e0' }}>
      <Table sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <TableHead>
          <TableRow>
            <TableCell>序号</TableCell>
            <TableCell>名称</TableCell>
            <TableCell>金额</TableCell>
          </TableRow>
        </TableHead>
        <TableBody sx={{ flex: 1, overflowY: 'auto' }}>
          {/* 模拟大量数据 */}
          {Array.from({ length: 50 }).map((_, index) => (
            <TableRow key={index}>
              <TableCell>{index + 1}</TableCell>
              <TableCell>商品{index + 1}</TableCell>
              <TableCell>{(Math.random() * 1000).toFixed(2)}元</TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={3} sx={{ textAlign: 'right', bgcolor: '#f5f5f5' }}>
              合计：{(Array.from({ length: 50 }).reduce((sum) => sum + Math.random() * 1000, 0)).toFixed(2)}元
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </TableContainer>
  );
}

这个方案的原理和TablePagination类似，都是通过布局调整实现固定效果，但完全支持自定义TableFooter的内容，满足你的需求。

内容的提问来源于stack exchange，提问作者Gal Appelbaum