CODEWITHSUNDEEP
javascriptreactjsmaterial-uimui-datatable
Davi Cheli Miquelim
Davi Cheli Miquelim

Reputation: 123

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)
    },

Upvotes: 0

Views: 1347

Answers (1)

abdulalim
abdulalim

Reputation: 480

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: () => {},

Upvotes: 2

Related Questions