components/Tables/ViewTable.tsx

import { useSpeedLimitStore } from '@Contexts'
import { RvTable } from '@Shared'
import { useSpeedLimitReviewTable } from '../../hooks'
import {
  actionCreatorsProps,
  ActionTypes,
  speedLimitItemType,
  speedLimitStates
} from '../../types'

interface ViewTableType {
  state: speedLimitStates
  actions: actionCreatorsProps
  handleRowClick: (item: speedLimitItemType, index: number, cellId: any) => void
}

const ViewTable = ({ state, actions, handleRowClick }: ViewTableType) => {
  const speedLimitData = useSpeedLimitStore.use.speedLimits()
  const tempSpeedLimits = useSpeedLimitStore.use.tempSpeedLimits()
  const { fields, customCells, data, loading } = useSpeedLimitReviewTable(
    state,
    actions
  )

  const { actionType, direction, routeId } = state

  return (
    <div>
      <div className="mb-6 border">
        <table className="w-full ">
          <thead>
            <tr>
              {fields.map(field => (
                <th
                  key={field.key}
                  className="bg-white w-full h-12 text-black text-center p-[12px]"
                  style={{ width: field._style.width }}
                >
                  <span
                  // style={{ right: field._style.right }}
                  >
                    {field.label}
                  </span>
                </th>
              ))}
            </tr>
          </thead>
        </table>
        <div className="max-h-[340px] overflow-y-auto custom-scrollbar">
          <RvTable
            className="mb-0"
            items={
              actionType === ActionTypes.View ? speedLimitData : tempSpeedLimits
            }
            itemsPerPage={
              tempSpeedLimits ? tempSpeedLimits?.length : speedLimitData?.length
            }
            itemsPerPageSelect={false}
            fields={fields}
            sorter={false}
            striped={false}
            pagination={false}
            onRowClick={(item, index, cellId) => {
              handleRowClick(item, index, cellId)
            }}
            clickableRows
            customizedCells={customCells}
            sorterValue={undefined}
            activePage={parseInt(state.page) ?? 1}
          />
        </div>
      </div>
    </div>
  )
}
export default ViewTable