rex-web-table

1. Introduction

If you need documentation in English, please refer to README(en).md.

• tanstack/react-table을 활용해 구현된 테이블 라이브러리입니다.
• React 기반의 프로젝트에서 활용이 가능합니다.
• 테이블 column/data 설정, pagination, 테이블 데이터 커스텀 기능을 제공합니다.
• Headless UI로 제작되어 스타일링 커스텀이 가능합니다.

2. Quick Start

Installation

• using npm : npm install rex-web-table
• using yarn : yarn add rex-web-table

CSS Import

/* TableBody의 row 및 subRow의 hoverColor를 올바르게 적용하려면, CSS import가 필요합니다. 
   hoverColor를 제외한 다른 스타일 (예: padding, margin, border 등)은 CSS import 없이도 정상적으로 작동합니다. */
import "rex-web-table/dist/index.css";

Example

const Table = () => {
  // 1. 테이블의 각 행에 대한 데이터 타입 정의
  interface Example {
    no: number;
    name: string;
  }

  // 2. 테이블의 열 구조 정의
  const columns: ColumnDef<Example>[] = [
    {
      accessorKey: "no", // data 와 매핑되는 key
      header: "No.", // 열 제목
      size: 10, // 열 크기 (옵션)
    },
    {
      accessorKey: "name",
      header: "Name", // 열 제목
      size: 90,
    },
  ];

  // 3. 테이블에 표시할 데이터 정의
  const data: Array<Example> = [
    {
      no: 1,
      name: "kim",
    },
    {
      no: 2,
      name: "park",
    },
  ];

  // 4. useTable 훅 호출하여 테이블, 페이지네이션 데이터 생성
  const { table, pagination, setPagination, totalPageNum } = useTable({
    data, // 테이블 데이터
    columns, // 테이블 열
    isPagination: true, // 페이지네이션 적용
  });

  // 5. 제공된 컴포넌트 (TableProvider, TableHeader, TableBody, TableFooter)를 사용하여 테이블 렌더링
  return (
    <div>
      <TableProvider>
        <TableHeader table={table} /> {/* 테이블 헤더 렌더링 */}
        <TableBody table={table} /> {/* 테이블 본문 렌더링 */}
      </TableProvider>

      {/* 페이지네이션 컨트롤을 포함한 푸터 렌더링 */}
      <TableFooter
        pagination={pagination}
        setPagination={setPagination}
        totalPageNum={totalPageNum}
      />
    </div>
  );
};

export default Table;

3. API Reference

3.1 TableProvider

• TableHeader, TableBody 를 감싸는 Provider로, 각 컴포넌트에 props를 전달하는 역할을 수행합니다.

  Props	Type	Explain	Required
  useParentRowUi	boolean	SubRow를 활용할 때 부모 Row의 UI를 그대로 상속받아 SubRow를 생성할지 여부를 결정합니다. true일 경우 부모의 UI를 상속받습니다.	optional
  SubRowComponent	ReactNode	SubRow 커스텀이 필요할 경우, 직접 컴포넌트를 전달하여 활용합니다.	optional
  subRowContents	Array<object[]>	SubRow 컴포넌트에서 활용되는 데이터입니다.	optional
  rowClickEvent	function	Table의 행을 클릭했을 때 실행되는 함수입니다.	optional
  cellClickEvent	function	Table의 각 셀을 클릭했을 때 실행되는 함수입니다.	optional
  subRowClickEvent	function	Sub Row의 행을 클릭했을 때 실행되는 함수입니다. useParentRowUi가 true일 때만 작동합니다.	optional
  subRowCellClickEvent	function	Sub Row의 각 셀을 클릭했을 때 실행되는 함수입니다. useParentRowUi가 true일 때만 작동합니다.	optional
  borderLeftNone	boolean	Table border 중 left 표시 여부 left nav bar와 함께 활용 시 border 겹치는 상황에서 활용	optional
  borderTopNone	boolean	Table border 중 top 표시 여부 Top nav bar와 함께 활용 시 border 겹치는 상황에서 활용	optional

