From ff5c8ce7eb409bf259367a70880e1859181990e6 Mon Sep 17 00:00:00 2001
From: ics-nishihara <nishihara@ics-web.jp>
Date: Tue, 8 Aug 2023 21:11:40 +0900
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E3=81=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DataTable/DataTable.tsx | 33 ++++++++++++++++--------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/components/DataTable/DataTable.tsx b/components/DataTable/DataTable.tsx
index fd821e3..1295565 100644
--- a/components/DataTable/DataTable.tsx
+++ b/components/DataTable/DataTable.tsx
@@ -13,21 +13,21 @@ type Props = {
 };
 
 const DataTable = ({ prefPopulationList }: Props) => {
-const columns: GridColDef[] = [{field: "prefName",
-headerName: "都道府県",width: 240,sortComparator: sortPrefId,
-},{
-field: "population",headerName: "人口（人）",
-width: 180,sortComparator: (v1, v2) => {
-  return commaToNum(v1) - commaToNum(v2);
-},
-},{  field: "populationDensity",   headerName: "人口密度（人/km²）",
-      width: 180,},{field: "populationIncrease", headerName: "5年間の人口増減数（人）",width: 200,
-sortComparator: (v1, v2) => {
-  return commaToNum(v1) - commaToNum(v2);
-},  },
-    {
+  const columns: GridColDef[] = [{field: "prefName",headerName: "都道府県",width: 240,sortComparator: sortPrefId,},
+  {field: "population",headerName: "人口（人）",headerAlign: "right",align: "right",width: 180,sortComparator: (v1, v2) => {
+        return commaToNum(v1) - commaToNum(v2);},
+    },
+{field: "populationDensity",headerName: "人口密度（人/km²）",headerAlign: "right",align: "right",width: 180,
+    },
+{ field: "populationIncrease",headerName: "5年間の人口増減数（人）",
+      headerAlign: "right",align: "right",
+      width: 200,sortComparator: (v1, v2) => {
+        return commaToNum(v1) - commaToNum(v2);},
+    },{
       field: "populationIncreaseRatio",
-      headerName: "5年間の人口増減率（%）",
+ headerName: "5年間の人口増減率（%）",
+  headerAlign: "right",
+    align: "right",
       width: 200,
     },
   ];
@@ -54,8 +54,11 @@ sortComparator: (v1, v2) => {
     }
   );
   const style = css`
-    widht: 100%;
+    width: 100%;
     height: 600px;
+    .MuiDataGrid-columnHeaders {
+      background-color: rgba(66, 165, 245, 0.12);
+    }
   `;
 
   return (