table-header

리스트 페이지 - 테이블 헤더 영역

Props

Props	Type	Default	Description
totalCount	number	0	테이블 전체 데이터 수
filterValues	object	{}	검색 필터 조건
handleChange	function	-	필터 변경 이벤트 핸들러
renderControls	object	{}	제어 버튼 영역
renderOptions	object	{}	테이블 옵션 영역 (검색 필터)

Usage

import { TableHeader } from '@/src/components/layout'

export function TableHeaderDemo() {
  return (
    <TableHeader
      totalCount={246}
      filterValues={}
      handleChange={() => {}}
      renderControls={[
        {
          type: 'button',
          variant: 'outline',
          onClick: () => {},
          children: '제어버튼',
        },
        {
          type: 'button',
          variant: 'outline',
          onClick: () => {},
          children: (
            <>
              <Icon />
              삭제
            </>
          ),
        },
      ]},
      renderOptions={[
        {
          type: 'button',
          className: 'p-2.5',
          variant: 'secondary',
          onClick: () => {},
          children: <Download />,
        },
        {
          type: 'select',
          selectName: 'pageSize',
          selectOptions: selectOptions.pageSize,
          triggerChildren: (
            <>
              <TableIcon className="mr-2 size-4" />
              <span className="mr-1">컬럼: </span>
            </>
          ),
        },
        {
          type: 'select',
          selectName: 'sortType',
          selectOptions: selectOptions.adminAccountListSortType,
          triggerChildren: (
            <>
              <SortDesc className="mr-2 size-4" />
              <span className="mr-1">정렬: </span>
            </>
          ),
        },
      ]}
    />
  )
}