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 의 매개변수는 아래와 같습니다

  1. SubRowComponent | Params | Type | Explain | Required | | ---------- | ------------ | ---------------- | -------- | | contents | object[] | TableProvider에서 subRowContents props 로 전달한 데이터 | optional |
  2. rowClickEvent와 subRowClickEvent | Params | Type | Explain | Required | | ---------- | ------------ | ---------------- | -------- | | rowIndex | number | 클릭한 행의 순서 | optional | | e | MouseEvent | 클릭 이벤트 객체 | optional |
  3. 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 의 각 구성요소는 아래와 같습니다.

  1. contianerStyle | Props | Type | Explain | Required | | --------------- | ------------------------------------------- | ------------------------------------------- | -------- | | containerStyle | CSSProperties | 컴포넌트를 담는 container 의 스타일 설정 | optional |
  2. pageSizeSelectStyle | Props | Type | Explain | Required | | --------------- | ------------------------------------------- | ------------------------------------------- | -------- | | fontColor | string | select 글자색 설정 | optional | | backgroundColor | string | select 배경색 설정 | optional |
  3. 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 기능이 미구현 된 상태로 추후 기능 보완이 필요한 상황입니다.