Question

我的用例是，当用户使用搜索过滤表数据时，我希望能够使用外部窗口小部件对表中显示的数据的每一行执行操作。

现在，我将所有数据转储到cols={MyData}中并通过data[index]进行排序，但理想情况下，我希望使用currentlyDisplayedTableData[index]之类的东西执行操作。

似乎没有记录在案的方法，所以我没有尝试展示，我只是想知道是否有人遇到了这个问题并且可以向我展示光明。

re：https://github.com/mbrn/material-table/issues/1124

Answer 1

@imjared

我今天通过问题发现了这个线程，现在已经研究并测试了两个有效的解决方案，以了解如何掌握过滤后的数据。也许这就是您想要的东西，或者至少可以提示您去哪里，所以我认为我应该分享它=）

选项1 -使用参考监听MaterialTable.state.data中的更改。（useRef和UseEffect） 选项2 -内置MaterialTable.onSearchChange，并结合了MaterialTable.state.data 请注意，我提供了2种选择2。

感谢您提供的示例@tylercaceres，它不适合我，但给了我有关如何执行操作的提示。

代码在这里找到：MaterialTableGettingHoldOfRenderData.js 材料表示例获取过滤数据，表当前视图数据（包括2个选项以及其他一些操作/按钮示例），如何使用Material-UI中的SvgIcon

Answer 2

只是想我应该分享另一个技巧，如果您只想在渲染之前进行拦截/干预并处理当前显示的数据，则可以覆盖表主体的组件，如Tyler在“问题”链接中显示的那样。

但是，除了像Tyler一样添加渲染方法外，您还可以像这样截取“向下”的道具，然后将其注入下一个组件（Body，Row等）中。

注意；在https://material-table.com/#/docs/features/component-overriding

中查找EditRow和其他组件


    <MaterialTable
    //... 

     /**
                 * be aware when making changes on data that there is a tableData object attached
                 * rowData: {
                 *  name: 'some name',
                 *  tableData : {id: 3}
                 * }
                 */
                components={{
                    Body: (props) => {
                        //intervene before rendering table                     
                        console.log("tampering with some table data ", props);
                        console.log(" -- table data looks like this ", props.renderData);
                        // do stuff.. 
                        const myRenderData = props.renderData;
                        return (
                            <>
                                <MTableBody {...props} renderData={myRenderData} />
                                {/* to show that you will make impact */}
                                {/* <MTableBody {...props} renderData={[]} /> */}
                            </>
                        )
                    },
                    Row: (props) => {
                        //intervene before rendering row                     
                        console.log("tampering with some row data ", props);
                        console.log(" -- row data looks like this ", props.data);
                        console.log(" -- row table data looks like this ", props.data.tableData);
                        // do stuff.. 
                        const myRenderData = props.data;
                        return (
                            <>
                                <MTableBodyRow {...props} data={myRenderData} />
                            </>
                        )
                    }
                }}

有没有办法访问材料表中当前视图的数据？

2 个答案: