React Material树形表格：新增行默认展开的实现问题

核心思路 #

Material Table的树形表格不会自动展开新添加的行，需要通过手动维护展开行ID集合来控制状态，添加新行时主动将其ID加入集合即可实现默认展开。

具体实现步骤 #

1. 维护展开行状态
   在组件中用useState保存当前展开的行ID列表：

   import { useState } from 'react';
   import MaterialTable from 'material-table';
   
   const YourComponent = () => {
     const [data, setData] = useState(你的初始数据数组);
     // 存储展开的行ID，初始为空
     const [expandedRowIds, setExpandedRowIds] = useState([]);
   

2. 修改添加新行逻辑
   编写添加新行的方法，在更新数据的同时将新行ID加入展开集合：

   const addNewRow = () => {
       // 生成唯一ID，这里用时间戳示例，可根据实际业务调整
       const newRowId = Date.now();
       // 构造新行数据，替换为你的实际字段
       const newRow = {
         id: newRowId,
         productId: 目标父行ID, // 对应树形结构的关联字段
         name: '新行名称',
         // 其他字段...
       };
       // 更新表格数据
       setData([...data, newRow]);
       // 将新行ID加入展开集合，实现默认展开
       setExpandedRowIds([...expandedRowIds, newRowId]);
     };
   

3. 配置表格组件绑定状态
   修改原有的MaterialTable组件，添加options属性绑定展开状态，同时可配置内置添加操作：

   return (
       <MaterialTable
         title="title"
         columns={columns}
         data={data}
         icons={tableIcons}
         parentChildData={(row, rows) => rows.find((a) => a.id === row.productId)}
         options={{
           // 绑定展开行ID集合
           expandedRowIds: expandedRowIds,
           // 可选：监听展开/折叠事件，手动更新状态
           onRowExpandChange: (rowId, isExpanded) => {
             if (isExpanded) {
               setExpandedRowIds([...expandedRowIds, rowId]);
             } else {
               setExpandedRowIds(expandedRowIds.filter(id => id !== rowId));
             }
           }
         }}
         // 配置内置添加按钮（如果使用自定义添加按钮可忽略）
         actions={[
           {
             icon: tableIcons.Add,
             tooltip: '添加新行',
             onClick: addNewRow
           }
         ]}
       />
     );
   };
   
   export default YourComponent;
   

注意事项 #

• 新行的id必须保证唯一，避免与已有行ID冲突，否则会导致展开状态异常。
• 如果你的添加逻辑是通过表格内置的editable配置实现，可在onRowAdd回调中执行添加展开ID的操作：

  editable={{
    onRowAdd: (newData) => {
      const newRow = { ...newData, id: Date.now() };
      setData([...data, newRow]);
      setExpandedRowIds([...expandedRowIds, newRow.id]);
      return Promise.resolve();
    }
  }}
  

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