테이블 헤더 두줄 처리

src/components/flight/FlightApprovalsTable.js

@@ -60,7 +60,13 @@ export default function FlightApprovalsTable(props) {
 
   const columns = [
     {
-      name: '신청번호',
+      name: (
+        <div className='custom-header-cell'>
+          신청
+          <br />
+          번호
+        </div>
+      ),
       selector: row => row.applyNo,
       center: true,
       cell: row => {
@@ -68,7 +74,13 @@ export default function FlightApprovalsTable(props) {
       }
     },
     {
-      name: '신청일자',
+      name: (
+        <div className='custom-header-cell'>
+          신청
+          <br />
+          일자
+        </div>
+      ),
       selector: row => row.applyDt,
       center: true,
       cell: row => {
@@ -76,7 +88,13 @@ export default function FlightApprovalsTable(props) {
       }
     },
     {
-      name: '비행구역',
+      name: (
+        <div className='custom-header-cell'>
+          비행
+          <br />
+          구역
+        </div>
+      ),
       selector: row => row.areaList[0].zoneNo,
       center: true,
       sortable: true,
@@ -86,7 +104,13 @@ export default function FlightApprovalsTable(props) {
       }
     },
     {
-      name: '중심좌표(위도/경도)',
+      name: (
+        <div className='custom-header-cell'>
+          중심좌표
+          <br />
+          (위도/경도)
+        </div>
+      ),
       selector: row => row.areaList[0].lat,
       center: true,
       width: '180px',
@@ -98,7 +122,13 @@ export default function FlightApprovalsTable(props) {
       }
     },
     {
-      name: '반경(m)',
+      name: (
+        <div className='custom-header-cell'>
+          반경
+          <br />
+          (m)
+        </div>
+      ),
       selector: row => row.areaList[0].bufferZone,
       center: true,
       sortable: true,
@@ -107,7 +137,13 @@ export default function FlightApprovalsTable(props) {
       }
     },
     {
-      name: '고도(m)',
+      name: (
+        <div className='custom-header-cell'>
+          고도
+          <br />
+          (m)
+        </div>
+      ),
       selector: row => row.areaList[0].fltElev,
       center: true,
 
@@ -117,7 +153,13 @@ export default function FlightApprovalsTable(props) {
       }
     },
     {
-      name: '검토결과',
+      name: (
+        <div className='custom-header-cell'>
+          검토
+          <br />
+          결과
+        </div>
+      ),
       selector: row => row.areaList[0].approvalCd,
       center: true,
 
@@ -130,7 +172,6 @@ export default function FlightApprovalsTable(props) {
           : '미승인';
       }
     },
-
     {
       name: '더보기',
       selector: row => row.areaList,
@@ -353,7 +394,6 @@ export default function FlightApprovalsTable(props) {
                 data={laancAprvList}
                 columns={columns}
                 pagination={true}
-                // customStyles={customStyles}
                 conditionalRowStyles={conditionalRowStyles}
                 FlightInfoComponent={FlightInfoComponent}
                 handleRowClick={handleRowClick}