Nextjs MUI数据表：使用标题将行获取到模式弹出窗口

编程问答 2022-06-06

问题描述

正在处理nextjs应用程序，并使用MUI-Datatables显示表。我想实现对表行的单击，这将创建一个弹出窗口，其中包含当前表行数据以及模态表头。

当前，我正在使用exapandableRows选项为弹出窗口创建自定义div：

    const options = {
      filterType: 'dropdown',selectableRows: false,download: false,rowsPerPage: 15,responsive: 'scrollFullHeight',print: false,onRowClick: rowData => console.log(rowData),expandableRows: true,renderExpandableRow: (rowData,rowMeta) => {
        console.log(rowData,rowMeta);
        
        return (
          <div className="modal-popup">
            <div className="modal-popup--inner">
// table header should be in here as well aligned with the rowData
              {JSON.stringify(rowData)}

            </div>
          </div>
          
        );
      }
    };

尽管我无法从文档中解决某些问题，但这仍然可以正常工作

  • 如何将表头也放入模式？
  • 如何为每个项目用html包装器构造rowData？目前，这只是一个纯文本重新放置。

任何建议表示赞赏

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmui-datatablereactjsreactjsreactjsreactjs