Notes

import React, { useState, useEffect, useRef } from "react";

import { Tree } from "primereact/tree";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { Row } from "primereact/row";
import { Rating } from "primereact/rating";
import { Button } from "primereact/button";

import "primeicons/primeicons.css";
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.css";

const Data = [
{
id: "1009",
code: "cm230f032",
name: "Gaming Set",
description: "Product Description",
image: "gaming-set.jpg",
price: 299,
category: "Electronics",
quantity: 63,
inventoryStatus: "INSTOCK",
rating: 3,
children: [
{
id: "10000",
productCode: "cm230f032",
date: "2020-06-24",
amount: 299,
quantity: 1,
customer: "Kadeem Mujtaba",
status: "PENDING",
},
],
},
];

export default function tableOne() {
const [data, setData] = useState(Data);
const [expandedRows, setExpandedRows] = useState([]);
// const [expandedRows, setExpandedRows] = useState([]);

// const expandAll = () => {
// let _expandedRows = {};
// data.forEach((p) => (_expandedRows[`${p.id}`] = true));

// setExpandedRows(_expandedRows);
// };

// const collapseAll = () => {
// setExpandedRows(null);
// };

const formatCurrency = (value) => {
return value.toLocaleString("en-US", {
style: "currency",
currency: "USD",
});
};

const amountBodyTemplate = (rowData) => {
return formatCurrency(rowData.amount);
};

const statusOrderBodyTemplate = (rowData) => {
return (
<span className={`order-badge order-${rowData.status.toLowerCase()}`}>
{rowData.status}
</span>
);
};

const searchBodyTemplate = () => {
return <Button icon="pi pi-search" />;
};

const imageBodyTemplate = (rowData) => {
return (
<img
src={`images/product/${rowData.image}`}
onError={(e) =>
(e.target.src =
"https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png")
}
alt={rowData.image}
className="product-image"
/>
);
};

const priceBodyTemplate = (rowData) => {
return formatCurrency(rowData.price);
};

const ratingBodyTemplate = (rowData) => {
return <Rating value={rowData.rating} readOnly cancel={false} />;
};

const statusBodyTemplate = (rowData) => {
return (
<span
className={`product-badge status-${rowData.inventoryStatus.toLowerCase()}`}
>
{rowData.inventoryStatus}
</span>
);
};

const rowExpansionTemplate = (data) => {
return (
<div className="orders-subtable">
<h5>Orders for {data.name}</h5>
<DataTable value={data.orders} responsiveLayout="scroll">
<Column field="id" header="Id" sortable></Column>
<Column field="customer" header="Customer" sortable></Column>
<Column field="date" header="Date" sortable></Column>
<Column
field="amount"
header="Amount"
body={amountBodyTemplate}
sortable
></Column>
<Column
field="status"
header="Status"
body={statusOrderBodyTemplate}
sortable
></Column>
<Column
headerStyle={{ width: "4rem" }}
body={searchBodyTemplate}
></Column>
</DataTable>
</div>
);
};

// const header = (
// <div className="table-header-container">
// <Button
// icon="pi pi-plus"
// label="Expand All"
// onClick={expandAll}
// className="mr-2"
// />
// <Button icon="pi pi-minus" label="Collapse All" onClick={collapseAll} />
// </div>
// );
// -------------------------------*************************--------------------------------
const tableAll = () => {
return (
<div className="datatable-rowexpansion-demo">
<div className="card">
<DataTable
value={data}
expandedRows={expandedRows}
onRowToggle={(e) => setExpandedRows(e.data)}
responsiveLayout="scroll"
rowExpansionTemplate={rowExpansionTemplate}
dataKey="id"
// header={header}
>
<Column expander style={{ width: "3em" }} />
<Column field="name" header="Name" sortable />
<Column header="Image" body={imageBodyTemplate} />
<Column
field="price"
header="Price"
sortable
body={priceBodyTemplate}
/>
<Column field="category" header="Category" sortable />
<Column
field="rating"
header="Reviews"
sortable
body={ratingBodyTemplate}
/>
<Column
field="inventoryStatus"
header="Status"
sortable
body={statusBodyTemplate}
/>
</DataTable>
</div>
</div>
);
};

// Хүснэгтийг харуулах функц
const nodeTemplate = (data) => {
let name = <b>{data.name}</b>;

return (
<div>
<div className="treeviewdiv">
<div className="textcontent">
<span className="treeName">{name}</span>
</div>
{data.count && (
<div className="countcontainer">
<span className="treeCount e-badge e-badge-primary">
{data.count}
</span>
</div>
)}
</div>
</div>
);
};

const headerTemplate = () => {
return (
<div>
<span className="text-2xl font-bold">dadganagsadgme</span>
</div>
);
};

return (
<div>
<div className="card">
<Tree
value={data}
nodeTemplate={nodeTemplate}
header={headerTemplate}
children={tableAll}
/>
</div>
</div>
);
}