61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import DT from 'datatables.net-dt'
|
|
import DataTable, { type DataTableProps } from 'datatables.net-react'
|
|
import React from 'react'
|
|
|
|
type UiTableProperties = {
|
|
title: string
|
|
} & DataTableProps
|
|
|
|
const renderPaginationIcon = (icon: string) => {
|
|
return `<div class="pagination-icon">${icon}</div>`
|
|
}
|
|
|
|
export const UiTable: React.FC<UiTableProperties> = ({
|
|
data,
|
|
columns,
|
|
slots,
|
|
options,
|
|
title,
|
|
}) => {
|
|
DataTable.use(DT)
|
|
return (
|
|
<div className="rounded-lg bg-white p-5 shadow-md">
|
|
<h3 className="py-1 font-semibold text-[#4C5CA0]">{title}</h3>
|
|
<div className="rounded-lg">
|
|
<DataTable
|
|
className="cell-border text-sm"
|
|
data={data}
|
|
columns={columns}
|
|
slots={slots}
|
|
options={{
|
|
headerCallback: (thead) => {
|
|
thead.classList.add('text-left')
|
|
},
|
|
paging: true,
|
|
searching: false,
|
|
ordering: true,
|
|
info: false,
|
|
language: {
|
|
paginate: {
|
|
first: renderPaginationIcon(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 "><path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" /></svg>`,
|
|
),
|
|
previous: renderPaginationIcon(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /></svg>`,
|
|
),
|
|
next: renderPaginationIcon(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>`,
|
|
),
|
|
last: renderPaginationIcon(
|
|
`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"> <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" /> </svg>`,
|
|
),
|
|
},
|
|
},
|
|
...options,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|