legalgo-FE-reactrouter/app/components/ui/table.tsx

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>
  )
}