components/Tables/ViewTable.tsx
src/ui/components/widgets/SpeedLimitSection/components/Tables/ViewTable.tsxunknown
typescript
6 months ago
2.3 kB
6
Indexable
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
Editor is loading...
Leave a Comment