e-verify/components/Datatables.js

import { useRouter } from 'next/router'
import { Button } from 'primereact/button'
import { Card } from 'primereact/card'
import { DataTable } from 'primereact/datatable'
import { InputText } from 'primereact/inputtext'
import { Paginator } from 'primereact/paginator'
import { Toolbar } from 'primereact/toolbar'

/**
 * CUSTOM DATATABLES PRIME REACT
 * @children column-column data
 * @data isi dari datatables
 * @dataDrawPrev untuk cek apakah ada data sebelumnya
 * @dataDrawNext untuk cek apakah ada data setelahnya
 * @draw untuk merubah draw/page datatables
 * @setDraw untuk merubah draw/page datatables
 * @buttonUpload button untuk upload data
 * @buttonUploadLabel label button add
 * @buttonAdd button untuk add data
 * @buttonAddLabel label button add
 * @dialogForm usestate untuk open/close dialog/modal form
 * @setDialogForm set dialog form modal untuk set open/close
 * @Form form modal dynamic
 * @dataEdit state yang menyimpan data yang akan di edit
 * @setDataEdit set state data edit
 * @refresh state untuk refresh datatables
 * @toast reference untuk toast
 * @setSearch set state untuk pencarian pada datatables
 * @buttonAddCustom untuk add pengajuan tagihan
 * @buttonAddCustomLabel label button add custom
 * @expandRow untuk detail row
 * @fiturSearch untuk tampil kolom search
 */
export const DatatablePrime = ({
	children,
	data,
	dataDrawPrev = 0,
	dataDrawNext = 0,
	draw,
	setDraw,
	buttonUpload,
	buttonUploadLabel,
	buttonAdd,
	buttonAddLabel,
	dialogForm,
	setDialogForm,
	setDialogUpload,
	Form,
	dataEdit,
	setDataEdit,
	refresh,
	toast,
	setSearch,
	buttonAddCustom,
	buttonAddCustomLabel,
	linkCustom,
	expandRow,
	fiturSearch = true,
	showHeader = true,
}) => {
	const first = 0
	const rows = 30
	const router = useRouter()
	const keyUpSearch = (data) => {
		setSearch(data)
	}

	const leftToolbarTemplate = () => {
		return <></>
	}

	const rightToolbarTemplate = () => {
		return (
			<>
				<div className='flex gap-x-3'>
					{buttonUpload && (
						<Button
							className='p-button-sm'
							label={buttonUploadLabel}
							onClick={() => {
								setDialogUpload(true)
							}}
						/>
					)}
					{buttonAdd && (
						<Button
							className='p-button-sm p-button-success'
							label={buttonAddLabel}
							onClick={() => {
								setDialogForm(true), setDataEdit([])
							}}
						/>
					)}
					{buttonAddCustom && (
						<Button
							className='p-button-sm'
							label={buttonAddCustomLabel}
							onClick={() => {
								router.push(linkCustom)
							}}
						/>
					)}
				</div>
			</>
		)
	}

	const dtHeader = () => {
		return (
			<form className='flex justify-end'>
				<div className='flex gap-x-2'>
					{fiturSearch && (
						<div className='p-inputgroup'>
							<InputText
								className='p-inputtext-sm dt-search'
								onChange={(e) => keyUpSearch(e.target.value)}
								placeholder='Search'
							/>
							<span className='p-inputgroup-addon'>
								<i className='pi pi-search' />
							</span>
						</div>
					)}
				</div>
			</form>
		)
	}

	const templatePaginator = {
		layout: 'PrevPageLink NextPageLink',
		PrevPageLink: () => {
			return (
				<button
					type='button'
					className='p-paginator-prev p-paginator-element p-link'
					onClick={() => setDraw(draw > 1 ? draw - 1 : draw)}
					disabled={dataDrawPrev.length > 0 ? false : true}
				>
					<span className='p-3'>Previous</span>
				</button>
			)
		},
		NextPageLink: () => {
			return (
				<button
					type='button'
					className='p-paginator-next p-paginator-element p-link'
					onClick={() => setDraw(draw + 1)}
					disabled={dataDrawNext.length > 0 ? false : true}
				>
					<span className='p-3'>Next</span>
				</button>
			)
		},
	}

	return (
		<>
			<Card className='dt-card'>
				<Toolbar className='dt-toolbar' left={leftToolbarTemplate} right={rightToolbarTemplate} />
				<DataTable
					value={data}
					className='dt-prime'
					stripedRows
					scrollable
					scrollHeight='40rem'
					size='small'
					header={showHeader && dtHeader}
					{...expandRow}
				>
					{children}
				</DataTable>

				{(data.length === 30 || draw > 1) && (
					<Paginator first={first} rows={rows} template={templatePaginator}></Paginator>
				)}
			</Card>

			{dialogForm && (
				<Form
					dialogForm={dialogForm}
					setDialogForm={setDialogForm}
					dataEdit={dataEdit}
					setDataEdit={setDataEdit}
					refresh={refresh}
					toast={toast}
				/>
			)}
		</>
	)
}