反应mui-datatables selectableRows

时间:2019-12-04 09:04:16

标签: reactjs react-table mui-datatable

我从api(api1)获取数据并发送到表并进行渲染,然后从另一个api(api2)获取一些数据,所以...

如果要从api2接收数据(如果它在表中),我想默认选择它,但是不知道怎么做?

//*this get data from api1 and render in table*
const [permissionList, setPermissionList] = useState([]);
async function getPermission() {
try {
    const response = await Fetch({
       body: null,
       type: "GET",
       auth: token,
       api: "listPermission"
     });
    const rows = [];
    response.permissions.map((row, i) =>
        rows.push([row.id, row.method, row.description])
     );
    setPermissionList(rows);
    } catch (err) {
        console.log(err);
    }
useEffect(() => {
    getPermission();
}, []);

//*this code for config selectableRows option dataTable*
const newOption = { ...options }; //options includes other configurations
newOption.selectableRows = "multiple";

<MUIDataTable
    className={classes.table}
    data={permissionList}
    columns={columns}
    options={newOption}
/>
//*with this code can get some information from row selected and can access to data render in the row*
newOption.customToolbarSelect = function CustomHeader(
     selectedRows, // when selected row information from row in this variable
     displayData // when selected row this variable includes all data in table
 ) {
    //*this below code : permissions includes selected row*
    let permissions = selectedRows.data.map(
        index =>
            displayData.filter(i => i.dataIndex === index.dataIndex)[0].data[0]
    );

在下面的代码中:我同时选择了(来自api2)和新的,但是问题是当选择了一行时,此函数运行了

    // if (data) { //data from another api2
    //   const ddd = data.permission.map(row =>
    //     displayData.filter(i => i.data[0] === row.id)
    //   );
    //   ddd.map((row, i) => {
    //     selectedRows = {
    //       data: [
    //         ...selectedRows.data,
    //         { index: row[0].dataIndex, dataIndex: row[0].dataIndex }
    //       ],
    //       lookup: {
    //         ...selectedRows.lookup,
    //         [row[0].dataIndex]: true
    //       }
    //     };
    //   });
    // }
    //
    // console.log("selectedRows", selectedRows);
    // console.log("displayData", displayData);
  };

0 个答案:

没有答案