/** 서브 행에서 사용할 데이터를 정의합니다.
각 인덱스는 각 부모 행에 대응하는 서브 행의 데이터를 나타냅니다. **/
const subRowData: Object[] = [
  [
    {
      no: 1,
      name: "kim", // 첫 번째 서브 행의 첫 번째 항목
    },
    {
      no: 2,
      name: "park", // 첫 번째 서브 행의 두 번째 항목
    },
  ],
  [
    {
      no: 1,
      name: "lee", // 두 번째 서브 행의 첫 번째 항목
    },
    {
      no: 2,
      name: "heo", // 두 번째 서브 행의 두 번째 항목
    },
  ],
];

// useSubRowContents 훅을 호출하여 서브 행으로 설정할 상태와 상태 관리 함수를 가져옵니다.
const { subRowContents } = useSubRowContents(subRowData);

return (
  <TableProvider
    useParentRowUi={true} // 부모 행의 UI를 서브 행에 상속받도록 설정
    subRowContents={subRowContents} // 서브 행에서 사용할 데이터를 전달
    borderLeftNone={true} // 왼쪽 테두리 표시 여부 설정
    borderTopNone={true} // 상단 테두리 표시 여부 설정
  >
    <TableHeader table={table} /> // 테이블 헤더 컴포넌트 렌더링
    <TableBody table={table} /> // 테이블 바디 컴포넌트 렌더링
  </TableProvider>
);

• SubRowComponent clickEvent 의 매개변수는 아래와 같습니다
  

  • SubRowComponent

    Params	Type	Explain	Required
    contents	object[]	TableProvider에서 subRowContents props 로 전달한 데이터	optional

  • rowClickEvent와 subRowClickEvent

    Params	Type	Explain	Required
    rowIndex	number	클릭한 행의 순서	optional
    e	MouseEvent	클릭 이벤트 객체	optional

  • cellClickEvent와 subRowCellClickEvent

    Params	Type	Explain	Required
    rowIndex	number	클릭한 셀이 속한 행의 순서	optional
    cellIndex	number	클릭한 셀의 순서	optional
    e	MouseEvent	클릭 이벤트 객체	optional

/* 1. 커스터 서브 행 컴포넌트 정의 */
const SubRowComponent = ({ contents }: { contents: Array<object> }) => {
  // 서브 행의 UI를 커스터마이즈하여 반환합니다.
  return; // UI 커스텀 로직을 여기에 작성합니다.
};

return (
  <TableProvider
    SubRowComponent={SubRowComponent} // 커스텀 서브 행 컴포넌트를 전달합니다.
    subRowContents={subRowContents} // 서브 행에 사용할 데이터를 전달합니다.
  >
    <TableHeader table={table} />
    <TableBody table={table} />
  </TableProvider>
);

/* 2. 클릭 이벤트 핸들러 정의 */

// 행 클릭 이벤트 핸들러
const handleClickRow = ({ rowIndex, e }: RowClickEventParam) => {
  // 클릭한 행의 인덱스와 이벤트 객체를 활용하여 로직을 작성합니다.
  /* 내부에서 rowIndex, e 활용 및 기타 로직 작성하여 이벤트 핸들러 생성 */
};

// 셀 클릭 이벤트 핸들러
const handleClickCell = ({ cellIndex, rowIndex, e }: CellClickEventParam) => {
  // 클릭한 셀의 인덱스, 행 인덱스 및 이벤트 객체를 활용하여 로직을 작성합니다.
  /* 내부에서 cellIndex, rowIndex, e 활용 및 기타 로직 작성하여 이벤트 핸들러 생성 */
};

