@mycrm-ui/react-table

columns, data, rowKey만으로 기본 테이블을 렌더링합니다.

단일 정렬과 멀티 정렬을 모두 지원합니다.

selection 옵션으로 체크박스 행 선택을 활성화합니다. 헤더의 체크박스로 전체 선택/해제가 가능합니다.

컬럼 단위 필터를 제공합니다. filterType으로 텍스트, 셀렉트, 날짜 범위, 숫자 범위 필터를 선택할 수 있습니다.

대용량 데이터를 위한 가상 스크롤과 무한 로딩을 지원합니다.

컬럼 숨김, 순서 변경, 고정(pin), 리사이즈를 지원합니다. 헤더 메뉴에서 컬럼 관리 모달을 열고, 드래그로 순서를 변경할 수 있습니다.

ExpandDef로 그룹(부모)과 자식 행을 구분하여 계층형 테이블을 구성합니다. 자식 행 선택, 삭제, 아이콘 커스터마이징을 지원하며 childExpandDef로 다단계 중첩도 가능합니다.

tooltip을 켜면 셀 호버 시 값이 툴팁으로 표시됩니다.copyable을 켜면 copyable: true인 열에서 우클릭 컨텍스트 메뉴가 열립니다.onCellCopy로 복사 이벤트를 수신하고, cellContextMenuItems로 메뉴 항목을 추가할 수 있습니다.

headerMenuIcon을 지정하면 헤더 우상단에 아이콘 버튼이 표시됩니다. 클릭 시 headerMenuItems 드롭다운이 열립니다. columnManager를 함께 설정하면 컬럼 관리 항목이 자동으로 추가됩니다.

classNames prop으로 모든 시각적 요소에 className 슬롯이 제공됩니다. 아래에서 테마를 선택해 차이를 확인하세요.

<Table
  columns={columns}
  data={data}
  rowKey={(row) => String(row.id)}
  // ...기타 props

  classNames={{
    table: "w-full text-sm",
    thead: "bg-surface-container-low text-on-surface-variant",
    th: "px-4 py-3 text-left font-semibold",
    tr: "border-t border-outline-variant/20 hover:bg-surface-container-lowest transition-colors",
    td: "px-4 py-3 text-on-surface",
  }}
/>

ColumnDef의 전체 옵션 목록입니다.

const columns: ColumnDef<User>[] = [
  {
    key: 'name',
    label: '이름',
    render: (row) => row.name,
    width: '200px',
    minWidth: 80,
    sortable: true,
    filterType: 'text',
    filterOptions: [
      { label: '관리자', value: 'admin' },
    ],
    filterPlaceholder: '이름 검색...',
    editable: true,
    insertable: true,
    align: 'left',
    copyable: true,
    validate: (value) => value.trim() ? null : '필수 항목입니다.',
    renderEditCell: (props) => <CustomInput {...props} />,
    onValidationError: (error) => console.warn(error),
  },
]