Flutter : DataTable

DataTable

Material Design 의 데이터 테이블을 그려주는 Flutter Widget 이다.

 

DataTable class

DataTable({Key key, @required List columns, int sortColumnIndex, bool sortAscending: true, ValueSetter onSelectAll, double dataRowHeight: kMinInteractiveDimension, double headingRowHeight: 56.0, double horizontalMargin: 24.0, double columnSpacing: 56.0, @required List rows })

 

columns 리스트는 표의 첫 행에 들어가는 데이터 리스트 이며 각 열의 이름이 된다. 각 항목은 DataColumn 으로 구성되며 각각이 위젯이다.

rows 는 표의 각 행의 셀들에 들어갈 데이터를 가진 리스트이다. 각 항목은 DataRow 로 구성된다.

각 셀의 margin, space 값들을 지정하여 크기를 조절할 수 있다.

간단한 예제로는 아래와 같다.

DataColumn class

DataColumn({@required Widget label, String tooltip, bool numeric: false, DataColumnSortCallback onSort })

One column configuration must be provided for each column to display in the table.

표의 열에 관련된 설정을 가진 클래스 이다.

label 은 해당 열의 항목 이름이 된다.

numeric 은 해당 열의 데이터가 숫자로 처리되게 한다.

onSort 는 해당 열을 기준으로 정렬을 하는 콜백 함수이다.

DataRow class

DataRow({LocalKey key, bool selected: false, ValueChanged onSelectChanged, @required List cells })

One row configuration must be provided for each row to display in the table.

표의 행에 관한 설정을 가지며 각 셀의 데이터를 가지고 있는 클래스 이다.

cells 는 각 셀들의 값을 가진 위젯의 리스트 이다.

DataCell

DataCell(Widget child, { bool placeholder: false, bool showEditIcon: false, VoidCallback onTap })

The data for a cell of a DataTable.

표의 각 셀에 대항하는 위젯을 가진다. 설정에 따라 사용자가 값을 수정하거나 입력하도록 할 수 있다.

child 는 표의 셀에 그려지는 위젯이다.

Example

온라인 사이트에 공개되어 있는 CSV 파일을 읽어 DataTable 을 만드는 예제이다.

 

온라인에서 CSV 파일을 읽어온다.

 

첫번째 행은 아래의 값으로 되어 있는데 표에서 첫 줄에 들어가 각 열의 이름이 되는 값으로, 따로 csvHeadingRow 에 저장한다.

rank,name,confed,off,def,spi

그리고 첫 줄의 값을 뺀 나머지 표 데이터가 될 값들은 csvRows에 저장한다.

 

표의 크기값을 지정하고, columns 와 rows 를 지정하는 함수를 호출한다.

 

csvHeadingRow 의 값으로 columns 에 들어갈 List<DataColumn> 을 생성한다.

'rank' 열은 numeric 으로 설정하고 sort 함수 _dataColumnSort() 를 지정한다.

 

csvRows 의 값으로 rows 에 들어갈 List<DataRow> 를 생성한다.

 

데이터가 많아 표가 크면 한 화면에 다 안그려진다. SingleChildScrollView 를 사용하여 화면이 스크롤 될 수 있게 해준다.

Example Code

 

Reference

Flutter Documentation

Youtube Flutter Channel