/*
  * 이벤트 핸들러에서 매개변수 활용 예시
    1. rowIndex, cellIndex: 특정 행 또는 열에서 작동하는 로직을 작성할 때 사용합니다.
       예) 두 번째 열인 'name' column의 셀을 클릭했을 때 작동하는 이벤트가 필요할 경우:
       if(cellIndex === 1) { * 로직 작성 * }

    2. e: 특정 클릭 이벤트에 대한 이벤트 객체를 활용해야 할 때 사용합니다.
       예) 특정 셀을 클릭했을 때, row 이벤트 핸들러로 버블링이 발생하지 않도록 하려면:
       e.stopPropagation(); // 이벤트 버블링을 방지합니다.

  ** 서브 행/셀 클릭 이벤트도 동일한 방식으로 활용됩니다.

*/

return (
  <TableProvider
    useParentRowUi={true} // 부모 행의 UI를 서브 행에 상속받도록 설정합니다.
    subRowContents={subRowContents} // 서브 행에 사용할 데이터를 전달합니다.
    rowClickEvent={handleClickRow} // 행 클릭 이벤트 핸들러를 전달합니다.
    cellClickEvent={handleClickCell} // 셀 클릭 이벤트 핸들러를 전달합니다.
  >
    <TableHeader table={table} />
    <TableBody table={table} />
  </TableProvider>
);

3.2 TableHeader

• 테이블 열 column 제목을 렌더링하는 컴포넌트입니다.
• header option 을 통해 layer, rowSpan, colSpan 을 제어할 수 있습니다.
• 컴포넌트 호출 시 전달해야 하는 props는 아래와 같습니다.

  Props	Type	Explain	Required
  table	Table<TData>	useTable 훅이 반환하는 테이블 데이터 인스턴스	required
  style	CSSProperties	inline Style을 통해 CSS 속성을 설정	optional
  headerOption	HeaderOptionType	Header 렌더링 관련 세부 속성 설정	optional

• headerOption의 type은 아래와 같습니다.

  Property	Type	Explain
  accessorKey	string	header와 header option을 매핑하는 key 값
  layer	number	header가 몇 번째 줄에서 시작할지 결정하는 값
  rowSpan	number	설정한 layer를 기준으로 header가 차지할 높이를 결정하는 값
  colSpan	number	header가 차지할 너비를 결정하는 값

// Header 옵션 타입 정의
const headerOption: HeaderOptionType[] = [
  { accessorKey: "no", layer: 1, colSpan: 1, rowSpan: 1 }, // 'no' 열에 대한 옵션 설정
  { accessorKey: "name", layer: 1, colSpan: 1, rowSpan: 1 }, // 'name' 열에 대한 옵션 설정
];

// TableHeader 컴포넌트 호출
<TableHeader
  table={table} // useTable 훅에서 반환된 테이블 데이터 인스턴스
  headerOption={headerOption} // 각 열의 렌더링 관련 옵션을 전달
  style={{
    fontSize: "14px", // CSS 속성 설정
    padding: "4px", // CSS 속성 설정
    border: "1px solid black", // CSS 속성 설정
    backgroundColor: "darkgray", // CSS 속성 설정
  }}
/>;

3.3 TableBody

• 실제 테이블 데이터를 렌더링하는 컴포넌트로, 각 행 TableBodyRow와 이를 구성하는 셀 TableBodyCell로 구성되어 있습니다.
• 중요: row와 subRow의 hoverColor 스타일을 적용하려면 별도로 CSS import가 필요합니다. hoverColor 외의 다른 스타일은 CSS import 없이도 정상적으로 작동합니다.
• 컴포넌트 호출 시 전달해야 하는 props는 아래와 같습니다.

Props	Type	Explain	Required
table	Table<TData>	useTable 훅이 반환하는 테이블 데이터 인스턴스	required
interactiveStyles	{ hoverColor: string; clickedColor: string; }	테이블 행의 마우스 hover 시와 클릭 시 배경색 지정	hoverColor : optional, clickedColor : rowSelectionType이 설정된 경우에 필수
subRowProps	object	subRow 관련 설정	optional
rowSelectionType	"single" or "multiple" or "grouped"	행 선택 타입을 설정	optional
defaultSelectedRowIndex	number	rowSelectionType 이 single 일 때, 기본 값으로 선택될 행의 인덱스를 설정합니다.	rowSelectionType이 single일 때 optional
groupSelectionRange	number	rowSelectionType이 grouped일 때, 그룹 선택 범위를 설정합니다. (선택한 행 기준, range 만큼 위/아래 추가 선택)	rowSelectionType이 grouped일 때 필수

