스타일과 테마

comins-table@0.2.2

Table 전체 스타일은 className, style, theme로 제어합니다. Row 스타일은 rowProps, column/cell 스타일은 columns[].cell.props로 둡니다.

<CominsTable
  className="example-table"
  columns={[
    {
      field: "name",
      header: { props: { className: "header-cell", title: "Name" } },
      label: "Name",
      cell: {
        props: {
          className: ({ row }) => (row.data.role === "Owner" ? "cell-owner" : undefined),
          style: { textAlign: "left" },
        },
      },
    },
  ]}
  data={data}
  getRowId={(row) => row.id}
  rowProps={{
    className: (row) => (row.role === "Owner" ? "row-owner" : undefined),
    disabled: (row) => row.locked === true,
    style: (row) => (row.active ? { background: "#2f0f5f" } : undefined),
  }}
  theme={{ density: "compact" }}
/>

rowProps.disabled는 해당 row의 row/cell interaction을 모두 차단합니다. rowProps.style.background 또는 backgroundColor를 지정하면 odd/even row 배경보다 우선해 실제 cell 배경까지 전달됩니다. 스타일링 예제는 COMINS 기본 mint 톤과 구분되도록 보라색 배경, 노란색 텍스트, serif/monospace font, 두꺼운 border를 함께 사용합니다.

.my-table .comins-table__td.cell-role-owner {
  background: #581c87;
  border-left: 4px solid #fbbf24;
  color: #fef3c7;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
}

.my-table .row-owner > .comins-table__td {
  border-left: 4px solid #f43f5e;
  color: #fef08a;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  text-transform: uppercase;
}

Theme

comins-table/styles.css는 기본 table shell과 theme override용 CSS custom properties를 포함합니다. 1차 Theme API는 새 preset prop을 추가하지 않고 기존 theme.className, theme.style, theme.density를 사용합니다.

<CominsTable
  columns={columns}
  data={rows}
  rowHeight={32}
  theme={{
    className: "comins-table-theme--dark",
    style: {
      "--comins-table-row-height": "32px",
    } as React.CSSProperties,
  }}
  virtualized
/>

배포 CSS는 아래 샘플 theme class를 제공합니다.

comins-table-theme--basic
comins-table-theme--dark
comins-table-theme--skyblue
comins-table-theme--mint
comins-table-theme--gray
comins-table-theme--orange

주요 override 변수는 아래와 같습니다.

--comins-table-accent
--comins-table-accent-foreground
--comins-table-accent-soft
--comins-table-background
--comins-table-border
--comins-table-cell-border
--comins-table-foreground
--comins-table-group-row-background
--comins-table-group-row-color
--comins-table-header-background
--comins-table-header-border
--comins-table-header-color
--comins-table-header-split-border
--comins-table-row-border
--comins-table-row-disabled-background
--comins-table-row-disabled-color
--comins-table-row-even-background
--comins-table-row-odd-background
--comins-table-row-selected-background
--comins-table-scrollbar-corner
--comins-table-scrollbar-thumb
--comins-table-scrollbar-track
--comins-table-range-background
--comins-table-focus

tr 높이는 virtualized row window 계산과 직접 연결됩니다. 동일한 고정 높이로 가상화할 때는 CSS의 --comins-table-row-height, --comins-table-cell-height와 rowHeight prop을 맞춥니다. Row별 숫자 높이나 자동 높이는 getRowHeight로 지정하며 CSS 높이만으로 가상 배치를 변경하지 않습니다. Row 자동 높이를 참고합니다.

rowProps.disabled가 true인 row는 --comins-table-row-disabled-background, --comins-table-row-disabled-color로 기본 비활성 스타일을 받습니다. Row/cell별 커스텀 class나 style을 추가할 수 있지만, 비활성 row가 조작 불가 상태임을 시각적으로 구분할 수 있어야 합니다.

Header Sort는 펼침/접힘과 같은 계열의 15px Chevron을 24px 아이콘 버튼에 사용합니다. Header/Row Group 원본은 중립색 점선 Placeholder, 유효 대상은 accent, 무효 대상은 danger 토큰을 사용합니다. 이동 미리보기는 두 테마 모두 surface와 foreground를 조합합니다. 모션 감소 설정에서는 Sort와 Group 펼침 전환을 끕니다. 상태와 토큰 기준은 패키지의 DESIGN.md를 참고합니다.

실행 가능한 대표 예제 · 배포 기준 원본 가이드