Material React Table折叠模式下行间距问题及解决咨询

要消除折叠展开状态下的行间隙，实现紧凑表格效果，主要从移除默认间距、调整行内边距、消除子表格额外边距这几个方向入手，以下是具体实现方案：

1. 自定义主表格行样式，移除默认间距 #

在主表格的rowProps中直接设置行的内边距和外边距，覆盖组件默认样式：

const table = useMaterialReactTable({
  // 其他配置项...
  rowProps: ({ row }) => ({
    sx: {
      margin: 0,
      padding: 0,
      '& td': {
        padding: '4px 16px', // 按需缩小内边距，默认16px会显得松散
        // 展开时去掉当前行下边框，避免和子表格产生双重边框间隙
        borderBottom: row.getIsExpanded() ? 'none' : '1px solid rgba(224, 224, 224, 1)',
      },
    },
  }),
});

2. 调整子表格样式，消除额外边距 #

子表格默认自带边框、外边距或内边距，需要完全去除：

// 子折叠表格组件示例
const CollapsibleSubTable = ({ data }) => {
  const subTable = useMaterialReactTable({
    columns: subColumns,
    data,
    enableSorting: false,
    enablePagination: false,
    // 关键样式调整
    muiTableProps: {
      sx: {
        margin: 0,
        padding: 0,
        border: 'none',
        '& tr': {
          margin: 0,
          '& td': {
            padding: '4px 16px',
            borderBottom: '1px solid rgba(224, 224, 224, 1)',
          },
        },
      },
    },
  });

  return <MaterialReactTable table={subTable} />;
};

3. 处理展开行容器的间距 #

如果展开行的容器带有默认padding，需要一并移除：

// 在主表格的expandedRowRenderer中设置容器样式
expandedRowRenderer: ({ row }) => (
  <Box sx={{ padding: 0, margin: 0 }}>
    <CollapsibleSubTable data={row.subRows} />
  </Box>
),

补充：全局样式覆盖（可选） #

如果组件内样式不生效，可通过MUI主题全局调整表格行的默认间距：

const theme = createTheme({
  components: {
    MuiTableRow: {
      styleOverrides: {
        root: {
          margin: 0,
          '& td': {
            padding: '4px 16px',
          },
        },
      },
    },
  },
});

通过以上调整，主表格行和子表格行就能完全贴合，消除间隙，实现紧凑的折叠表格效果。

内容的提问来源于stack exchange，提问作者Nicky Apriliani