import "rex-web-table/dist/index.css";

1) rowSelectionType을 설정하지 않은 경우

<TableBody
  table={table}
  style={{
    fontSize: "14px",
    border: "1px solid black",
    textAlign: "center",
  }}
  interactiveStyles={{
    hoverColor: "white", // 행 hover 시 배경색 설정
  }}
/>;


2) rowSelectionType이 "single"인 경우

<TableBody
  table={table}
  style={{
    // 테이블 바디의 CSS 속성을 설정하여 스타일을 전달
    fontSize: "14px",
    border: "1px solid black",
    textAlign: "center",
  }}
  interactiveStyles={{
    hoverColor: "white", // 행 hover 시 배경색 설정
    clickedColor: "black", // rowSelectionType이 설정되었으므로, clicekd Color 설정
  }}
  rowSelectionType="single"
  defaultSelectedRowIndex={0} // (rowSelectionType이 single일 때) 0번째 행 기본 값으로 선택
/>;

3) rowSelectionType이 "multiple"인 경우

<TableBody
  table={table}
  style={{
    // 테이블 바디의 CSS 속성을 설정하여 스타일을 전달
    fontSize: "14px",
    border: "1px solid black",
    textAlign: "center",
  }}
  interactiveStyles={{
    hoverColor: "white", // 행 hover 시 배경색 설정
    clickedColor: "black", // rowSelectionType이 설정되었으므로, clicekd Color 설정
  }}
  rowSelectionType="multiple"
/>;


4) rowSelectionType이 "grouped"인 경우

<TableBody
  table={table}
  style={{
    // 테이블 바디의 CSS 속성을 설정하여 스타일을 전달
    fontSize: "14px",
    border: "1px solid black",
    textAlign: "center",
  }}
  interactiveStyles={{
    hoverColor: "white", // 행 hover 시 배경색 설정
    clickedColor: "black", // rowSelectionType이 설정되었으므로, clicekd Color 설정
  }}
  rowSelectionType="grouped",
  groupSelectionRange={1} // range가 1이므로, 선택한 행 기준 위/아래 각 1개씩 총 3개의 행이 선택됨
/>;

subRowProps의 구성은 아래와 같습니다.

Props	Type	Explain	Required
expandState	Array<boolean>	subRow 확장과 관련된 상태입니다.	optional
style	CSSProperties	inline Style 을 통해 CSS 속성을 설정할 수 있습니다.	optional
hoverColor	string	subRow에 마우스를 hover 했을 때 발생하는 배경색을 설정할 수 있습니다.	optional

import "rex-web-table/dist/index.css";

// useSubRowExpand 훅을 사용하여 서브 행의 확장 상태와 관련된 상태와 상태 관리 함수를 가져옵니다.
const { expandState, changeSubRowExpandState } = useSubRowExpand();

const handleClickRow = ({ rowIndex }: { rowIndex: number }) => {
  // rowIndex를 사용해 클릭한 행의 상태를 변경
  changeSubRowExpandState(rowIndex);
};

<TableProvider
  useParentRowUi={true}
  subRowContents={subRowContents}
  rowClickEvent={handleClickRow} // 행 클릭 시 위에서 정의한 함수를 호출
>
  <TableBody
    table={table}
    subRowProps={{
      expandState, // 서브 행의 확장 상태를 전달
      style: {
        backgroundColor: "ivory", // 테이블의 서브 행에 적용할 CSS 속성을 설정
      },
      hoverColor: "red", // 서브 행에 마우스 hover 시 배경색을 설정
    }}
  />
</TableProvider>;

3.4 TableFooter

