engineN/app/Views/kewilayahan/monitoring/componentMonitoring/Kpp.js

import React, { useEffect, useMemo, useRef, useState } from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { Card, CardBody, CardHeader, CardTitle, Col, Label, Row } from 'reactstrap'
import collect from 'collect.js'
import { Toast } from 'primereact/toast'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'
import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
import jquery from 'jquery'
import { isObjEmpty, titleCase } from '../../kytp/util'
import { useSelector } from 'react-redux'
const date = new Date()

const Kpp = () => {
  const base_url = '/engineN/'
  const toast = useRef(null)
  const [isLoading, setIsLoading] = useState()
  const rowVirtualizerInstanceRef = useRef(null)

  const [data, setData] = useState([])
  const [sorting, setSorting] = useState([{ id: 'RATA_RATA', desc: true }])

  const storeKpdl = useSelector((state) => state.kpdl)
  useEffect(() => {
    if (data.length) {
      try {
        //scroll to the top of the table when the sorting changes
        rowVirtualizerInstanceRef.current?.scrollToIndex(0)
      } catch (e) {
        // console.log(e)
      }
    }
  }, [sorting])

  useEffect(() => {
    const sharedData = storeKpdl.dataMonitoring
    const data = []
    sharedData.map((val, _idx) => {
      console.log({ val })
      val.subRows.map((val2, _idx2) => {
        console.log({ val2 })
        data.push(val2)
      })
    })
    setData(data)
    setIsLoading(false)
  }, [storeKpdl.dataMonitoring])

  const columns = useMemo(
    () => [
      {
        accessorKey: 'LABEL',
        header: 'Unit/Pegawai',
        size: 200,
        mantineTableBodyCellProps: ({ cell }) => {
          const rowObject = cell.row.original
          // console.log(cell)
          if (!cell.row.getCanExpand()) {
            if (rowObject.ISEXIST_INWAS === 'FALSE') {
              return { style: { color: 'red' } }
            }
            if (rowObject.NAMA_JABATAN === 'Kepala Seksi') {
              return { style: { color: 'blue' } }
            }
          }
        }
      },
      {
        accessorKey: 'JUMLAH',
        header: 'Jml. Subjek',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'JUMLAH_AR',
        header: 'AR Existing',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID')
      },
      {
        accessorKey: 'RATA_RATA',
        header: 'Rata-rata Per AR',
        size: 80,
        mantineTableBodyCellProps: {
          align: 'right'
        },
        Cell: ({ cell }) => Number(cell.getValue()).toLocaleString('id-ID', { maximumFractionDigits: 2 })
      }
    ],
    []
  )
  const table = useMantineReactTable({
    columns,
    data, //10,000 rows
    enableBottomToolbar: true,
    enableGlobalFilterModes: true,
    enablePagination: false,
    enableRowVirtualization: true,
    mantineTableContainerProps: { sx: { maxHeight: '600px' }, className: 'p-2' },
    onSortingChange: setSorting,
    state: { isLoading, sorting },
    rowVirtualizerProps: { overscan: 8 }, //optionally customize the virtualizer
    enableExpanding: true,
    mantineTopToolbarProps: { allowFullScreen: false },
    enableFullScreenToggle: false,
    enablePagination: false,
    mantineTableBodyCellProps: ({ cell }) => ({
      className: 'text-xs py-1',
      sx: {
        backgroundColor: cell.row.depth === 1 ? 'ButtonHighlight' : 'inherit',
        fontWeight: cell.row.depth === 0 ? '600' : 'inherit'
      }
    }),
    mantineTableBodyProps: { className: 'mb-3' },
    mantineTableHeadCellProps: { align: 'center', className: 'text-xs p-1' },
    renderBottomToolbar: ({ table }) => (
      <div>
        <Row className="pl-5 text-xs">
          <Col>
            <Label>Legenda Tabel :</Label>
            <ul>
              <li style={{ color: 'blue' }}>Kepala Seksi</li>
              <li style={{ color: 'red' }}>Eks Kepala/Anggota Seksi terkait</li>
            </ul>
          </Col>
        </Row>
      </div>
    ),
    mantineTableProps: {
      highlightOnHover: false,
      withColumnBorders: true
    },
    rowVirtualizerInstanceRef
  })
  return (
    <>
      <Row style={{ minHeight: '200px' }}>
        <Col>
          <MantineReactTable table={table} />
        </Col>
      </Row>
    </>
  )
}

export default Kpp