React-antdesign table 컬럼 높이 값 바꾸는 방법

import "../styles.css";

export const dataSource = [
  {
    id: "1",
    key: "1",
    holdNumber: 1,
    grain: 22.31,
    bale: 33.213,
    totalHoldHatches: 3,
    width: 100,
    hatches: [
      { hatchLength: 7.02, hatchWidth: 2.33 },
      { hatchLength: 6.931, hatchWidth: 6.11 },
      { hatchLength: 22.1, hatchWidth: 5.33 }
    ]
  },
  {
    id: "2",
    key: "2",
    holdNumber: 3,
    grain: 41.233,
    bale: 42.11,
    totalHoldHatches: 2,
    hatches: [
      { hatchLength: 7.31, hatchWidth: 8.092 },
      { hatchLength: 9.92, hatchWidth: 6.53 }
    ]
  }
];

export const columns = [
  {
    title: "Hold",
    dataIndex: "holdNumber",
    colSpan: "1px",
    columnWidth: "10px",
    fontSize: "100px"
  },
  {
    title: "Capacities",
    width: "10px",
    children: [
      { title: "Grain", dataIndex: "grain" },
      {
        title: "Bale",
        dataIndex: "bale"
      }
    ]
  },
  {
    title: "Hathes",
    width: "10px",
    children: [
      { title: "Quantity", dataIndex: "totalHoldHatches" },
      ...dataSource
        .sort(
          (hatch1, hatch2) => hatch2.totalHoldHatches - hatch1.totalHoldHatches
        )[0]
        .hatches.map((hatchItem, hatchItemIndex) =>
          Object.keys(hatchItem).map((hatchDimension) => ({
            title: `hatches[${hatchItemIndex + 1}].${hatchDimension}`,
            dataIndex: `hatches[${hatchItemIndex}].${hatchDimension}`
          }))
        )
        .flat()
    ]
  },
  {
    title: "Hold",
    width: "10px",
    dataIndex: "holdNumber",
    fixed: "right"
  }
];

console.log(columns);

위 코드는 테이블에 들어가는 row data들이다.

row들을 직접적으로 변화시키려면 css를 바꿔줘야하는데 이 코드가 있는 곳에 css 파일을 import하고 antd의 className을 찾아서 변화를 주면 된다.

아래는 table의 각 부분 클레스네임이다.

// Table 헤더들 클레스네임
.ant-table-thead > tr > th {
  height: 10px;
  padding: 4px;
}
//Table 클레스네임
.ant-table {
  font-size: 9px;
}
//Table child?들 클레스네임
.ant-table-tbody > tr > td {
  height: 10px;
  padding: 4px;
}