• 페이지네이션 기능을 담당하는 컴포넌트로, 해당 기능이 필요할 경우 선택적으로 활용 가능합니다.
• 컴포넌트 호출 시 전달해야 하는 props는 아래와 같습니다.

  Props	Type	Explain	Required
  pagination	PaginationState	페이지네이션 관련 상태	required
  setPagination	Dispatch<SetStateAction<PaginationState>>	페이지네이션 상태관리 함수	required
  totalPageNum	number	전체 페이지 개수 관련 데이터	required
  pageSizeList	Array<number>	한 페이지 당 표시할 컨텐츠 개수 옵션 리스트	optional
  styles	{ containerStyle: CSSproperties; pageSizeSelectStyle: PageSelectStlyeProps; pageNumButtonStyle: PageButtonStyleProps; }	TableFooter 내부 구성 요소에 대한 css 스타일 설정	optional

• style 의 각 구성요소는 아래와 같습니다.
  

  • contianerStyle

    Props	Type	Explain	Required
    containerStyle	CSSProperties	컴포넌트를 담는 container 의 스타일 설정	optional

  • pageSizeSelectStyle

    Props	Type	Explain	Required
    fontColor	string	select 글자색 설정	optional
    backgroundColor	string	select 배경색 설정	optional

  • pageNumButtonStyle

    Props	Type	Explain	Required
    fontColor	string	button 글자색 설정	optional
    selectedNumColor	string	현재 선택된 page num button 글자색 설정	optional
    selectedNumBackgroundColor	string	현재 선택된 page num button 배경색 설정	optional
    arrowButtonColor	string	prev/next button 색상 설정	optional
    disabledArrowButtonColor	string	prev/next button 비활성화 시 (맨 앞/뒤 페이지일 경우) 색상 설정	optional

/**
 * useTable 훅을 사용하여 테이블 관련 상태와 페이지네이션 관련 데이터를 가져옵니다.
 * 페이지네이션 기능을 활성화하려면 `isPagination`을 true로 설정해야 합니다.
 */
const { table, totalPageNum, pagination, setPagination } = useTable<Example>({
  data,
  columns,
  isPagination: true, // 페이지네이션 기능 활성화
});

/**
 * TableFooter 컴포넌트를 호출하여 페이지네이션 기능을 구현합니다.
 * 필요한 페이지네이션 상태와 관련된 설정을 props로 전달합니다.
 */
<TableFooter
  pagination={pagination} // 현재 페이지네이션 상태를 전달
  setPagination={setPagination} // 페이지네이션 상태를 관리하는 함수 전달
  totalPageNum={totalPageNum} // 전체 페이지 수를 전달
  styles={{
    containerStyle: {
      // TableFooter의 컨테이너 스타일 설정
      padding: "2px 3px",
      border: "1px solid darkgray",
      borderLeft: "none",
    },
    pageSizeSelectStyle: {
      // 페이지 사이즈 선택의 스타일 설정
      fontColor: "black",
    },
    pageNumButtonStyle: {
      // 페이지 번호 버튼의 스타일 설정
      backgroundColor: "transparent",
      disabledArrowButtonColor: "darkgray",
    },
  }}
/>;

3.5 useTable

• TableHeader, TableBody, TableFooter 컴포넌트의 props로 전달할 데이터를 반환하는 커스텀 훅입니다.
• 훅 호출 시 전달해야 하는 props는 아래와 같습니다.

  Props	Type	Explain	Required
  data	Array<T>	테이블 body 를 구성하는 데이터입니다.	required
  columns	Array<ColumnDef<T>>	테이블 column 설정에 활용되는 데이터입니다.	required
  isPagination	boolean	페이지네이션 설정 여부를 결정하는 데이터입니다.	optional

• 훅이 반환하는 값은 아래와 같습니다.

  Returned Value	Type	Explain
  table	Table<TData>	테이블 설정에 활용되는 인스턴스 객체. TableHeader, TableBody의 props로 활용됩니다.
  pagination	PaginationState	페이지네이션 관련 상태. TableFooter의 props로 활용됩니다.
  setPagination	Dispatch<SetStateAction<PaginationState>>	페이지네이션 관련 상태관리 함수. TableFooter의 props로 활용됩니다.
  totalPageNum	number	전체 페이지 개수를 의미합니다. TableFooter의 props로 활용됩니다.

