Files
road-monitoring-ui/src/app/(modules)/segment/components/SegmentTable.tsx

64 lines
1.3 KiB
TypeScript

'use client';
import type { ColumnDef } from '@tanstack/react-table';
import { Edit3, Trash2 } from 'lucide-react';
import { DataTable } from '@/components/data-table';
import type { Chainage } from '@/types';
interface SegmentTableProps {
columns: ColumnDef<Chainage>[];
segments: Chainage[];
isLoading: boolean;
skip: number;
limit: number;
total: number;
onPageChange: (skip: number) => void;
onLimitChange: (limit: number) => void;
onEdit: (segment: Chainage) => void;
onDelete: (segment: Chainage) => void;
}
export function SegmentTable({
columns,
segments,
isLoading,
skip,
limit,
total,
onPageChange,
onLimitChange,
onEdit,
onDelete,
}: SegmentTableProps) {
return (
<DataTable
title="Segments"
data={segments}
columns={columns}
actions={[
{
label: 'Edit',
icon: <Edit3 className="size-4" />,
onClick: onEdit,
},
{
label: 'Delete',
icon: <Trash2 className="size-4" />,
className: 'text-destructive',
onClick: onDelete,
},
]}
isLoading={isLoading}
emptyTitle="No segments found."
pagination={{
skip,
limit,
totalItems: total,
onPageChange,
onLimitChange,
}}
/>
);
}