Added an ID to every payment record column

src/pages/payment-record.tsx

@@ -26,7 +26,7 @@ import ReactDatePicker from "react-datepicker";
 import moment from "moment";
 import PaymentAssetManager from "@/components/PaymentAssetManager";
 import {toFixedNumber} from "@/utils/number";
-import { CSVLink } from "react-csv";
+import {CSVLink} from "react-csv";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -322,6 +322,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -338,6 +339,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -354,6 +356,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -367,6 +370,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -383,6 +387,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -396,6 +401,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -418,10 +424,12 @@ export default function PaymentRecord() {
 	const defaultColumns = [
 		columnHelper.accessor("id", {
 			header: "ID",
+			id: "id",
 			cell: (info) => info.getValue(),
 		}),
 		columnHelper.accessor("corporate", {
 			header: "Corporate",
+			id: "corporate",
 			cell: (info) => {
 				const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
 				return (
@@ -437,10 +445,12 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("date", {
 			header: "Date",
+			id: "date",
 			cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
 		}),
 		columnHelper.accessor("value", {
 			header: "Amount",
+			id: "amount",
 			cell: (info) => (
 				<span>
 					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -449,6 +459,7 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("agent", {
 			header: "Country Manager",
+			id: "agent",
 			cell: (info) => (
 				<div
 					className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
@@ -459,10 +470,12 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("agentCommission", {
 			header: "Commission",
+			id: "agentCommission",
 			cell: (info) => <>{info.getValue()}%</>,
 		}),
 		columnHelper.accessor("agentValue", {
 			header: "Commission Value",
+			id: "agentValue",
 			cell: (info) => (
 				<span>
 					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -471,6 +484,7 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("isPaid", {
 			header: "Paid",
+			id: "isPaid",
 			cell: (info) => (
 				<Checkbox
 					isChecked={info.getValue()}
@@ -549,12 +563,13 @@ export default function PaymentRecord() {
 								<Button className="max-w-[200px]" variant="outline">
 									<CSVLink
 										data={displayPayments}
-										headers={defaultColumns.filter((e) => e.header).map((e) => ({
+										headers={defaultColumns
-											label: e.header,
+											.filter((e) => e.header)
-											key: e.accessorKey,
+											.map((e) => ({
-										}))}
+												label: e.header?.toString() || "",
-										filename="payment-records.csv"
+												key: e.id || "",
-										>
+											}))}
+										filename="payment-records.csv">
 										Download CSV
 									</CSVLink>
 								</Button>