ptb-fe/components/Main/TableLaporan.js

import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";

function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {
	return (
		<div className="card b">
			<div className="card-body">
				{listData && (
					<Datatable options={{ responsive: false }}>
						<table className="table w-100">
							<thead>
								<tr>
									<th>No.Laporan</th>
									<th>Deskripsi Laporan</th>
									{status ? <th>Status</th> : ""}
									{!noBy && <th>Dibuat Oleh</th>}
									<th>Created</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								{listData.map((data) => {
									return (
										<tr key={data._id}>
											<td>{data._number}</td>
											<td className="text-nowrap">
												<div className="media align-items-center">
													<div className="media-body d-flex">
														<div>
															<h4 className="m-0">{data.pt.nama}</h4>
															<p>{data.description}</p>
														</div>
													</div>
												</div>
											</td>
											{status ? (
												<td>
													<div className="badge badge-info">{data.status}</div>
												</td>
											) : (
												""
											)}
											{!noBy && <td>{data.user_id.isPrivate ? "" : data.user_id.nama}</td>}
											<td>{moment(data.createdAt).fromNow()}</td>
											<td>
												<div className="ml-auto">
													<Link
														href={{
															pathname: to,
															query: { ptId: data.pt_id, number: data._number },
														}}
													>
														<Button color="primary" size="sm">
															{linkName}
														</Button>
													</Link>
												</div>
											</td>
										</tr>
									);
								})}
							</tbody>
						</table>
					</Datatable>
				)}
			</div>
		</div>
	);
}

export default TableLaporan;