text: import React, { useState } from "react";
  import store from "data/store"
  import axios from "axios";
  import { useCookies } from 'react-cookie';
  import Modal from '../Tool/HolidayTypeDetail_Modal'
  import { Icon, Button } from 'rsuite';
  import MUIDataTable from "mui-datatables";
  import CustomFooter from 'components/TableFooter/footer';
  
  export default function CardUserTable({ data, update }) {
    const [resizableColumns, setResizableColumns] = useState(false);
    const [cookies, setCookie] = useCookies();
    const [reload, setreload] = useState(false);
  
    const columns = [
      {
        name: "id",
        label: "Id",
        options: {
          display: false,
          filter: false,
        }
      },
      {
        name: "name",
        label: <span className="whitespace-nowrap">請假類型</span>,
        options: {
          filter: false,
          sort: false
        }
      },
      {
        name: 'tool',
        label: <span className="mainitem5">操作</span>,
        options: {
          filter: false,
          sort: false,
          customBodyRenderLite: (dataIndex) => {
            return <Button onClick={() => update('edit', dataIndex)} appearance="ghost" color="blue" className="w-full hover:shadow-md lg:w-2/12">
              <Icon icon="edit" /> 編輯
            </Button>
          },
        }
      },
    ];
    const deleteList = (idList) => {
      const headers = {
        'Authorization': 'Bearer ' + cookies.token
      };
      var jsonData = {}
      jsonData['idList'] = String(idList)
      axios.post(store.webApiUrl + 'HolidayType/DeleteList/', jsonData, { headers })
        .then(r => {
          if (r.status == "200") {
  
            alert('刪除成功')
            window.location.reload(false);
            return true;
          }
          else {
            alert('刪除失敗')
            return false
          }
  
        }
        );
    }
    const options = {
      filter: true,
      filterType: 'dropdown',
      responsive: 'standard',
      fixedHeader: false,
      fixedSelectColumn: false,
      tableBodyHeight: '600px',
      rowsPerPage: 10,
      resizableColumns: resizableColumns,
      setRowProps: (row, dataIndex, rowIndex) => {
        if (dataIndex % 2 == 0)
          return {
            style: { backgroundColor: "rgba(186, 240, 253,.3)" },
          };
      },
      onRowsDelete: (rowsDeleted) => {
        var idList = []
        rowsDeleted.data.forEach(e => {
          idList.push(data[e.dataIndex].id)
        });
        return deleteList(idList)
      },
      // customFooter: (count, page, rowsPerPage, changeRowsPerPage, changePage, textLabels) => {
      //   return (
      //     <CustomFooter
      //       count={count}
      //       page={page}
      //       rowsPerPage={rowsPerPage}
      //       changeRowsPerPage={changeRowsPerPage}
      //       changePage={changePage}
      //       textLabels={textLabels}
      //     />
      //   );
      // },
    };
    var title = <>
      <Modal data={data} setreload={setreload} ></Modal>
    </>
    return (
      <>
        <div className={"z-0 relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg"} >
          <MUIDataTable title={title} data={data} columns={columns} options={options} />
        </div>
      </>
    );
  }