I need to implement Column Reordering Feature in a Material Ui Table. Table code is given below. There is a button in the UI "Reorder Column". When user click on that button a Drawer wii open having the Drag and Drop option (column option). I have to reorder table column from there. Could you please help me to do this? Advance thanks.
<TableContainer>
<Table sx={{ minWidth: 700 }}>
<TableHead>
<TableRow>
<TableCell>
<Checkbox
checked={selectTopCheckbox}
onChange={(e) => handleAllCheckbox(e)}
indeterminate={showIndeterminate}
/>
</TableCell>
<TableCell>Registered Name</TableCell>
<TableCell>Application No</TableCell>
<TableCell>Form Name</TableCell>
<TableCell>Registered Email</TableCell>
<TableCell>Registered Mobile</TableCell>
<TableCell>Payment Status</TableCell>
{customizeColumnOptions?.checkedApplicationDate ? (
<TableCell>Application Date</TableCell>
) : null}
{customizeColumnOptions?.checkedState ? (
<TableCell>State</TableCell>
) : null}
{customizeColumnOptions?.checkedCity ? (
<TableCell>City</TableCell>
) : null}
{customizeColumnOptions?.checkedCounselorName ? (
<TableCell>Counselor</TableCell>
) : null}
{customizeColumnOptions?.checkedSource ? (
<TableCell>Source</TableCell>
) : null}
{customizeColumnOptions?.checkedApplicationStage ? (
<TableCell>Application Stage</TableCell>
) : null}
{customizeColumnOptions?.checkedLeadStage ? (
<TableCell>Lead Stage</TableCell>
) : null}
{customizeColumnOptions?.checkedLeadType ? (
<TableCell>Lead Type</TableCell>
) : null} */}
{/* {course ? <TableCell>Course</TableCell> : null}
{utmPay ? <TableCell>Utm Payment</TableCell> : null} */}
{/* <TableCell>Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{applications.map((dataRow) => {
return (
<TableRow key={dataRow.application_id}>
<TableCell>
<Checkbox
checked={
selectedApplications?.includes(
dataRow?.application_id
)
? true
: false
}
onChange={(e) => {
handleApplicationCheckBox(
e,
dataRow?.application_id,
dataRow?.student_email_id
);
}}
/>
</TableCell>
<TableCell>
<Box sx={{ display: "flex", alignItem: "center" }}>
<Avatar sx={{ width: 42, height: 42 }}>
{dataRow?.student_name?.slice(0, 1)}
</Avatar>
<Box sx={{ ml: 1 }}>
<Box
onClick={() =>
navigate("/userProfile", {
state: {
applicationId: dataRow?.application_id,
studentId: dataRow?.student_id,
courseName: dataRow?.course_name,
},
})
}
>
<Link to="">
<Typography variant="subtitle2">
{dataRow?.student_name ? dataRow?.student_name : `– –`}
</Typography>
</Link>
</Box>
<Typography variant="body2" color="textSecondary">
{dataRow?.student_email_id ? dataRow?.student_email_id : `– –`}
</Typography>
</Box>
</Box>
</TableCell>
<TableCell>
{dataRow?.custom_application_id
? dataRow?.custom_application_id
: `– –`}
</TableCell>
<TableCell>{dataRow?.course_name ? dataRow?.course_name : `– –`}</TableCell>
<TableCell>{dataRow?.student_email_id ? dataRow?.student_email_id : `– –`}</TableCell>
<TableCell>{dataRow?.student_mobile_no ? dataRow?.student_mobile_no : `– –`}</TableCell>
<TableCell>
{dataRow?.payment_status
? dataRow?.payment_status
: `– –`}
</TableCell>
{
customizeColumnOptions?.checkedApplicationDate &&
<TableCell>
{dataRow?.date ? dataRow?.date : `– –`}
</TableCell>
}
{customizeColumnOptions?.checkedState && (
<TableCell>
{dataRow?.state_name ? dataRow?.state_name : `– –`}
</TableCell>
)}
{customizeColumnOptions?.checkedCity && (
<TableCell>
{dataRow?.city_name ? dataRow?.city_name : `– –`}
</TableCell>
)}
{customizeColumnOptions?.checkedCounselorName && (
<TableCell>
{dataRow?.counselor_name
? dataRow?.counselor_name
: `– –`}
</TableCell>
)}
{customizeColumnOptions?.checkedSource && (
<TableCell>
{dataRow?.source_name ? dataRow?.source_name : `– –`}
</TableCell>
)}
{customizeColumnOptions?.checkedApplicationStage && (
<TableCell>
{dataRow?.application_status
? dataRow?.application_status
: `– –`}
</TableCell>
)}
{customizeColumnOptions?.checkedLeadStage && (
<TableCell>
{dataRow?.lead_stage ? dataRow?.lead_stage : `– –`}
</TableCell>
)}
{customizeColumnOptions?.checkedLeadType && (
<TableCell>
{dataRow?.lead_type ? dataRow?.lead_type : `– –`}
</TableCell>
)}
{/* {course && <TableCell>{dataRow.course}</TableCell>}
{utmPay && <TableCell>{dataRow.utmPay}</TableCell>} */}
<TableCell>
<IconButton>
<Download
onClick={() =>
handleSingleApplicationDownload(
dataRow?.application_id
)
}
/>
</IconButton>
</TableCell>
</TableRow>
);
})}
{/* {emptyRows > 0 && (
<TableRow>
<TableCell colSpan={6} />
</TableRow>
)} */}
</TableBody>
</Table>
</TableContainer>