表スタイルの調整

runalsn · Aug 8, 2023 · ff5c8ce · ff5c8ce
1 parent b2876ff
commit ff5c8ce
Showing 1 changed file with 18 additions and 15 deletions.
diff --git 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 (