📍 튜터님과 Widget 공부

✏️ DataTable

표 형태로 데이터를 보여주는 위젯
Table과 달리 행(Row)과 열(Column) 구조, 정렬 기능, 선택 기능 등이 내장되어 있어 데이터 표시용 UI로 자주 사용

기본 구조

DataTable(
  columns: [
    DataColumn(label: Text('Name')),
    DataColumn(label: Text('Age')),
    DataColumn(label: Text('Role')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('Alice')),
      DataCell(Text('25')),
      DataCell(Text('Designer')),
    ]),
    DataRow(cells: [
      DataCell(Text('Bob')),
      DataCell(Text('30')),
      DataCell(Text('Developer')),
    ]),
  ],
)

주요 클래스

클래스	설명
DataTable	표 전체를 감싸는 위젯
DataColumn	열 정보 (label, 정렬 가능 여부 등)
DataRow	행 정보 (각 셀의 데이터, 선택 여부 등)
DataCell	각 셀의 실제 데이터, onTap 가능

주요 속성

DataTable 속성

속성	설명	예시
columns	필수, DataColumn 리스트	columns: [DataColumn(label: Text('Name'))]
rows	필수, DataRow 리스트	rows: [DataRow(cells: [...])]
sortColumnIndex	정렬 기준 열의 인덱스	0
sortAscending	오름차순(true)/내림차순(false)	true
showCheckboxColumn	첫 열에 체크박스 표시 여부	false

DataColumn 속성

속성	설명
label	열 제목 위젯 (Text 등)
numeric	숫자 데이터 정렬 시 우측 정렬 여부
onSort	열 클릭 시 정렬 콜백 (columnIndex, ascending)

DataRow 속성

속성	설명
cells	DataCell 리스트, 각 행의 데이터
selected	체크박스 선택 여부
onSelectChanged	선택 상태 변경 시 콜백

DataCell 속성

속성	설명
child	셀에 표시할 위젯 (Text, Icon 등)
onTap	셀 클릭 시 콜백