Styled Paper - Copy this React, Mui Component to your project
design me tanstack table for the following column: const columns = useMemo<ColumnDef<UsersMappedResponse>[]>(() => { const onEditAction = (id: string) => { const filteredUser = usersData.find(user => user.id === id) if (filteredUser) { setOpen(true) setModelType('edit') setSelectedUsers(filteredUser) } } const onDeleteAction = (id: string) => { if (window.confirm('Are you sure you want to delete this user?')) { apiHelper .delete(`${endpointConfig.admin}/users/${id}`) .then(() => fetchUsers()) .catch(() => toast.error('Failed to delete user!')) } } return [ { header: 'Name', accessorKey: 'name' }, { header: 'Email', accessorKey: 'email' }, { header: 'Monthly Markings', columns: [ { header: 'Total Hours', cell: info => <Typography>{renderTotalHours(info.row.original.markings)}</Typography> }, { header: 'Tracked Hours', cell: info => <Typography>{renderTrackedHours(info.row.original.markings)}</Typography> }, { header: 'Pending Hours', cell: info => <Typography>{renderPendingHours(info.row.original.markings)}</Typography> }, { header: 'Idle Hours', cell: info => <Typography>{renderIdleHours(info.row.original.markings.idleTimeMarkings)}</Typography> } ] }, { accessorKey: 'actions', header: 'Actions', cell: info => { const actionItems = info.getValue() as string[] const handleAction = (type: string) => { if (type === 'edit') onEditAction(String(info.row.original.id)) if (type === 'delete') onDeleteAction(String(info.row.original.id)) if (type === 'view') router.push(`/users/${info.row.original.id}/activities`) } return ( <Box sx={{ display: 'flex' }}> {actionItems.map(action => ( <Tooltip key={action} title={action}> <IconButton color={actions[action].color} onClick={() => handleAction(action)}> <Icon icon={actions[action].icon} /> </IconButton> </Tooltip> ))} </Box> ) } } ] }, [usersData, router])
