98 lines
2.1 KiB
JavaScript
98 lines
2.1 KiB
JavaScript
|
import { DataTable } from 'primereact/datatable'
|
||
|
|
import { Dropdown } from 'primereact/dropdown'
|
||
|
|
import { Paginator } from 'primereact/paginator'
|
||
|
|
import { DialogDashboard, DialogDelete } from './Dialog'
|
||
|
|
|
||
|
|
export const DatatablePrimeV2 = ({
|
||
|
|
children,
|
||
|
|
data,
|
||
|
|
loading,
|
||
|
|
sort,
|
||
|
|
first,
|
||
|
|
setLength,
|
||
|
|
totalRecords,
|
||
|
|
setPage,
|
||
|
|
setFirst,
|
||
|
|
length,
|
||
|
|
onSort,
|
||
|
|
dataDialog = { no_spp: false },
|
||
|
|
displayDialog,
|
||
|
|
setDisplayDialog,
|
||
|
|
dialogDelete = { visible: false },
|
||
|
|
setDialogDelete,
|
||
|
|
deleteTagihan,
|
||
|
|
page,
|
||
|
|
expandRow,
|
||
|
|
}) => {
|
||
|
|
const onPageChange = (event) => {
|
||
|
|
setPage(event.page)
|
||
|
|
setFirst(event.first)
|
||
|
|
}
|
||
|
|
|
||
|
|
const templatePaginator = {
|
||
|
|
layout: 'RowsPerPageDropdown FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport',
|
||
|
|
RowsPerPageDropdown: (options) => {
|
||
|
|
const dropdownOptions = [
|
||
|
|
{ label: 10, value: 10 },
|
||
|
|
{ label: 50, value: 50 },
|
||
|
|
{ label: 100, value: 100 },
|
||
|
|
{ label: 'All', value: options.totalRecords },
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dropdown
|
||
|
|
value={options.value}
|
||
|
|
options={dropdownOptions}
|
||
|
|
onChange={(e) => {
|
||
|
|
options.onChange(e)
|
||
|
|
setLength(e.value)
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
CurrentPageReport: (options) => {
|
||
|
|
return (
|
||
|
|
<span className='w-fit ml-4' style={{ color: 'var(--text-color)', userSelect: 'none', textAlign: 'center' }}>
|
||
|
|
{options.first} - {options.last} of {options.totalRecords}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<DataTable
|
||
|
|
value={data}
|
||
|
|
size='small'
|
||
|
|
className='dt-dashboard'
|
||
|
|
stripedRows
|
||
|
|
loading={loading}
|
||
|
|
sortMode='multiple'
|
||
|
|
removableSort={true}
|
||
|
|
multiSortMeta={sort}
|
||
|
|
onSort={onSort}
|
||
|
|
{...expandRow}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</DataTable>
|
||
|
|
{(data.length > 5 || page > 0) && (
|
||
|
|
<Paginator
|
||
|
|
first={first}
|
||
|
|
rows={length}
|
||
|
|
template={templatePaginator}
|
||
|
|
totalRecords={totalRecords}
|
||
|
|
onPageChange={onPageChange}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{dataDialog.no_spp && (
|
||
|
|
<DialogDashboard data={dataDialog} displayDialog={displayDialog} setDisplayDialog={setDisplayDialog} />
|
||
|
|
)}
|
||
|
|
|
||
|
|
{dialogDelete.visible === true && (
|
||
|
|
<DialogDelete data={dialogDelete} setDelete={setDialogDelete} onCallback={deleteTagihan} />
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|