Table

데이터 테이블 컴포넌트

Table#

데이터를 행과 열로 표시하는 테이블 컴포넌트입니다. 정렬, 선택, 페이지네이션을 지원합니다.

사용법#

CouiTable<User>(
  columns: [
    CouiTableColumn(
      header: '이름',
      cellBuilder: (user) => Text(user.name),
      sortable: true,
    ),
    CouiTableColumn(
      header: '이메일',
      cellBuilder: (user) => Text(user.email),
    ),
    CouiTableColumn(
      header: '역할',
      cellBuilder: (user) => CouiBadge(label: user.role),
    ),
  ],
  rows: users,
  onSort: handleSort,
)

Table<User>(
  columns: [
    TableColumn(
      header: '이름',
      cellBuilder: (user) => Text(user.name),
      sortable: true,
    ),
    TableColumn(
      header: '이메일',
      cellBuilder: (user) => Text(user.email),
    ),
  ],
  rows: users,
  onSort: handleSort,
)

Props / Parameters#

속성	타입	기본값	설명
`columns`	`List<CouiTableColumn<T>>`	필수	열 정의 목록
`rows`	`List<T>`	필수	행 데이터 목록
`onSort`	`SortCallback?`	`null`	정렬 콜백
`selectable`	`bool`	`false`	행 선택 가능 여부
`onRowSelected`	`ValueChanged<Set<T>>?`	`null`	행 선택 콜백
`pagination`	`TablePagination?`	`null`	페이지네이션 설정

변형 (Variants)#

선택 가능한 테이블#

CouiTable<User>(
  columns: columns,
  rows: users,
  selectable: true,
  selectedRows: selectedUsers,
  onRowSelected: handleRowSelection,
)

페이지네이션#

CouiTable<User>(
  columns: columns,
  rows: users,
  pagination: TablePagination(
    pageSize: 10,
    currentPage: currentPage,
    totalItems: totalUsers,
    onPageChanged: handlePageChange,
  ),
)

빈 상태#

CouiTable<User>(
  columns: columns,
  rows: [],
  emptyState: Text('데이터가 없습니다'),
)