ptb-fe/components/Main/TableSanksi.js

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

function TableSanksi({ listData, to, linkName }) {
	return (
		<div className="card b">
			<div className="card-body">
				{listData && (
					<Datatable options={{ responsive: false }}>
						<table className="table w-100">
							<thead>
								<tr>
									<th>Nomor Sanksi</th>
									<th>Keterangan Sanksi</th>
									{listData?.sanksi?.user_id.nama && <th>Dibuat Oleh</th>}
									<th>Created</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								{listData.length
									? listData.map((data) => {
											return (
												<tr key={data._id}>
													<td>{data.sanksi.no_sanksi}</td>
													<td>
														<div className="media align-items-center">
															<div className="media-body d-flex">
																<div>
																	<h4 className="m-0">{data.pt.nama}</h4>
																	<p>{data.description.length > 30 ? data.description.substring(0, 30) + "..." : data.description}</p>
																</div>
															</div>
														</div>
													</td>
													{data.sanksi.user_id?.nama && <td>{data.sanksi.user_id.nama}</td>}
													<td>{moment(data.sanksi.createdAt).fromNow()}</td>
													<td>
														<div className="ml-auto">
															<Link
																href={{
																	pathname: to,
																	query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
																}}
															>
																<Button color="primary" size="sm">
																	{linkName}
																</Button>
															</Link>
														</div>
													</td>
												</tr>
											);
									  })
									: ""}
							</tbody>
						</table>
					</Datatable>
				)}
			</div>
		</div>
	);
}

export default TableSanksi;