/**
 * 테이블에 표시할 데이터와 컬럼 정의
 * 이 데이터는 테이블의 본문을 구성합니다.
 */
const data = [
  { id: 1, name: "kim", age: 28 },
  { id: 2, name: "lee", age: 22 },
];

/**
 * 테이블의 각 컬럼을 정의합니다.
 * ColumnDef 타입을 사용하여 각 컬럼의 키와 속성을 설정합니다.
 */
const columns: ColumnDef<{ id: number; name: string; age: number }>[] = [
  { accessorKey: "id", header: "ID" },
  { accessorKey: "name", header: "이름" },

  // **셀 커스터마이징**
  // 만약 셀에 커스텀 컴포넌트를 사용하고 싶다면,
  // cell 프로퍼티에 함수를 전달하여 원하는 값을 반환할 수 있습니다.
  // 이때, .getValue() 메서드를 사용해 현재 행의 데이터를 쉽게 가져올 수 있습니다.
  {
    accessorKey: "age",
    header: "나이",
    cell: ({ getValue }) => {
      const age = getValue(); // 현재 행의 나이 값을 가져옵니다.
      return <span>{age}세</span>; // 나이 값을 커스텀 형식으로 반환합니다.
    },
  },
];

/**
 * useTable 훅을 호출하여 테이블과 페이지네이션 관련 상태를 가져옵니다.
 * 데이터와 컬럼을 props로 전달합니다.
 */
const { table, totalPageNum, pagination, setPagination } = useTable<{
  id: number;
  name: string;
  age: number;
}>({
  data, // 테이블의 본문 데이터
  columns, // 테이블의 컬럼 설정
  isPagination: true, // 페이지네이션 기능 활성화
});

/**
 * 테이블을 구성하는 컴포넌트를 호출합니다.
 * 각 컴포넌트는 useTable 훅에서 반환된 값을 props로 전달받습니다.
 */
return (
  <TableProvider>
    <TableHeader table={table} /> {/* 테이블의 헤더를 렌더링 */}
    <TableBody table={table} /> {/* 테이블의 본문을 렌더링 */}
    <TableFooter
      pagination={pagination} // 현재 페이지네이션 상태 전달
      setPagination={setPagination} // 페이지네이션 상태를 관리하는 함수 전달
      totalPageNum={totalPageNum} // 전체 페이지 수 전달
    />
  </TableProvider>
);

3.6 useSubRowContents

• TableProvider의 subRowContents에 전달할 상태와 상태 관리 함수를 반환하는 커스텀 훅입니다.
• 훅이 반환하는 값은 아래와 같습니다.

  Returned Value	Type	Explain
  subRowContents	Array<object[]>	TableProvider의 subRowContents로 활용되는 상태
  setSubRowContents	Dispatch<SetStateAction<Array<object[]>>>	subRowContents 상태관리 함수

/**
 * 서브 행에서 사용할 데이터를 정의합니다.
 * 각 인덱스는 각 부모 행에 대응하는 서브 행의 데이터를 나타냅니다.
 */
const subRowData: object[][] = [
  [
    { no: 1, name: "lee" }, // 첫 번째 서브 행의 첫 번째 항목
    { no: 2, name: "kim" }, // 첫 번째 서브 행의 두 번째 항목
  ],
  [
    { no: 1, name: "park" }, // 두 번째 서브 행의 첫 번째 항목
    { no: 2, name: "choi" }, // 두 번째 서브 행의 두 번째 항목
  ],
];

/**
 * useSubRowContents 훅을 호출하여 초기값으로 subRowData를 전달하고
 * 서브 행에서 사용할 상태와 상태 관리 함수를 가져옵니다.
 * 초기값은 선택적으로 전달 가능하며, 전달하지 않을 경우 빈 배열이 초기 값으로 설정됩니다.
 */
