button responsive dattable

import { useState, useEffect,useRef } from "react";
import axios from "axios";
import Headers from "./parcelView/Headers";
import Sidebar from "./parcelView/sidebar";
import { Helmet } from "react-helmet-async";
import "./parcelView/admin.css";
import { RiFileEditFill,RiDeleteBin6Line } from "react-icons/ri";
import { NavLink } from "react-router-dom";
import "../App.css";
import Pagination from "../component/Pagination";
import { API_URL } from "../API/config";
import $ from 'jquery';
import 'datatables.net-dt/css/jquery.dataTables.css';
import 'datatables.net-responsive-dt/css/responsive.dataTables.css';
import 'datatables.net';
import 'datatables.net-responsive';



function UserDatatable() {
  const tableRef = useRef(null);

  const [products, setProduct] = useState([0]);
  const [currentPage, setCurrentPage] = useState(1);
  const [perPage, setPerPage] = useState(10);

  const totalPages = Math.ceil(products.length / perPage);

  const startIndex = (currentPage - 1) * perPage;
  const endIndex = startIndex + perPage - 1;

  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  const getProfile = async () => {
    await axios
      .get(`${API_URL.createuser.get}`)
      .then(function (response) {
        // handle success
        console.log(response.data);
        setProduct(response.data);
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  };

  useEffect(() => {
    getProfile();
  }, []);


  useEffect(() => {
    if (products.length) {
        $(tableRef.current).DataTable().destroy();
      $(tableRef.current).DataTable({
        data: products,
        
        columns: [
          
      
          
          { title: 'UserName', data: 'UserName' },
          { title: 'FName', data: 'FName' },
          { title: 'LName', data: 'LName' },
          { title: 'Email', data: 'Email' },
          { title: 'MobileNumber', data: 'MobileNumber' },
          { title: 'CityID', data: 'CityID' },
          { title: 'DesignationID', data: 'DesignationID' },
          { title: 'DepartmentID', data: 'DepartmentID' },
          { title: 'Roll', data: 'Roll' },
          { title: 'Gender', data: 'Gender' },
          { title: 'RAddress', data: 'RAddress' },
          {
            title: 'Actions',
            data: '',
            render: (data, type, rows) => {
              return `<div>
                <button class="edit-button btn btn-outline-success" data-id="${rows.UserID}">
                  Update
                </button>
                <button class="delete-button btn btn-outline-danger" data-id="${rows.UserID}">
                 Delete
                </button>
              </div>`;
            },
          },
        ],
        responsive: true,
        columnDefs:[{
          "defaultContent": "-",
          "targets": "_all"
        }],
       
        

      });

      $(tableRef.current).on('click', '.edit-button', function() {
        const id = $(this).data('id');
        handleEdit(id);
      });
  
      $(tableRef.current).on('click', '.delete-button', function() {
        const id = $(this).data('id');
        handleDelete(id);
        
      });
    }
  }, [products]);
  

  const handleEdit = (id) => {
    // Handle edit functionality
    console.log('Edit clicked for ID:', id);
    // Add your code to navigate to the edit page or perform edit operations
  };

  const handleDelete = (id) => {
    // Handle delete functionality
    console.log('Delete clicked for ID:', id);
    // Add your code to show a confirmation dialog or perform delete operations
  };    

  return (
    <>
      <Helmet>
        <title> User Datatable</title>
      </Helmet>
      <div className="wrapper ">
        <Headers />

        <Sidebar />
        <div className="content-wrapper" style={{ backgroundColor: "white" }}>
          <section className="content-header">
            <div className="container-fluid">                           
              <div className="row mb-2">
                <div className="col-sm-6">
                  <h1>User Datatable</h1>
                </div>
              </div>
            </div>
          </section>

          <section className="content">
            <div className="container-fluid">
              <div className="row">
                <div className="col-12">
                  <div className="card">
                    <div className="card-header">
                      <NavLink to="/userform/add" className="btn btn-primary">
                        Add User
                      </NavLink>
                    </div>
                    <div className="card-body">
                      <table id="example"
                      ref={tableRef}
                        style={{width:"100%"}}
                      >
                        <thead>
                          <tr>
                            
                            <th>UserName</th>
                            <th>FName</th>
                            <th>LName</th>
                            <th>Email</th>
                            <th>MobileNumber</th>
                            <th>CityID</th>
                            <th>DesignationID</th>
                            <th>DepartmentID</th>
                            <th>Roll</th>
                            <th>Gender</th>
                            <th>RAddress</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody>
                          {products
                            .slice(startIndex, endIndex + 1)
                            .map((rows, index) => (
                              <tr key={index}>
                                <td>{rows.UserName}</td>
                                <td>{rows.FName}</td>
                                <td>{rows.LName}</td>
                                <td>{rows.Email}</td>
                                <td>{rows.MobileNumber}</td>
                                <td>{rows.CityID}</td>
                                <td>{rows.DesignationID}</td>
                                <td>{rows.DepartmentID}</td>
                                <td>{rows.Roll}</td>
                                <td>{rows.Gender}</td>
                                <td>{rows.RAddress}</td>
                                <td>
                                <button onClick={() => handleEdit(rows.id)}>
                update
                </button>
                <button onClick={() => handleDelete(rows.id)}>
                  delete
                </button>
                                </td>
                              </tr>
                            ))}
                        </tbody>
                      </table>

                      {/* <div className="entries-range d-flex justify-content-between mt-2">
                        <div>
                          Showing {startIndex + 1} to{" "}
                          {Math.min(endIndex + 1, products.length)} of{" "}
                          {products.length} entries
                        </div>
                        <div>
                          <Pagination
                            currentPage={currentPage}
                            totalPages={totalPages}
                            onPageChange={handlePageChange}
                          />
                        </div>
                      </div> */}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

export default UserDatatable;