diff --git a/public/static/images/sub/grid-btn-excel.svg b/public/static/images/sub/grid-btn-excel.svg
new file mode 100644
index 0000000..11f5beb
--- /dev/null
+++ b/public/static/images/sub/grid-btn-excel.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/static/images/sub/grid-btn-file.svg b/public/static/images/sub/grid-btn-file.svg
new file mode 100644
index 0000000..bf4edf8
--- /dev/null
+++ b/public/static/images/sub/grid-btn-file.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx
index e25cb50..f013432 100644
--- a/src/app/canvas/page.jsx
+++ b/src/app/canvas/page.jsx
@@ -130,7 +130,7 @@ export default function CanvasPage() {
{/* */}
{/* 오브젝트 배치*/}
- {/* */}
+
{/* 표시변겅 */}
{/* */}
diff --git a/src/app/management/productinfo/page.jsx b/src/app/management/productinfo/page.jsx
index 8b17283..2aec13c 100644
--- a/src/app/management/productinfo/page.jsx
+++ b/src/app/management/productinfo/page.jsx
@@ -3,6 +3,7 @@ import Image from "next/image";
import Link from 'next/link';
import Footer from '@/components/layout/Footer';
import '@/styles/contents.scss';
+import '@/styles/grid.scss';
import ProductInfoTable from "@/components/sub/management/productinfo/ProductInfoTable";
import ProductInfoBox from "@/components/sub/management/productinfo/ProductInfoBox";
diff --git a/src/components/sub/management/productinfo/ProductInfoTable.jsx b/src/components/sub/management/productinfo/ProductInfoTable.jsx
index fe00d35..55b070d 100644
--- a/src/components/sub/management/productinfo/ProductInfoTable.jsx
+++ b/src/components/sub/management/productinfo/ProductInfoTable.jsx
@@ -1,4 +1,40 @@
+'use client'
+
+import Pagination from "@/components/common/grid/Pagination";
+import QGrid from "@/components/common/grid/QGrid";
+import { useState } from "react";
+
export default function ProductInfoTable(){
+ const [gridProps, setGridProps] = useState({
+ gridData: [
+ { planNumber: "1", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
+ { planNumber: "2", orderStatus: "O", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
+ { planNumber: "3", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
+ { planNumber: "4", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
+ { planNumber: "5", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
+ ],
+ gridColumns:[
+ { headerName: "プラン番号 ", field: "planNumber", width: 100, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
+ { headerName: "発注可 ", field: "orderStatus", width: 80, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
+ { headerName: "モジュール ", field: "module", flex: 1, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }},
+ { headerName: "システム容量 ", field: "systemCapacity", width: 120, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
+ { headerName: "屋根材 ", field: "roofMaterial", width: 140, wrapText: true, autoHeight: true,cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
+ { headerName: "施工方法 ", field: "constructionMethod",cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
+ { headerName: "架台 ", field: "mountingStructure",cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" } },
+ { headerName: "パワーコンディショナー ", field: "powerConditioner", flex: 1, wrapText: true, autoHeight: true, cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }},
+ { headerName: "管理 ", field: "management", width: 200,cellStyle: {display: 'flex', justifyContent: "center", alignItems: "center" }, cellRenderer: (params) => {
+ return (
+
+
+
+
+ );
+ }},
+
+ ],
+ isPageable: true,
+ })
+
return(
* 必須入力項目
@@ -253,7 +289,12 @@ export default function ProductInfoTable(){
diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss
index 4cf9d3b..35e39be 100644
--- a/src/styles/_grid-detail.scss
+++ b/src/styles/_grid-detail.scss
@@ -61,4 +61,52 @@
margin-left: 12px;
}
}
+ &.no-cols{
+ .ag-row{
+ &:nth-child(2n){
+ background-color: #fff;
+ }
+ }
+ }
+}
+
+// grid-button
+.grid-cell-btn{
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ width: 117px;
+ margin: 0 auto;
+ .grid-btn{
+ display: block;
+ width: 100%;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ border: 1px solid #94A0AD;
+ background-color: transparent;
+ border-radius: 2px;
+ font-size: 13px;
+ color: #94A0AD;
+ font-weight: 400;
+ text-align: center;
+ span{
+ display: block;
+ margin-right: 5px;
+ &.file{
+ width: 13px;
+ height: 14px;
+ background: url(../../public/static/images/sub/grid-btn-file.svg)no-repeat center;
+ background-size: cover;
+ }
+ &.excel{
+ width: 14px;
+ height: 13px;
+ background: url(../../public/static/images/sub/grid-btn-excel.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ }
}
\ No newline at end of file