const { subRowContents, setSubRowContents } = useSubRowContents(subRowData);

/**
 * TableProvider를 사용하여 테이블을 구성합니다.
 * useParentRowUi가 true일 경우, 부모 행의 UI를 서브 행에서 상속받습니다.
 * subRowContents를 서브 행 데이터로 전달하여 활용합니다.
 */
return (
  <TableProvider useParentRowUi={true} subRowContents={subRowContents}>
    <TableHeader table={table} />
    <TableBody table={table} />
  </TableProvider>
);

3.7 useSubRowExpand

• TableBody의 expandState에 전달할 상태와 상태 관리 함수를 반환하는 커스텀 훅입니다.
• 훅이 반환하는 값은 아래와 같습니다.

  Returned Value	Type	Explain
  expandState	Array<boolean>	TableBody의 expandState 상태
  setExpandState	Dispatch<SetStateAction<boolean[]>>	expandState 상태관리 함수
  changeSubRowExpandState	function	클릭한 행의 expandState를 변경하는 함수

/**
 * 서브 행의 확장 상태를 관리합니다.
 * 클릭한 행의 확장 상태를 변경하는 함수와 현재의 확장 상태를 반환합니다.
 */
const { expandState, changeSubRowExpandState } = useSubRowExpand();

/**
 * 테이블의 특정 행이 클릭되었을 때 호출되는 핸들러 함수입니다.
 * 클릭된 행의 인덱스를 받아 해당 행의 확장 상태를 변경합니다.
 * 이 함수는 사용자가 직접 정의하여 활용할 수 있습니다.
 */
const handleRowClick = ({ rowIndex }: { rowIndex: number }) => {
  changeSubRowExpandState(rowIndex);
};

/**
 * TableProvider를 사용하여 테이블을 구성합니다.
 * subRowContents와 함께 서브 행의 확장 상태를 관리합니다.
 * rowClickEvent에 핸들러를 전달하여 클릭 시 확장 상태를 변경하도록 설정합니다.
 */
return (
  <TableProvider
    useParentRowUi={true} // 부모 행의 UI를 서브 행에서 상속받도록 설정
    subRowContents={subRowContents} // 서브 행에서 사용할 데이터를 전달
    rowClickEvent={handleRowClick}
  >
    <TableBody
      table={table}
      subRowProps={{
        expandState, // 서브 행의 확장 상태
      }}
    />
  </TableProvider>
);

3.8 getClickedRowContent, getClickedCellContent

• 사용자가 클릭한 행 및 셀의 콘텐츠를 가져오는 유틸리티 함수입니다.
• 사용 예시는 아래와 같습니다. (클릭 이벤트에 전달하여 사용하는 예시)

/**
 * 클릭 이벤트 핸들러에서 클릭된 행의 콘텐츠를 가져오는 예시입니다.
 * 필요한 경우, 클릭된 행의 데이터를 활용하여 추가 작업을 수행할 수 있습니다.
 */
const handleClickRow = () => {
  const rowContent = getClickedRowContent(); // 클릭된 행의 콘텐츠 가져오기
  console.log("클릭된 행의 데이터:", rowContent);
};

/**
 * 클릭 이벤트 핸들러에서 클릭된 셀의 콘텐츠를 가져오는 예시입니다.
 * 필요에 따라 클릭된 셀의 데이터를 활용할 수 있습니다.
 */
const handleClickCell = () => {
  const cellContent = getClickedCellContent(); // 클릭된 셀의 콘텐츠 가져오기
  console.log("클릭된 셀의 데이터:", cellContent);
};

return (
  <TableProvider
    rowClickEvent={handleClickRow} // 행 클릭 이벤트 핸들러를 전달합니다.
    cellClickEvent={handleClickCell} // 셀 클릭 이벤트 핸들러를 전달합니다.
  >
    <TableHeader table={table} />
    <TableBody table={table} />
  </TableProvider>
);

4. Issue

• 현재 sorting 기능이 미구현 된 상태로 추후 기능 보완이 필요한 상황입니다.