NextJS_DOC/pages/Components/groupByHCP.js

import React, { useEffect } from 'react'
import { Button, Card, Col, Container, Row } from 'react-bootstrap';
import { TabulatorFull as Tabulator } from 'tabulator-tables';
import '../jqueryloader'

const exportcsv = '/images/contacts/Excel.svg';
const gridEditIcon = '/images/refine_by_icons/edit.svg';
const gridDeleteIcon = '/images/cross_gray.svg';

var tablePaymentsGrid = '';
var toggleValue = '';
const groupByHCP = () => {
  function toggleKolGrouping(){
    toggleValue = $("#toggleKolGrouping").text();
    if(toggleValue == 'Remove Grouping'){
      tablePaymentsGrid.setGroupBy(false);
      $("#toggleKolGrouping").text("Group By HCP");
    }else{
      tablePaymentsGrid.setGroupStartOpen(false);
      tablePaymentsGrid.setGroupBy("kol_name");
      $("#toggleKolGrouping").text("Remove Grouping");
    }
  }
  function listPayments(){
	//Tabulator Grid parameters 
  	var gridFor='payments';
    var gridHeaderText= "Payments"; 
    var gridId= gridFor+'-grid-table';


  	var actionLink = "<div class='gridActionIcon'><div class='gridEditIcon' onclick=\"editInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Edit\" class=\"tooltipLink\"></a></div></div>";
	actionLink += "<div class='gridActionIcon'><div class='gridDeleteIcon' onclick=\"deleteInteraction();return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"Delete\" class=\"tooltipLink\"></a></div></div>";
	
    //Data for grid to load 
  	var tableData2 = [
  		{micro:'1',kol_name:'Aaron James Miller',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
		{micro:'2',kol_name:'Aaron James Miller',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
		{micro:'3',kol_name:'Aaron James',date:"14/05/2020",type: "General",amount: "555.00",status: "Completed",act:''},
		{micro:'4',kol_name:'Aaron James',date:"20/05/2020",type: "General",amount: "550.00",status: "Completed",act:''},
	]
    //Tabulator Gird initialisation 
  	tablePaymentsGrid = new Tabulator("#"+gridId, {
  	//var tableData = <?php //echo json_encode($arr_users); ?>;
      	data:tableData2,
      	columns:[
  			{title:"#", formatter:'rownum',align:'center',headerSort:false,tooltip:false, width:"5%"},
            {title:"", field:"micro",formatter:function(cell, formatterParams, onRendered){
                return "<div class='microViewIcon' onclick=\"viewPaymentMicroProfile("+ cell.getValue() +"); return false;\" ><a href=\"#\" data-tooltip=\"tooltip\" data-placement=\"bottom\" title=\"View Interaction\"></a></div>"; //return the contents of the cell;
            },headerFilter:false,headerSort:false,align:'center', width:"5%"},
            {title:"HCP Name", field:"kol_name",formatter:function(cell, formatterParams, onRendered){
                return "<a href='#' class='label-blue'>" + cell.getValue() + "</a>"; //return the contents of the cell;
            },headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"42%"},
            {title:"Date", field:"date",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
            {title:"Type", field:"type",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
            {title:"Amount", field:"amount",headerFilter:true, headerFilterPlaceholder:'Search', align:'left',bottomCalc:"sum", width:"10%"},
            {title:"Status", field:"status",headerFilter:true, headerFilterPlaceholder:'Search', align:'left', width:"10%"},
            {title:"Action", field:"act",formatter:function(cell, formatterParams){
                  return actionLink;
            },headerFilter:false,headerSort:false,width:80,align:'center', width:"8%"}
          ],
      	layout:"fitDataStretch",
    	tooltips:true,
    	ajaxSorting:false,
        ajaxFiltering:false, 
        initialSort:[{column:"date", dir:"desc"}],
        groupClosedShowCalcs:true,
        paginationSize:10, // this option can take any positive integer value (default = 10),possible values 10,20,50,100
        pagination:"local",
        paginationSizeSelector:[10, 20, 50, 100],
        tableBuilt:function(){
			$("#"+gridFor+"-grid-header .grid-header-text").html(gridHeaderText);
  		}
  	});
  	
  	var grid_options ='<div style="float:right;" class="excelExportIcon sprite_iconSet tooltip-demo tooltop-left" onclick="exportExcel(\'#listPaymentsResultSet\',\'payments\');"><a href="#" rel="tooltip" data-original-title="Export Payment Details into Excel format">&nbsp;</a></div>';
  	grid_options +='<div style="float:right;" class="title-bar-actions"><a onclick="addPayment();" class="grid_new_btn">Add Payments</a></div>';
	$("#"+gridFor+"-grid-header .grid-header-text").append(grid_options);
}
useEffect(()=>{
  listPayments();
}, [])
  return (
    <>
      <Container fluid className='groupByTabulator'>
          <Row>
              <Col xs={12} sm={12} md={12} lg={10} xxl={10} className='mx-auto py-3'>
                  <Card className='no-shadow border-start-0 border-top'>
                      <Card.Header className='border-0'>
                          <span className='grid-header-text fw-bold'>Custom Tabulator</span>
                          <div className='float-end'>
                          <Button variant='link' onClick={toggleKolGrouping} id="toggleKolGrouping">Group By HCP</Button>
                          <a href="#" className='text-decoration-none'><img src={exportcsv} alt="csv"/></a>  
                          </div>
                      </Card.Header>
                      <Card.Body>
                          <div id="payments-grid-table" className="customGridWrapper"></div>
                      </Card.Body>
                  </Card>
              </Col>
          </Row>
      </Container>
    </>
  )
}

export default groupByHCP