javascriptreactjsmaterial-uimui-datatable

Get row data from MuiDataTable


I am trying to get the row data from MuiDataTable but when I set the index from the onRowSelectionChange function to a state, my checkbox animation stops working, here is how my options look:

 const options = {
    resizableColumns: true,
    draggableColumns: {
      enabled: true,
    },

    onRowSelectionChange: (rowData: any) => {
      let rowIndex = rowData.map((e: any) => e.dataIndex);
      setState(rowIndex)
    },

Solution

  • onRowSelectionChange : (curRowSelected, allRowsSelected) => {
        console.log("All Selected: ", allRowsSelected);
    },
    

    This will collect only index and dataIndex values

      const [selectedFabrics, setSelectedFabrics] = useState([])
        customToolbarSelect: selectedRows => (
              <IconButton
                onClick={() => {
                  // console.log(selectedRows.data)
                  const indexesToPrint = selectedRows.data.map((row, k) => row.dataIndex);
                  let temp = [];
                  for (let i = 0; i < fabricList.length; i++) {
                    if (indexesToPrint.includes(i)) {
                      temp.push(fabricList[i]['id']);
                    }
                  }
                  setSelectedFabrics(temp);
                }}
                style={{
                  marginRight: "24px",
                  height: "48px",
                  top: "50%",
                  display: "block",
                  position: "relative",
                  transform: "translateY(-50%)",
                }}
              >
                <span style={{marginTop: "23px"}}>Print QR Code</span> 
              </IconButton>
            ),
    

    Here fabricList is my total table raw data. From selecting rows index we can filter with actual fabricList index and push raw data to a new state.

    Also if you want to remove the delete icon from top during multiple rows select. use it.

    customToolbarSelect: () => {},